Показать Меню
falbar Плагин radiosToSlider

Радио кнопки на jQuery в стиле слайдера

Плагин radiosToSlider

Радио кнопки – инструмент предоставления выбора нашему пользователю, одна из форм нашего диалога. Радио кнопки в их стандартном применении появились довольно давно, причем, будь то HTML-разметка или пользовательское приложение, выглядели они везде одинаково. И лишь в последнее время на них обратили свой взор дизайнеры, об одном красивом их представлении мы и поговорим сегодня.

Плагин radiosToSlider превращает стандартные радио кнопки в «некий» индикатор. Как следует из названия, разработчики преследовали цель внедрения своего детища в слайдеры для галерей и медиа контента. Но, к сожалению, стандартные кружочки там обосновались довольно прочно, что совсем не запрещает нам попробовать что-то новое на наших ресурсах.

Начнем, пожалуй, с подключения файлов:

<link href="radiosToSlider.min.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="radiosToSlider.min.js" type="text/javascript"></script>

Теперь добавим HTML разметку:

<div id="radios">
	<input id="option1" name="options" type="radio" />
	<label for="option1">1</label>

	<input id="option2" name="options" type="radio" />
	<label for="option2">2</label>

	<input id="option3" name="options" type="radio" checked />
	<label for="option3">3</label>

	<input id="option4" name="options" type="radio" />
	<label for="option4">4</label>

	<input id="option5" name="options" type="radio" />
	<label for="option5">5</label>
</div>

И останется только вызвать сам radiosToSlider плагин, после загрузки страницы:

$(function(){
	 $("#radios").radiosToSlider();
});

В итоге наблюдаем довольно таки интересно стилизованные радио кнопки. В заключении стоит добавить, что плагин обладает всего одним параметром, отвечающим за плавность переключения - animation. По умолчанию он включён.

$("#radios").radiosToSlider({
	animation: false
});
Источник
rubentd.com

Подписаться на обновления

Комментариев еще не оставлено