Від автора: дуже часто при створенні веб-сторінок необхідно відображати на екрані браузера різні елементи форм, а саме чекбокси, радіо-кнопки і випадаючі списки тег 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, обов’язково необхідно підключити до цікавої веб-сторінці.

Отже, давайте підключимо необхідні файли і за одне, розглянемо вихідний код тестової сторінки:

Чекбокси і радіокнопки

Відразу ж зверніть увагу на розмітку, яка необхідна для роботи віджета 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 розмітку тестової сторінки (зверніть увагу, я вже підключив необхідні файли для роботи віджету, виходячи з документації):

Випадаючі списки

Як Ви бачите необхідна розмітка – це стандартний тег 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(‘Обраний новий елемент’);
})

На цьому даний урок завершено. Сподіваюся, Вас зацікавила дана бібліотека, і Ви будете використовувати її функціонал в своїх веб-додатках.

Всього Вам доброго і вдалого кодування!!!