Kрасивые элементы select для сайта

jQuery 10.04.2013

Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..

ДЕМО

ИСХОДНИКИ

В уроке мы будем использовать HTML5, по это создаем в первую очередь HTML разметку, которая имеет следующий вид:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Создаем для сайта элемент select | Демонстрация с сайта s-sd.ru</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />

</head>
<body>

<div id="page">
<br><br><br><br><br>
	<h1>Сделайте Ваш выбор</h1>

	<form method="post" action="">
		<select name="fancySelect" class="makeMeFancy">
	        <option value="0" selected="selected" data-skip="1">Выберите продукт</option>
        	<option value="1" data-icon="img/products/js.png" data-html-text="Главная страница сайта&lt;i&gt;перейти на страницу сайта&lt;/i&gt;">Информационный блон по веб-дизайну</option>
        	<option value="2" data-icon="img/products/php.png" data-html-text="Скачать необходимый софт&lt;i&gt;загрузить&lt;/i&gt;">CMS+шаблоны, плагины</option>
            <option value="3" data-icon="img/products/wp.png" data-html-text="Дополнительная информация по созданию&lt;i&gt;смотреть&lt;/i&gt;">Интересные уроки по созданию сайтов</option>
            <option value="4" data-icon="img/products/joomla.png" data-html-text="Новости сайта теперь всегда под рукой&lt;i&gt;подписывайтесь&lt;/i&gt;">RSS новости нашего блога всегда рядом</option>
        </select>
    </form>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="js/script.js"></script>

</body>
</html>

Далее рассмотрим некоторые атрибуты, например атрибут data используются для объединения информации в элементах option. В них размещается иконка продукта и текстовое описание с форматированием. Оба этих пункта будут выводиться в нашей версии элемента select.

Теперь подключаем эффекты, jQuery проверяет элемент select, и, используя атрибуты данных, строит разметку, которая добавляется сразу за элементом select:

<div style="width: 356px; <code>class</code><code>=</code><code>"tzSelect"</code>">
	<div <code>class</code><code>=</code><code>"selectBox expanded"</code>>Выберите продукт</div>
	<ul>
		<li><img src="img/products/js.png"><span>JavaScript + jQuery для начинающих в видеоформате<i>посмотреть видеопрезентацию</i></span></li>
		<li><img src="img/products/php.png"><span>PHP + MySQL для начинающих<i>купить</i></span></li>
		<li><img src="img/products/wp.png"><span>WordPress - профессиональный блог за один день<i>скачать</i></span></li>
		<li><img src="img/products/joomla.png"><span>Joomla - профессиональный сайт за один день<i>купить</i></span></li>
	</ul>
</div>

Наше меню будет строить неупорядоченный список с элементами li, которые представляют каждый пункт option из элемента select.

Теперь рассмотрим наш JavaScript, который будет осуществлять плавную анимацию нашего элемента:

$(document).ready(function(){

// Элемент select, который будет замещаться:
	var select = $('select.makeMeFancy');
        var selectBoxContainer = $('<div>',{
		width		: select.outerWidth(),
		className	: 'tzSelect',
		html		: '<div></div>'
	});

	var dropDown = $('<ul>',{className:'dropDown'});
	var selectBox = selectBoxContainer.find('.selectBox');

	// Цикл по оригинальному элементу select

	select.find('option').each(function(i){
	var option = $(this);

		if(i==select.attr('selectedIndex')){
			selectBox.html(option.text());}

		// Так как используется jQuery 1.4.3, то мы можем получить доступ
		// к атрибутам данных HTML5 с помощью метода data().

		if(option.data('skip')){return true;
		}

		// Создаем выпадающий пункт в соответствии
		// с иконкой данных и атрибутами HTML5 данных:

		var li = $('<li>',{
			html:	'<img src="'+option.data('icon')+'" /><span>'+
					option.data('html-text')+'</span>'
		});
		li.click(function(){
			selectBox.html(option.text());
			dropDown.trigger('hide');

// Когда происходит событие click, мы также отражаем
// изменения в оригинальном элементе select:
			select.val(option.val());
			return false;
		});
		dropDown.append(li);
	});
	selectBoxContainer.append(dropDown.hide());
	select.hide().after(selectBoxContainer);

	// Привязываем пользовательские события show и hide к элементу dropDown:

	dropDown.bind('show',function(){
		if(dropDown.is(':animated')){
			return false;
		}

		selectBox.addClass('expanded');
		dropDown.slideDown();
		}).bind('hide',function(){
		if(dropDown.is(':animated')){
		return false;
		}

		selectBox.removeClass('expanded');
		dropDown.slideUp();

	}).bind('toggle',function(){
		if(selectBox.hasClass('expanded')){
			dropDown.trigger('hide');
		}
		else dropDown.trigger('show');
	});

	selectBox.click(function(){
		dropDown.trigger('toggle');
		return false;
	});

// Если нажать кнопку мыши где-нибудь на странице при открытом элементе   dropDown,
// он будет спрятан:
	$(document).click(function(){
		dropDown.trigger('hide');
	});
});

