Топ плагінів jQuery. Плагін jquery-on-off-switch

34

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. Сьогодні ми познайомимося з плагіном jquery-on-off-switch, який дозволяє створювати красиві перемикачі чекбокси для форм.

Варіантів таких плагінів можна знайти десятки в мережі. Вони популярні, оскільки дозволяють оформити ті елементи форми, які складно піддаються оформлення через CSS, в даному випадку мова йде про чекбоксах форми. З стандартного чекбокса, в якому можна поставити або прибрати галочку, плагін дозволяє зробити повноцінний красивий перемикач.

Отже, йдемо на офіційний репозиторій плагін jquery-on-off-switch і викачуємо звідти. Після чого підключаємо до нашої сторінці:

Тепер створимо кілька чекбоксов на сторінці:

Поки що ми маємо стандартну картину:

Топ плагинов jQuery. Плагин jquery-on-off-switch

Плагін передбачає два варіанти використання: автоматичний і ручний. Автоматичний варіант підійде, якщо у нас багато перемикачів і ми хочемо викликати плагін для всіх відразу, в даному випадку по найменуванню класу, який вказаний для перших чотирьох перемикачів. Зробити це можна так:

new DG.OnOffSwitchAuto({
cls:’.custom-switch’,
textOn:»YES»,
height:35,
textOff:»NO»,
textSizeRatio:0.35
});

Тепер картина кардинально змінилося, ми отримали дійсно перемикачі.

Топ плагинов jQuery. Плагин jquery-on-off-switch

А ось як виглядає включене стан:

Топ плагинов jQuery. Плагин jquery-on-off-switch

Ну і ручної виклик плагіна для останнього перемикача може бути таким:

new DG.OnOffSwitch({
el:’#checkbox’,
textOn:»Вкл.»,
height:35,
textOff:»Викл.»,
trackColorOn:’#F57C00′,
trackColorOff:’#666′,
trackBorderColor:’#555′,
textColorOff:’#fff’,
textSizeRatio:0.35
});

Топ плагинов jQuery. Плагин jquery-on-off-switch

Як бачимо, ми звертаємося до елемента за його ID і при цьому замість методу OnOffSwitchAuto використовуємо метод OnOffSwitch. Також додатково ми передали кілька опцій, що відповідають за оформлення перемикача. Зручно, чи не так?

Ну а у мене на цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!