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

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

От автора: очень часто при создании веб-страниц необходимо отображать на экране браузера различные элементы форм, а именно чекбоксы, радио-кнопки и выпадающие списки тега select. При этом их стандартный вид уже никак не вписывается в дизайн современных сайтов. Поэтому в данном уроке я хотел бы поговорить об очень интересной и функциональной библиотеке под названием Formstone и ее двух виджетах, позволяющих красиво стилизовать элементы, упомянутые выше.

автор

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

скачать исходникискачать урок

Установка библиотеки

Библиотека Formstone – это новый и активно развивающийся набор различных плагинов для всем известной библиотеки jQuery, которая обладает огромнейшим функционалом и гибкостью, достаточно хорошо работает с мобильными устройствами, что не мало важно в данное время и, что самое главное — очень хорошо описана в документации. Итак, официальный сайт библиотеки — http://formstone.it/:

В разделе components – содержится документация по данной библиотеке. Перейдя по ссылке Github, нас перенаправят на сервис github, где можно скачать актуальную версию данной библиотеки, что собственно мы и сделаем.

В результате скачивания, мы получим архив с исходниками данной библиотеки. После распаковки в полученной папке, нас интересует каталог dist, где расположены две папки css и js. В каталоге css сохранены стили для каждого из элементов в отдельности и данные стили необходимо скопировать в папку стилей нашего сайта. Соответственно в каталоге js, сохранены плагины данной библиотеки, которые необходимо скопировать в папку, где хранятся скрипты языка JavaScript. Так как содержимое библиотеки Formstone, это плагины для библиотеки jQuery, значит данная библиотека, нам также нужна, поэтому переходим на официальный сайт jQuery и скачиваем данную библиотеку в папку хранения скриптов JavaScript.

Для данного урока я буду использовать две тестовые веб-старницы: первая – для тестирования виджета checkbox(), который работает с чекбоксами и радио-кнопками. И вторая – для тестирования виджета dropdown(), который позволяет стилизировать выпадающий список тега select. В каждую из данных страниц необходимо подключить библиотеку jquery:

<script src="js/jquery-1.11.2.min.js"></script>

Далее подключим основное ядро библиотеки и плагин touch, благодаря которому осуществляется поддержка мобильных устройств:

<script src="js/core.js"></script>
<script src="js/touch.js"></script>

Виджет checkbox()

Итак, переходим в раздел документации (ссылка components на главной странице), официального сайта библиотеки и находим виджет checkbox():

Повторюсь, что данный виджет, используется для красивого оформления чекбоксов и радио-кнопок. Далее рассмотрим веб-страницу, которую мы будем использовать для тестирования данной библиотеки:

Как Вы видите, я уже добавил несколько элементов форм для тестирования. Теперь если внимательно посмотреть документацию, то можно увидеть раздел Use, в котором показаны файлы которые необходимо подключить для работы данного виджета.

Так же обратите внимание на подраздел Dependencies, в котором описано от каких дополнительных элементов зависит функционал виджета. При этом файлы из подраздела Dependencies, обязательно необходимо также подключить к интересующей веб-странице.

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

<!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 интересующие чекбоксы и радио-кнопки и вызвать главный метод виджета:

<script>
	
	jQuery("document").ready(function($) {
		
		$("input[type=checkbox] ,input[type=radio]").checkbox({});
		
	});
	
</script>

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

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

<script>
	
	jQuery("document").ready(function($) {
		
		$("input[type=checkbox]").checkbox({
			toggle:true,
		});
		
	});
	
</script>

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

<script>
	
	jQuery("document").ready(function($) {
		
		$("input[type=checkbox]").checkbox({
			
			
			toggle:true,
			labels: {
				on:'Включено',
				off:'Выключено'
			}
			
		});
		
	});
	
</script>

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

	.fs-checkbox-toggle .fs-checkbox-marker {
		
		width:200px !important;
	}

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

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

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

Виджет dropdown()

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

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

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

<!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 и вызвать главный метод виджета:

<script>
	
	jQuery("document").ready(function($) {
		
		$('select').dropdown({});
		
	});
	
</script>

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

<script>
	
	jQuery("document").ready(function($) {
		
		$('select').dropdown({
			label:"Выберите элемент",
		});
		
	});
	
</script>

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

$('select').on('change',function() {
			
			alert('Выбран новый элемент');
			
		})

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

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

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

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

Получить

Метки: ,

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

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

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

  1. Serg

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree