Библиотека FormStone. Оформляем радиокнопки, чекбоксы и списки

Библиотека FormStone. Оформляем радиокнопки, чекбоксы  и списки

От автора: очень часто при создании веб-страниц необходимо отображать на экране браузера различные элементы форм, а именно чекбоксы, радио-кнопки и выпадающие списки тега 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, обязательно необходимо также подключить к интересующей веб-странице.

Итак, давайте подключим необходимые файлы и за одно, рассмотрим исходный код тестовой страницы:

Сразу же обратите внимание на разметку html, которая необходима для работы виджета checkbox(). Данная разметка в точности совпадает с разметкой описанной в документации виджета (раздел Use, под раздел Basiс). Для использования виджета, необходимо выбрать при помощи библиотеки jQuery интересующие чекбоксы и радио-кнопки и вызвать главный метод виджета:

При этом на экране мы увидим следующее:

Как Вы видите, буквально несколько строк кода, а чекбоксы и радио-кнопки, значительно красивее отображаются. При этом если передать настройке toogle, значение TRUE, чекбоксы будут отображаться в виде переключателей:

Текст заголовков переключателей можно задать, обратившись к настройке labels:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Но при этом необходимо изменить ширину блока переключателей, задав правило для определенного класса:

При этом на экране мы увидим следующее:

Для настройки отображения элементов виджета можно использовать один из классов указанных в документации, в разделе CSS:

Или, используя настройку customClass:’myclass’, указать собственный класс, который будет присвоен виджету checkbox().

Виджет dropdown()

Для данного виджета мы будем использовать следующую тестовую страницу:

Аналогично перейдите на страницу Components и найдите документацию по виджету dropdown():

Теперь приведу HTML разметку тестовой страницы (обратите внимание, я уже подключил необходимые файлы для работы виджета, исходя из документации):

Как Вы видите необходимая разметка – это стандартный тег select. Для работы данного виджета необходимо выбрать при помощи библиотеки jQuery контейнер select и вызвать главный метод виджета:

При этом, для правильного отображения виджета, необходимо указать следующее правило CSS:

При этом на экране мы увидим следующее:

Как Вы видите, использовать данный виджет достаточно просто. Теперь давайте добавим несколько правил CSS, для более красивого оформления (с доступными классами можно ознакомиться в разделе CSS документации):

Используя настройку label, можно отобразить произвольную строку в главном блоке виджета, до выбора одного из его элементов:

Данный виджет поддерживает одно событие – change, которое срабатывает после выбора нового элемента (то есть изменение состояния виджета):

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

Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (1)

  1. Serg

    Не работает ссылка внутри checkbox

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree