Від автора: вітаю вас, друзі. Створюючи форми на сайті, ми неодноразово працюємо з таким елементом форми, як checkbox, який дозволяє відзначити галочкою якийсь пункт форми. За замовчуванням чекбокс виглядає досить буденно, однак є можливість його оформити. Давайте подивимося, як можна стилізувати checkbox і оформити його вельми привабливим чином.
Вихідні файли поточної статті ви можете завантажити за посиланням.
Отже, перед нами є проста форма авторизації, в якій є поле checkbox для запам’ятовування користувача (код форми ви знайдете в исходниках).
Ми отримали стандартний чекбокс. Давайте спробуємо змінити його вигляд. Для цього скористаємося плагіном Bootstrap-checkbox. Скачаємо і встановимо плагін, підключивши файл bootstrap-checkbox.min.js:
Для ініціалізації плагіна досить викликати його метод checkboxpicker() для конкретного чекбокса або для всіх чекбоксов в коді. Давайте викличемо для чекбокса з конкретним ідентифікатором:
$(function(){
$(‘#remember’).checkboxpicker();
});
Розмітка чекбокса при цьому повинна бути приблизно наступної:
Запам’ятати?
Поміщати чекбокс в тег label не рекомендується. Ось що ми отримаємо в результаті:
Оригінальний перемикач замість однотипного чекбокса, чи не так? Ну а за допомогою опцій, які можна передати в метод плагіна, ми маємо можливість зробити стилізацію перемикача checkbox. Наприклад, рядки No і Yes ми можемо замінити на іконки:
$(function(){
$(‘#remember’).checkboxpicker({
html: true,
offLabel: ‘‘,
onLabel: ‘‘
});
});
Або більш відповідні іконки:
$(function(){
$(‘#remember’).checkboxpicker({
html: true,
offLabel: ‘‘,
onLabel: ‘‘
});
});
Набагато більш красивий і інформативний перемикач, на мій погляд. Ну а на цьому поточну статтю ми завершуємо. Додатково по роботі з формами ви можете подивитися цей урок. Удачі!
