От автора: очень часто при создании веб-страниц необходимо отображать на экране браузера различные элементы форм, а именно чекбоксы, радио-кнопки и выпадающие списки тега select. При этом их стандартный вид уже никак не вписывается в дизайн современных сайтов. Поэтому в данном уроке я хотел бы поговорить об очень интересной и функциональной библиотеке под названием Formstone и ее двух виджетах, позволяющих красиво стилизовать элементы, упомянутые выше.
Установка библиотеки
Библиотека Formstone – это новый и активно развивающийся набор различных плагинов для всем известной библиотеки jQuery, которая обладает огромнейшим функционалом и гибкостью, достаточно хорошо работает с мобильными устройствами, что не мало важно в данное время и, что самое главное — очень хорошо описана в документации. Итак, официальный сайт библиотеки — //formstone.it/:
В разделе components – содержится документация по данной библиотеке. Перейдя по ссылке Github, нас перенаправят на сервис github, где можно скачать актуальную версию данной библиотеки, что собственно мы и сделаем.
В результате скачивания, мы получим архив с исходниками данной библиотеки. После распаковки в полученной папке, нас интересует каталог dist, где расположены две папки css и js. В каталоге css сохранены стили для каждого из элементов в отдельности и данные стили необходимо скопировать в папку стилей нашего сайта. Соответственно в каталоге js, сохранены плагины данной библиотеки, которые необходимо скопировать в папку, где хранятся скрипты языка JavaScript. Так как содержимое библиотеки Formstone, это плагины для библиотеки jQuery, значит данная библиотека, нам также нужна, поэтому переходим на официальный сайт jQuery и скачиваем данную библиотеку в папку хранения скриптов JavaScript.
Для данного урока я буду использовать две тестовые веб-старницы: первая – для тестирования виджета checkbox(), который работает с чекбоксами и радио-кнопками. И вторая – для тестирования виджета dropdown(), который позволяет стилизировать выпадающий список тега select. В каждую из данных страниц необходимо подключить библиотеку jquery:
|
1 |
<script src="js/jquery-1.11.2.min.js"></script> |
Далее подключим основное ядро библиотеки и плагин touch, благодаря которому осуществляется поддержка мобильных устройств:
|
1 2 |
<script src="js/core.js"></script> <script src="js/touch.js"></script> |
Виджет checkbox()
Итак, переходим в раздел документации (ссылка components на главной странице), официального сайта библиотеки и находим виджет checkbox():
Повторюсь, что данный виджет, используется для красивого оформления чекбоксов и радио-кнопок. Далее рассмотрим веб-страницу, которую мы будем использовать для тестирования данной библиотеки:
Как Вы видите, я уже добавил несколько элементов форм для тестирования. Теперь если внимательно посмотреть документацию, то можно увидеть раздел Use, в котором показаны файлы которые необходимо подключить для работы данного виджета.
Так же обратите внимание на подраздел Dependencies, в котором описано от каких дополнительных элементов зависит функционал виджета. При этом файлы из подраздела Dependencies, обязательно необходимо также подключить к интересующей веб-странице.
Итак, давайте подключим необходимые файлы и за одно, рассмотрим исходный код тестовой страницы:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/checkbox.css"/> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/core.js"></script> <script src="js/touch.js"></script> <script src="js/checkbox.js"></script> <title>Чекбоксы и радиокнопки</title> </head> <body> <div class="wrap"> <h1>Чекбокс!!!</h1> <label for="id1" >Чекбокс 1</label> <input type="checkbox" name="check1" id="id1" value="1" /> <label for="id2" >Чекбокс 2</label> <input type="checkbox" name="check2" id="id2" value="2" /> <label for="id3" >Чекбокс 3</label> <input type="checkbox" name="check3" id="id3" value="3" /> <label for="id4" >Чекбокс 4</label> <input type="checkbox" name="check4" id="id4" value="4" /> <h1>Радио!!!</h1> <label for="id5" >Радио 1</label> <input type="radio" name="radio" id="id5" value="1" /> <label for="id6" >Радио 2</label> <input type="radio" name="radio" id="id6" value="2" /> <label for="id7" >Радио 3</label> <input type="radio" name="radio" id="id7" value="3" /> <label for="id8" >Радио 4</label> <input type="radio" name="radio" id="id8" value="4" /> </div> </body> </html> |
Сразу же обратите внимание на разметку html, которая необходима для работы виджета checkbox(). Данная разметка в точности совпадает с разметкой описанной в документации виджета (раздел Use, под раздел Basiс). Для использования виджета, необходимо выбрать при помощи библиотеки jQuery интересующие чекбоксы и радио-кнопки и вызвать главный метод виджета:
|
1 2 3 4 5 6 7 8 9 |
<script> jQuery("document").ready(function($) { $("input[type=checkbox] ,input[type=radio]").checkbox({}); }); </script> |
При этом на экране мы увидим следующее:
Как Вы видите, буквально несколько строк кода, а чекбоксы и радио-кнопки, значительно красивее отображаются. При этом если передать настройке toogle, значение TRUE, чекбоксы будут отображаться в виде переключателей:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> jQuery("document").ready(function($) { $("input[type=checkbox]").checkbox({ toggle:true, }); }); </script> |
Текст заголовков переключателей можно задать, обратившись к настройке labels:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script> jQuery("document").ready(function($) { $("input[type=checkbox]").checkbox({ toggle:true, labels: { on:'Включено', off:'Выключено' } }); }); </script> |
Но при этом необходимо изменить ширину блока переключателей, задав правило для определенного класса:
|
1 2 3 4 |
.fs-checkbox-toggle .fs-checkbox-marker { width:200px !important; } |
При этом на экране мы увидим следующее:
Для настройки отображения элементов виджета можно использовать один из классов указанных в документации, в разделе CSS:
Или, используя настройку customClass:’myclass’, указать собственный класс, который будет присвоен виджету checkbox().
Виджет dropdown()
Для данного виджета мы будем использовать следующую тестовую страницу:
Аналогично перейдите на страницу Components и найдите документацию по виджету dropdown():
Теперь приведу HTML разметку тестовой страницы (обратите внимание, я уже подключил необходимые файлы для работы виджета, исходя из документации):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!doctype html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="css/style.css"/> <link rel="stylesheet" href="css/dropdown.css"/> <script src="js/jquery-1.11.2.min.js"></script> <script src="js/core.js"></script> <script src="js/touch.js"></script> <script src="js/dropdown.js"></script> <title>Выпадающие списки</title> </head> <body> <div class="wrap"> <h1>Выпадающий список!!!</h1> <select> <option value="1">Меню 1</option> <option value="2">Меню 2</option> <option value="3">Меню 3</option> </select> </div> </body> </html> |
Как Вы видите необходимая разметка – это стандартный тег select. Для работы данного виджета необходимо выбрать при помощи библиотеки jQuery контейнер select и вызвать главный метод виджета:
|
1 2 3 4 5 6 7 8 9 |
<script> jQuery("document").ready(function($) { $('select').dropdown({}); }); </script> |
При этом, для правильного отображения виджета, необходимо указать следующее правило CSS:
|
1 2 3 |
.fs-dropdown-bottom .fs-dropdown-options { bottom:auto !important; } |
При этом на экране мы увидим следующее:
Как Вы видите, использовать данный виджет достаточно просто. Теперь давайте добавим несколько правил CSS, для более красивого оформления (с доступными классами можно ознакомиться в разделе CSS документации):
|
1 2 3 4 5 6 7 8 9 10 11 |
.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: 0 2px 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, можно отобразить произвольную строку в главном блоке виджета, до выбора одного из его элементов:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> jQuery("document").ready(function($) { $('select').dropdown({ label:"Выберите элемент", }); }); </script> |
Данный виджет поддерживает одно событие – change, которое срабатывает после выбора нового элемента (то есть изменение состояния виджета):
|
1 2 3 4 5 |
$('select').on('change',function() { alert('Выбран новый элемент'); }) |
На этом данный урок завершен. Надеюсь, Вас заинтересовала данная библиотека, и Вы будете использовать ее функционал в своих собственных веб-приложениях.
Всего Вам доброго и удачного кодирования!!!
Комментарии (1)