Нестандартные select

Задача

Изменить дизайн select. Например на такой:

Требования

• легкость интеграции
• кроссбраузерность
• быстрая скорость работы
• максимальная приближенность к работе обычного select:
  • на сервер передается значение (value выбранного option)
  • по клику на option выпавший список скрывается
  • по клику вне select выпавший список скрывается
  • в выпадающем списке показ полностью длинных значений option
  • учет атрибута disabled
  • учет атрибута selected
  • если явно не указан selected, select принимает значение первого в списке option
  • учет события onchange
  • скроллинг выпадающего списка прокручивается колесом мыши
  • возможность получения фокуса (update)
  • участие в tab обходе (update)
  • смена значения select стрелками вверх/вниз (update) — после выбора нужного значения требуется нажатие enter
  • смена значения select по нажатию клавиш букв (update)
  • подсветка select при наведении и получении фокуса (update)
  • закрытие списка по Esc (update)
• при отключенном javascript остаются обычные select
• удобное динамическое обновление оптионов
• простота динамического добавления select
• дополнительные приятные возможности:
  • подсветка в выпадающем списке выбранного значения
  • подсветка в выпадающем списке значения при наведении
  • возможность ручного управления видом скроллинга выпадающего списка
  • возможность оформления option с помощью CSS
  • возможность вставки тегов в option
  • плавное обрезание невмещающегося текста

Демо пример возможностей cuSel (или можно ). Проверено в:

• IE 6-8
• Firefox 4
• Opera 9.5-11
• Safari 5
• Chrome 4

Что качать

• версии не ниже 1.6
• (11.1Kb)
• спрайт для образца

Заметка

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

При таком эффекте для IE6 подключаем DD_belatedPNG.

Если охота посмотреть код

• библиотеки (оригинал был изменен) и для реализации прокрутки в выпадающем списке

Быстрый старт

Подключаем необходимые стили и библиотеки:

<link rel="stylesheet" type="text/css" href="path-to/cusel.css" />
<script type="text/javascript" src="path-to/jquery-1.6.1.js"></script>
<script type="text/javascript" src="path-to/cusel-min.js"></script>
<!-- если требуется поддержка ie6, учим его понимать альфапрозрачность для плавного обрезания текста -->
<!--[if IE 6]>
<script type="text/javascript" src="path-to/DD_belatedPNG.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix(".cuselFrameRight"); <!-- именно этот элемент имеет полупрозрачность -->
jQuery(document).ready(function(){ <!--делаем эмуляцию min-width: 100% для выпадающего списка для IE6 (спасибо Константину Ершову) -->
jQuery(".cusel").each(
function(){
	var w = parseInt(jQuery(this).width()),
		scrollPanel = jQuery(this).find(".cusel-scroll-pane");
	if(w>=scrollPanel.width())
	{
		jQuery(this).find(".jScrollPaneContainer").width(w);
		scrollPanel.width(w);
	}
});
});
</script>
<![endif]-->

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

jQuery(document).ready(function(){
var params = {
		changedEl: ".lineForm select",
		visRows: 5,
		scrollArrows: true
	}
	cuSel(params);
});

А теперь подробней.

Как это работает

При загрузке страницы, если у пользователя включен javascript:

1. находятся все указанные селекты на странице
2. заменяется каждый select

   <select id="idSelect" name="nameSelect">
   <option value="значение option 1">текст option 1</option>
   ...
   <option value="значение option N">текст option N</option>
   </select>
   

   на конструкцию вида:

   <div class="cusel" id="cuselFrame-idSelect">
   	<div class="cuselFrameRight"></div>
   	<div class="cuselText">текст option 1</div>
   	<div class="cusel-scroll-wrap">
   		<div class="cusel-scroll-pane" id="cusel-scroll-idSelect">
   		<span class="cuselActive" value="значение option 1">текст option 1</span>
   		...
   		<span value="значение option N">текст option N</span>
   		</div>
   	</div>
   	<input id="idSelect" name="nameSelect" value="значение option 1" type="hidden"/>
   </div>
   

3. обычные select удаляются

Заметка

Обязательным условием является указание id селекту, т.к. на основании этого уникального идентификатора гарантируется работа скроллингов в выпадающих меню.

Инициализация cuSel

Функции

Параметры

Примеры

Меняем все селекты на странице, без ограничения по высоте для выпадающих списков:

var params = {
		changedEl: "select"
	}
cuSel(params);

Меняем один конкретный селект по id, число видимых элементов выпадающего списка 7:

var params = {
		changedEl: "#city",
		visRows: 7
	}
	cuSel(params);

Цепляем onchange списку. Сusel-селект имеет структуру, построенную на div и span. Это нужно учитывать при динамическом изменении содержимого списков:

<select id="city" name="city" onChange="alert('произошел onchange')">
<option value="1">Киев</option>
<option value="2">Львов</option>
<option value="3">Дон</option>
<option value="4">Ялта</option>
</select>

var params = {
		changedEl: "#city"
	}
	cuSel(params);

Если при загрузке страницы select был скрыт, то при его показе ему нужно обязательно указывать width и провести обновление:

jQuery("#showSel").click(
function()
{
	jQuery("#hidden-select")
		.css("display","block")
		.css("width","100px"); /* показанному селект указываем width */
params = {
	refreshEl: "#hidden-select",
	visRows: 4
	}
	cuSelRefresh(params);
});

Этого указания ширины можно избежать, если изначально select был присвоен класс, с заданной шириной через !important. Тут же, покажу как обновить сразу два селекта, которые были скрыты:

<div id="hidden-block" style="display: none">
    <select id="city2" name="city2" class="wid100">
    <option value="1">Киев</option>
    <option value="2">Львов</option>
    <option value="3">Донецк</option>
    <option value="4">Ялта</option>
    </select>
    <select id="city3" name="city3" class="wid100">
    <option value="1">Киев</option>
    <option value="2">Львов</option>
    <option value="3">Донецк</option>
    <option value="4">Ялта</option>
</select>

.wid100 {
width: 100px !important; /* !important обязателен */ 
}

jQuery("#hidden-block").css("display","block");
	params = {
	refreshEl: "#city2, #city3", /* перечисляем через запятую id селектов, которые нужно обновить */
	visRows: 4
	}
	cuSelRefresh(params);

Динамическое добавление select:

jQuery("#addSelect").click(
function()
{
	var addedSelect =	'<select id="add-select" name="add-select">'+
						'<option value="1">доллар США</option>'+
						'<option value="2">доллар канадский</option>'+
						'<option value="3">доллар новозеландский</option>'+
						'</select>';
	jQuery(this).replaceWith(addedSelect);
	var params = {
		changedEl: "#add-select",
		visRows: 4
	}
	cuSel(params);
});

Динамическое добавление опционов:

jQuery("#addAnimals").click(
function()
{
    /* при добавлении следует учитывать, что option были заменены на span */
	var newAnimals = '<span val="4">Слон</span><span val="5">Жираф африканский</span>';
    /* id контенера, где содержаться "option" получаем соединяя префикс cusel-scroll- и id select */
	jQuery("#cusel-scroll-animals").append(newAnimals);  
	var params = {
		refreshEl: "#animals",
		visRows: 4
	}
	cuSelRefresh(params);
});

Дополнительные теги внутри option реализуются через дополнительный атрибут addTags. Если он присутствует, его содержимое добавится в соответствующий "новый" option:

<select id="animals" name="animals">
		<option value="1" addTags="<div class='kv'></div>">Медведь</option>
		<option value="2" addTags="<input type='checkbox' />">Волк</option>
		<option value="3">Заяц</option>
		<option value="4">Ежик</option>
</select>

Часто задаваемые вопросы

Как на одной странице сделать два селекта разного вида

Нужно привязывать оформление селекта относительно своего родителя:

.parent1 .cusel {
/* описываем оформление селекта первого вида */
}
.parent2 .cusel {
/* описываем оформление селекта второго вида */
}

Можно подключить разные фоны, использовать разные цветовые схемы, шрифты и т.п.

Или же можно использовать дополнительный класс:

<select id="select1" name="select1">
...
<select id="select2" name="select2" class="cusel2">
...

.cusel {
/* описываем оформление селекта первого вида */
}
.cusel2 {
/* описываем оформление селекта второго вида */
}

Как убрать выделение выбранного пункта в выпадающем списке

Из CSS удаляем класс .cuselActive.

Как задать ширину стилизированного select

В CSS указать явно ширину классу .cusel или добавить класс, с явно заданной шириной заменяемому select.

В прозрачной части cuSel виден фон, который находится под ним

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

Как убрать подсветку select при наведении и получении фокуса (update)

Достаточно убрать из стилей:

/*
	styles for focus and hover
*/
.cusel:hover,
.cusel:hover .cuselFrameRight,
.cusel:focus,
.cusel:focus .cuselFrameRight,
.cuselFocus,
.cuselFocus .cuselFrameRight {
	background-image: url(path-to/selects-focus.png);
}

Как динамически управлять disabled

Пример приведен в перечне доработок версии 2.3.

Улучшения по сравнению с предыдущей версией:

• работает в разы быстрее. Даже в IE6 при довольно большом количестве селектов на странице, замена происходит достаточно быстро.
• скрипт стал в 2 раза легче
• cuSel по поведению более похож на обычный селект
• более прост в обращении, особенно для программистов, которым теперь не нужно ломать голову как привязать onchange

Предыдущая версия

• selects.png (370b) — составная картинка для всех частей селекта (удобно использовать в качестве примера)
• (3.5 Kb) — таблица стилей для нестандартных select
• (6.5 Kb) — таблица стилей с комментариями
• (55.9 Kb) — библиотека jQuery версии 1.3.2
• (8.13 Kb) — библиотека для реализации нестандартно оформленного скроллинга
• (12 Kb) — библиотека замены select на нестандартные
• (3 Kb) — сжатый скрипт

Баги/недостатки cuSel

• У option должен обязательно быть атрибут value, хотя бы пустой — это исправлять пока не вижу смысла, потому что нет понту от селекта, который не передает значения. А для исключений можно дописать value="". устранено
• список выпадает всегда вниз
• в IE6 есть нет реакции на :hover
• если по пунктам выпавшего списка пробовать перемещаться и мышью и клавиатурой, могут проскакивать некоторые глюки
• нет поддержки <optgroup>, более того, скорей всего селект, содержащий optgroup не будет функционировать.

Пожелания / предложения

• by f0rmateg: раскрытие списка по нажатию на пробел, по аналогии как реализовано в Opera для обычных select
• by Олег Панов: предусмотреть реализацию для списков вида <select multiple size="1">
• by Николай: предусмотреть возможность динамически дизэйблить и энэйблить селекты. реализовано

Апдейты: что было исправлено/добавлено

• Версия 2.5
• Версия 2.4.1
• Версия 2.4
• версия 2.3.5
• версия 2.3.4 — фиксы багов
• версия 2.3.2
• версия 2.3.1
• версия 2.3
• версия 2.2