Nice Select

Небольшой скрипт превращающий селекты с определенным именем класса в набор дивов и спанов.

Примеры использования

История изменений

1. • основа скрипта;
2. • fixed: в IE при сложной верстке div с выпадающим списоком позиционировался неверно;
3. • fixed: при повторном клике на селекте выпадающий список не закрывается;
   • fixed: если селект находится у нижней границы окна, то при клике на нем выпадающий список уходил род скролл;
   • fixed: после изменения размеров окна div с выпадающим списоком позиционировался неверно;
4. • add: выделение элемента выпадающего списка при наведении на него курсором;
5. • add: каждый элемент выпадающего списка имеет свой класс.
   • fixed: пофиксено задание расположения выпадающего списка в FF.
   • fixed: правильное определение позиции выпадающего списка, если селект находится в блоке с css-стилем position:absolute;

В планах

• Работа с несколькими классами; (Вроде как работает)
• Выполнение специального события после выбора элемента списка.

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

	<script type="text/javascript" language="JavaScript" src="niceselect.js"></script>
	<script type="text/javascript" language="JavaScript">
		var NS = new nice_select('cool');  //Трансформмировать все селекты у которых класс "cool"
	</script>
	<form>
		<select name="selectform" class="cool">
			<option value="1">A</option>
			<option value="2">B</option>
		</select>
	</form>

После трансформации, вместо селекта будет примерно такая HTML-конструкция:

	<form>
		<span style="cursor: pointer;" class="cool_mspan">A</span>
		<div style="display: none; position: absolute; top: 402px; left: 8px;" class="cool_rdiv">
			<ul>
				<li style="cursor: pointer;" class="cool_1">A</li>
				<li style="cursor: pointer;" class="cool_2">B</li>
			</ul>
		</div>
		<input value="1" name="selectform" type="hidden" />
	</form>

Классы и стили

• имя_класса_селекта_mspan (например cool_mspan) - класс формы;
• имя_класса_селекта_rdiv (например cool_rdiv) - класс div'a со значениями селекта;
• имя_класса_селекта_hover (например cool_hover) - класс для выделенного элемента выпадающего списка.

Где взять?

Скачать скрипт: niceselect.js (10k).