Автор

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

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


 

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


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

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

В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox. А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!


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

Мы уже не раз рассказывали о важности интеграции социальных сетей на вашем сайте. Они позволят не только увеличить оборот посетителей но и привлечь постоянных читателей сайта, что соответственно увеличит ядро аудитории. В сегодняшнем уроке мы рассмотрим как создать достаточно простые но привлекательные социальные кнопки для сайта, для этого мы будем использовать только CSS, что значительно ускорит загрузку страницы.


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

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


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

Эффект прозрачности - это тема данной статьи. Если вам интересно узнать, как сделать элементы html-страницы прозрачными, используя CSS или Javascript, и как добиться кросс-браузерности (одинаковой работы в разных браузерах) с учетом браузеров Firefox, Internet Explorer, Opera, Safari, Konqueror, тогда милости просим.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

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

Close