Прост скрипт слайдер-плъзгача, за да промените външния вид

Прост скрипт слайдер-плъзгача, за да промените външния вид

В тази статия ние ще обсъдим как да се създаде проста приставка за JQuery. което ще промени облика на плъзгача с плъзгач, така че можете да го зададете на вашия собствен дизайн.

За да започнете работа в тази статия ще разгледаме самия плъгин, описват заложените свойства, и след това да дам един пример за използване.

За да напишете такава за JQuery изисква известни познания в тази област, ако не ги имате, а след това ще бъде много трудно да се разбере.

Тук плъгин код:

Сценарият работи на следния принцип - взето текстовото поле, увита около блока (Има .wrap_slideri клас), който ще служи като бар напредък (на която ще карам на плъзгача), тъй като тя е създадена в рамките на самия блок на плъзгача (Има .slider клас). Всеки един от тях определят подходящите класове. В същата област, скрити от погледа, за да не се намесва (в стилове се предписва на терена в обвивка на плъзгача).

Чрез преместване на плъзгача, която съответства на изчислената стойност и текущата позиция се съхранява като стойност (стойност) в текстовото поле (вход).

приставката се подкрепя определянето на максимална и минимална стойност на плъзгача, поради това можете да зададете различни стойности, като например 50-150, 0-400 и т.н.

По подразбиране, минималната - 0, а максималният - 100.

За да използвате този плъгин, трябва да се свържете на JQuery библиотеката. след което се свържете файла от приставката. Най-добре е да се свържете щепсела преди затварянето . в противен случай той не може да работи.

След свързан щепсел трябва да се обадите на инициализатор за съответния избор. Например, можете да зададете необходимите полета на уникален клас, и да го използвате, за да доведе до промяна в тази област на плъзгача с плъзгач.

Ако трябва да посочите други максимални и минимални стойности, а след това използвайте следната структура:

Пример на щепсела inputSlider

Зададохме на оформлението на страницата ни:

Питаме стилове за появата на плъзгачите и плъзгачите:

Резултатът може да се види на страницата демо:

Прост скрипт слайдер-плъзгача, за да промените външния вид

Или изтеглете пълния пример: