Dodatak za upravljanje količinom JQUERY, CSS. Upute i primjeri
U ovom članku ćemo vam pokazati kako napraviti blok s brojem koji se može unijeti pomoću tipkovnice i podesiti pomoću tipki plus/minus. Ova metoda, na primjer, može biti korisna u online trgovinama za označavanje broja jedinica proizvoda koji se kupuje.
Priprema za rad
Pogledajte DEMO Preuzmite primjer
Prvo, moramo napisati najjednostavniju oznaku našeg bloka u html dokumentu.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Плагин</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<main>
<div class="count">
<span class="minus">—</span>
<input type="number" value="1">
<span class="plus">+</span>
</div>
</main>
</body>
</html>, Gdje
<input type="number" value="1">polje za unos tipa broja sa vrijednošću “1”,
<span class="minus">—</span>
<span class="plus">+</span>malim slovima za dalje podešavanje broja u polju za unos.
Zatim ćemo dodati neke stilove kako bi izgledao lijepo.
.count {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
max-width: 90px;
padding: 15px;
background: #e8f0f6;
border-radius: 30px;
}
.count input {
width: 48px;
border: none;
border-bottom: 1px #404040 solid;
background: transparent;
text-align: center;
padding: 0;
margin: 0;
}
.count span {
cursor: pointer;
}
.count .minus{
font-size: 12px;
margin-right: 10px;
}
.count .plus{
margin-left: 10px;
}
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}, Gdje
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
potrebno za uklanjanje standardnih prekidača ulaznog polja
I sada imamo prekrasan blok za unos broja i regulaciju pomoću dugmadi, ali nešto nedostaje. Nedostaje nam skripta koja će povezati naše dugmad sa poljem za unos i, u stvari, reći će nam zašto su ovde. JavaScript i JQuery biblioteka će nam pomoći u tome. Da bismo implementirali ovaj korak našeg zadatka, moramo povezati standardnu JQuery biblioteku, u našem slučaju to je verzija 3.3.1. JQuery je divan JavaScript okvir koji impresionira svojom lakoćom razumijevanja i lakoćom korištenja. Za početak, trebat će vam sam okvir, možete ga preuzeti na službenoj web stranici JQuery. Zatim ga je potrebno povezati pored veze sa CSS fajlom na sledeći način:
<script src="/js/jquery-3.3.1.min.js"></script>Zatim, pređimo na pisanje samog koda umetanjem oznake “script”. U pravilu, skripte se ubacuju na kraj tijela stranice ili iza selektora u kojem se koriste:
<script>
$('.minus').click(function () { // вызов функции при клике на элемент
var $input = $(this).parent().find('input'); // объявление переменной и присвоение ей значения поля ввода
var count = parseInt($input.val()) - 1; // объявление переменной, преобразование значения в число и уменьшение его на 1
count = count < 1 ? 1 : count; // условие, которое говорит "Если значение переменной меньше 1 то запиываем 1"
$input.val(count); // присвоение атрибута value переменной count переменной $input
});
$('.plus').click(function () { // вызов функции при клике на элемент
var $input = $(this).parent().find('input'); // объявление переменной и присвоение ей значения поля ввода
$input.val(parseInt($input.val()) + 1); // объявление переменной, преобразование значения в число и увеличение его на 1
});
</script>, pri čemu smo napravili tako da se vrijednost atributa “value” elementa “input” povećava kada kliknete na plus i smanjuje kada kliknete na minus, a također smo postavili ograničenje kako ne bi bilo moguće minus ispod jedan.
Sada ćemo malo zakomplikovati zadatak i pobrinuti se da u pasivnom stanju gumbi nestanu i da je vidljiv samo broj, a kada se fokusirate ili lebdite iznad elementa, ovaj blok se prikazuje u cijelosti. Da bismo to učinili, moramo dodati stilove i malo skripte koristeći JQ.
I tako, prvo morate dodati stilove tako da poprime sljedeći oblik:
.count {
display: flex;
justify-content: center;
text-align: center;
align-items: center;
max-width: 45px;
max-height:45px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
padding: 15px;
margin: auto;
background: #e8f0f6;
border-radius: 30px;
-webkit-transition: max-width 0.5s;
-moz-transition: max-width 0.5s;
-o-transition: max-width 0.5s;
transition: max-width 0.5s;
}
.count:hover,
.count.active {
max-width: 110px;
background: #fff;
border: 1px #c2c2c2 solid;
}
.count:hover input,
.count.active input {
border-bottom: 1px #404040 solid;
margin-bottom: -1px;
}
.count input {
width: 45px;
border: none;
background: transparent;
text-align: center;
padding: 0;
margin: 0;
margin-left: -3px;
}
.count span {
cursor: pointer;
}
.count .minus{
font-size: 12px;
margin-right: 10px;
}
.count .plus{
margin-left: 10px;
}
input[type='number'] {
-moz-appearance:textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
gdje smo dodali box-sizing: border-box; - tako da se vrijednost širine/visine izračunava uzimajući u obzir interni padding, overflow: hidden; - tako da blok odsijeca elemente koji prelaze njegovu granicu, margina: auto; - za poravnavanje bloka prema centru i prijelaz: max-width 0.5s; - tako da se blok animirano otvara. Dodali smo i stilove za efekat lebdenja i efekat kada je blok aktivan (koji će raditi nakon dodavanja skripte napisane ispod).
I tako, lebdeći efekat već radi, ali to nije dovoljno, potrebno nam je da radi i pri fokusiranju, odnosno kada kliknemo na element, na primjer, da unesemo ručno. Da bismo to uradili, dodaćemo skriptu:
$( "input" ).focus(function() { // Вызов функции, когда выбран этот элемент
$(this).parent().addClass('active'); // Добавление класса родителю этого элемента
});
$( "input" ).focusout(function() { // Вызов функции, когда фокус пропадает с выбранного элемента
$(this).parent().removeClass('active'); // Удаление класса у родителя элемента
});
, gdje dodajemo klasu "active" roditeljskom elementu kada polje za unos ima fokus i uklanjamo je kada se fokus izgubi. Element dobija fokus kada korisnik klikne na njega. Fokus obično znači "spremite se da unesete podatke o ovom elementu", ovo je dobro vrijeme za inicijalizaciju ili učitavanje nečega. Tačka u kojoj se gubi fokus je kada korisnik klikne negdje drugdje ili pritisne Tab da pređe na sljedeće polje obrasca.
Kao rezultat, vidimo samo neki broj u krugu, ali kada pokažemo na njega ili kliknemo na njega, blok se širi, prikazujući gumbe za njegovo podešavanje, kao i mogućnost ručnog unosa pomoću tipkovnice.