Jquery UI плъзгача - плъзгач за избор на лента
Когато оформлението на магазина често са изправени пред задачата да се приложи лесен за употреба избор на ценови диапазон. Тя може да изглежда така:
Идеята, надявам се, е ясно. Презатягайте плъзгачи, поле за въвеждане стойности се променят синхронно. Нека се опитаме да го приложат.
За да се намери решение на Js за кръстосано браузър за интерфейс избор диапазон. изисквания:
- INPUT и плъзгачи са свързани (промяна на стойността на един веднага отразени в друга);
- стайлинг гъвкавост (тя трябва да се появи на дизайна).
Ние ще използваме приставката JQuery UI плъзгач. Сама по себе си, той просто създава плъзгач, но се сприятеля с INPUT му не е трудно.
Така че, първо нека приемем, че няма INPUT, и да видим как работи плъгина.
Какво рок?
за бърз старт
В HTML, създаване на елемент, който ще замени шалтера на плъзгача и го възлага номер:
Инициализиране плъзгач скрипт:
А сега по-
Приставката е доста гъвкав. Тя ви позволява да създадете вертикални или хоризонтални песни, които могат да отидат един или два плъзгачи. Вариант две плъзгачи просто перфектни за нашия проблем - диапазон на избор.
По време на преместване на плъзгача или спирката може да изпълнява функция, чрез която плъзгача може да се използва като контрола (промените стойността на INPUT, вашият Изберете или, например, за да превключвате между разделите - на официалния сайт на плъгин има и демо например).
неговите параметри могат да се задават при инициализиране на плъгина:
Задава или се връща на плъзгача. За плъзгачи с множество плъзгачи или с лента.
Създаване стилове
Nekotoye на тези правила може да се комбинира като приставка щедро възнаграждава елементи, определени от класове. Например, моята първоначална
Но аз предпочитам да напусне стилове в тази форма за по-голяма гъвкавост. Мисля, че този, който ще има този модел стилизирам вертикален слайдер, да ми каже благодаря.
Добавянето на свързаната INPUT
Сега най-забавната част. Добавете две INPUT, която ще се появи на ценностите, избрани на плъзгача.
Когато подготвя за събитие с помощта на плъзгача спирка и пързалка - първо се гарантира правилното стойност в момента на спиране на плъзгача, а вторият ще осигури интерактивност (INPUT стойност ще се промени в реално време, синхронно движение на плъзгача).
Кодът за двете събития е един и същ - ние се текущата стойност с помощта на .slider на метод ( "ценности", X) и го поставете в желаната вход:
Остава да предоставят обратна информация. Научете се да преместите плъзгача, ако потребителят въведе стойност в вход. Тук можете да използвате натискане събитието, за да се отговори на плъзгача всеки натискане на клавиш или събитие промени, ако искаме да променим влиза в сила след влизането и излизането от терена. Въпрос на вкус.
В същото време сложих изход тест с висока стойност на обхвата (моя е 1000) и проверете дали долния плъзгач не се получи стойност по-голяма от горната:
Последно детайл - необходимостта да се гарантира, че потребителят не може да пробие на приставката, като напишете буквите във входа или nekorrektrye числови стойности. Тази точка не се счита за по-подробно, тъй като не са насочени директно към тематични статии. Любопитни вижте демо пример. къде е, разбира се, го изпълнява.
В бъдеще статия ще усложни задачата. Аз ще покажа как въз основа на това решение, можете да изберете стойности с нередовен терен и различни мащаби. Това означава, че когато е необходимо, например, през първата половина на плъзгача отчита диапазон от стойности от 0 до 100, а вторият от 100 до 1000.
Тези опции са доста често срещани в онлайн магазини - това е удобно, защото малките суми, които delalizatsiya по-важни и удобство на потребителя, както е известно, на първо място.