Від автора: дуже часто при створенні веб-сторінок необхідно відображати на екрані браузера різні елементи форм, а саме чекбокси, радіо-кнопки і випадаючі списки тег select. При цьому їх стандартний вигляд вже ніяк не вписується в дизайн сучасних сайтів. Тому в даному уроці я хотів би поговорити про дуже цікавою і функціональної бібліотеці під назвою Formstone і її двох віджетах, що дозволяють красиво стилізувати елементи, згадані вище.
Установка бібліотеки
Бібліотека Formstone – це новий і активно розвивається набір різних плагінів для всім відомої бібліотеки jQuery, яка володіє величезним функціоналом і гнучкістю, досить добре працює з мобільними пристроями, що не мало важливо в даний час і, що найголовніше — дуже добре описана в документації. Отже, офіційний сайт бібліотеки — http://formstone.it/:
У розділі components – міститься документація по даній бібліотеці. Перейшовши за посиланням Github, нас перенаправляють на сервіс github, де можна завантажити актуальну версію даної бібліотеки, що власне ми і зробимо.
В результаті скачування, ми отримаємо архів з исходниками даної бібліотеки. Після розпакування в отриманій папці, нас цікавить каталог dist, де розташовані дві папки css і js. В каталозі css збережені стилі для кожного з елементів окремо і дані стилі необхідно скопіювати в папку стилів нашого сайту. Відповідно в каталозі js, збережені плагіни даної бібліотеки, які необхідно скопіювати в папку, де зберігаються скрипти JavaScript. Так як вміст бібліотеки Formstone, це плагіни для бібліотеки jQuery, значить дана бібліотека, нам також потрібна, тому переходимо на офіційний сайт jQuery і викачуємо дану бібліотеку в папку скриптів JavaScript.
Для даного уроку я буду використовувати дві тестові веб-старніцах: перша – для тестування віджета checkbox(), який працює з чекбоксами і радіо-кнопками. І друга – для тестування віджета dropdown(), який дозволяє стилізувати випадаючий список тег select. В кожну з цих сторінок необхідно підключити бібліотеку jquery:
Далі підключимо основне ядро бібліотеки і плагін touch, завдяки якому здійснюється підтримка мобільних пристроїв:
Віджет checkbox()
Отже, переходимо до розділу документації (посилання components на головній сторінці), офіційного сайту бібліотеки і знаходимо віджет checkbox():
Повторюся, що даний віджет, використовується для красивого оформлення чекбоксов і радіо-кнопок. Далі розглянемо веб-сторінку, яку ми будемо використовувати для тестування цієї бібліотеки:
Як Ви бачите, я вже додав кілька елементів форм для тестування. Тепер якщо уважно подивитися документацію, то можна побачити розділ Use, в якому показані файли які необхідно підключити для роботи цього віджета.
Так само зверніть увагу на підрозділ Dependencies, в якому описано від яких додаткових елементів залежить функціонал віджета. При цьому файли з підрозділу Dependencies, обов’язково необхідно підключити до цікавої веб-сторінці.
Отже, давайте підключимо необхідні файли і за одне, розглянемо вихідний код тестової сторінки:
Чекбокси і радіокнопки
Чекбокс!!!
Чекбокс 1
Чекбокс 2
Чекбокс 3
Чекбокс 4
Радіо!!!
Радіо 1
Радіо 2
Радіо 3
Радіо 4
Відразу ж зверніть увагу на розмітку, яка необхідна для роботи віджета checkbox(). Ця розмітка в точності збігається з розміткою описано в документації віджета (розділ Use, під розділ Ваѕіс). Для використання віджету, необхідно вибрати за допомогою бібліотеки jQuery цікавлять чекбокси і радіо-кнопки і викликати головний метод віджета:
jQuery(«document»).ready(function($) {
$(«input[type=checkbox] ,input[type=radio]»).checkbox({});
});
При цьому на екрані ми побачимо наступне:
Як Ви бачите, буквально кілька рядків коду, а чекбокси і радіо-кнопки, значно красивіше відображаються. При цьому якщо передати налаштуванні toogle, значення TRUE, чекбокси будуть відображатися у вигляді перемикачів:
jQuery(«document»).ready(function($) {
$(«input[type=checkbox]»).checkbox({
toggle:true,
});
});
Текст заголовків перемикачів можна задати, звернувшись до налаштування labels:
jQuery(«document»).ready(function($) {
$(«input[type=checkbox]»).checkbox({
toggle:true,
labels: {
on:’Включено’,
off:’Вимкнено’
}
});
});
Але при цьому необхідно змінити ширину блоку перемикачів, задавши правило для певного класу:
.fs-checkbox-toggle .fs-checkbox-marker {
width:200px !important;
}
При цьому на екрані ми побачимо наступне:
Для налаштування відображення елементів віджета можна використовувати один з класів зазначених в документації, в розділі CSS:
Або, використовуючи налаштування customClass:’myclass’, вказати власний клас, який буде присвоєно віджету checkbox().
Віджет dropdown()
Для цього віджета ми будемо використовувати наступну тестову сторінку:
Аналогічно перейдіть на сторінку Components і знайдіть документацію по віджету dropdown():
Тепер наведу HTML розмітку тестової сторінки (зверніть увагу, я вже підключив необхідні файли для роботи віджету, виходячи з документації):
Випадаючі списки
Випадаючий список!!!
Меню 1
Меню 2
Меню 3
Як Ви бачите необхідна розмітка – це стандартний тег select. Для роботи даного віджета необхідно вибрати за допомогою бібліотеки jQuery контейнер select і викликати головний метод віджета:
jQuery(«document»).ready(function($) {
$(‘select’).dropdown({});
});
При цьому, для правильного відображення віджета, необхідно вказати наступне правило CSS:
.fs-dropdown-bottom .fs-dropdown-options {
bottom:auto !important;
}
При цьому на екрані ми побачимо наступне:
Як Ви бачите, використовувати цей віджет досить просто. Тепер давайте додамо кілька правил CSS, для більш красивого оформлення (з доступними класами можна ознайомитися в розділі CSS документації):
.fs-dropdown-bottom .fs-dropdown-options {
bottom:auto !important;
}
.fs-dropdown { max-width: 500px; }
.fs-dropdown-selected { border-width: 1px; }
.fs-dropdown-options { border-width: 2px 0 2px; padding: 1%; }
.fs-dropdown-item { border-radius: 3px !important; border: none; margin: 0 0 1%; }
.fs-dropdown-item:hover {
background: none repeat scroll 0% 0% #EEE !important;
}
Використовуючи налаштування label, можна відобразити довільну рядок у головному блоці віджета, до вибору одного з його елементів:
jQuery(«document»).ready(function($) {
$(‘select’).dropdown({
label:»Виберіть елемент»,
});
});
Цей віджет підтримує одна подія – change, яке спрацьовує після вибору нового елемента (тобто зміна стану віджета):
$(‘select’).on(‘change’,function() {
alert(‘Обраний новий елемент’);
})
На цьому даний урок завершено. Сподіваюся, Вас зацікавила дана бібліотека, і Ви будете використовувати її функціонал в своїх веб-додатках.
Всього Вам доброго і вдалого кодування!!!