Теперь маленький нюанс, при создании нашего элемента, оригинальный элемент select сохраняется, он будет скрыт с помощью метода hide(). Это не мало важно, потому что все изменения отражаются и в нем.

Затем мы рассматриваем наши стили CSS, будем использовать CSS3, задаем стили для нашего элемента:

#page{
	width:490px;
	margin:50px auto;
}

#page h1{
	font-weight:normal;
	text-indent:-99999px;
	overflow:hidden;
	background:url('../img/your_product.png') no-repeat;
	width:490px;
	height:36px;
}

#page form{
	margin:20px auto;
	width:460px;
}

.tzSelect{
/* Контейнер для нового элемента select */
	height:34px;
	display:inline-block;
	min-width:460px;
	position:relative;

/* Предварительная загрузка фонового изображения для выпадающих пунктов */
	background:url("../img/dropdown_slice.png") no-repeat -99999px;
}

.tzSelect .selectBox{
	position:absolute;
	height:100%;
	width:100%;

/* Установка шрифта */

	font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	text-align:center;
	text-shadow:1px 1px 0 #EEEEEE;
	color:#666666;

/* Использование множественных фонов CSS3 */

background:url('../img/select_slice.png') repeat-x #ddd;
background-image:url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png'),url('../img/select_slice.png');background-position:0 -136px, right -204px, 50% -68px, 0 0;
background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
cursor:pointer;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
.tzSelect .selectBox:hover,
.tzSelect .selectBox.expanded{
	background-position:0 -170px, right -238px, 50% -102px, 0 -34px;
	color:#2c5667;
	text-shadow:1px 1px 0 #9bc2d0;
}

В данном примере используется множество прозрачных изображений, которые накладывается один на одного. Множественные фоновые изображения поддерживаются в Firefox, Safari, Chrome и Opera. Для Internet Explorer и старых версий браузеров.

.tzSelect .dropDown{
	position:absolute;
	top:40px;
	left:0;
	width:100%;
	border:1px solid #32333b;
	border-width:0 1px 1px;
	list-style:none;

	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;

	-moz-box-shadow:0 0 4px #111;
	-webkit-box-shadow:0 0 4px #111;
	box-shadow:0 0 4px #111;
}

.tzSelect li{
	height:85px;
	cursor:pointer;
	position:relative;

	/* Использование множественных фонов CSS3 */

	background:url('../img/dropdown_slice.png') repeat-x #222;
	background-image:url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png'),url('../img/dropdown_slice.png');
	background-position: 50% -171px, 0 -85px, 0 0;
	background-repeat: no-repeat, no-repeat, repeat-x;
}

.tzSelect li:hover{
	background-position: 50% -256px, 0 -85px, 0 0;
}

.tzSelect li span{
	left:88px;
	position:absolute;
	top:27px;
}

.tzSelect li i{
	color:#999999;
	display:block;
	font-size:12px;
}

.tzSelect li img{
	left:9px;
	position:absolute;
	top:13px;
}

Используя box-sizing, нам необходимо присвоить ему значение border-box, этим мы предотвратим увеличение общей ширины, так как наши фрагменты размещаются внутри элемента. На этом все, наши улучшенные элементы выбора созданы, удачных Вам экспериментов.