[Плагин] Красивый <select> от JS
 

Скачать плагин "select_JS"

Создавал свой текстовый редактор и решил создать к нему красивый тэг <select> на основе JaveScript. Плагин работает с поддержкой jQuery (моя текущая версия 1.9.1). Я подробно расскажу как им пользоваться.

1. Вместо привычного тега <select> мы создадим следующие:

Сюда мы записываем значение нашего select (он скрыт). Обратите внимание! Значение атрибута id имеет значение 'name_value', где name - это имя ID-а нашего select-а, а '_value' - это обязательная приставка для различия и родственности!
А это и есть наш select с именем ID-а 'name'.
Классу 'select', который мы так же указали выше, назначим основной стиль тега select.

 
/* оформляем всех select (это уже есть в архиве) */
.select { 
	cursor: default;
	height: 16px;
	font-size: 11px;
	font-family: Tahoma;
	background-color: #fff;
	padding: 0px 5px 0px 5px;
	border: 1px solid #fff;
	background-image: url([url]http://127.0.0.1/DEVOLOPERS/editor/arrowSelect.png);[/url]
	background-repeat: no-repeat;
	background-position: 100% 0%;
}
 
.select:hover { border: 1px solid #316ac5; background-position: 100% 50%; }
.select:active { background-position: 100% 100%; }
 
Code: CSS

Но если Вы хотите назначить определенный стиль конкретному селекту,
то просто создайте id в стилях с именем id-а вашего select-а, он заменит стиль.
Пример:

 
#name {
	cursor: pointer;
	background-color: #00ff00;
	...
}
 
Code: CSS

2. Далее мы должны создать наш select для JS и внесьти в него значение с именами

 
/* создали массив значение=>имя */
var nameOptions = [];
nameOptions['val_1'] = 'Вариант 1';
nameOptions['val_2'] = 'Вариант 2';
nameOptions['val_3'] = 'Вариант 3';
nameOptions['val_4'] = 'Вариант 4';
nameOptions['val_5'] = 'Вариант 5';
nameOptions['val_6'] = 'Вариант 6';
nameOptions['val_7'] = 'Вариант 7';
nameOptions['val_8'] = 'Вариант 8';
nameOptions['val_9'] = 'Вариант 9';
nameOptions['val_10'] = 'Вариант 10';
 
/* создаем select
1 арг. - значение имя тега по умолчанию для пользователей
2 арг. - имя идентификатора (ID) нашего select'а
3 арг. - имя массива со нашими значениями
4 арг. - ширина тега
5 арг. - длина выкатного поля (поле с вариантами, которое выкатывается при клике)
6 арг. - код для исполнения (альтернатива событию onChange, т. к. его нельзя использовать здесь)
7 арг. - если true - то выбранный вариант будет выделяться (т. е. ему будет назначен стиль, и пользователь будет видеть выбранный вариант).
         Если false - то будет происходить просто изменение значения, но какой вариант вы выбрали, он не будет отображать.
*/
tagSelect('Выберите вариант', 'name', nameOptions, 40, 150, "my_function('value')", true);
 
Code: Javascript

3. Рассмотрим оформление "вариантов" и "выбранного варианта" (оно так же уже присутствует в архиве)

 
/* select_options_field, select_var - это зарезервированные имена! */
 
/* оформляем поле с вариантами */
#select_options_field { 
	position: absolute;
	border: 1px solid #0000ff;
	margin: 3px 0px 0px -6px;
	background-color: #fff;
	padding: 2px;
	/* height: 150px; */
	/* width: 100px; */
	overflow-y: scroll;
	cursor: default;
	display: none;
}
 
/* оформляем "вариант" */
#select_var { padding: 1px 5px 1px 5px; font-size: 14px; }
#select_var:hover { border: 1px solid #316ac5; background-color: #c1d2ee; color: #316ac5; }
#select_var:active { background-color: #98b5e2; }
 
/* оформляем "выбранный вариант" */
#select_var_pick { padding: 1px 5px 1px 5px; font-size: 14px;background-color: #BBDAEE; } 
 
/* 
А теперь внимание! Если Вы хотите оформить конкретные "варианты/выбранный вариант" select-а, 
то Вы создаете новый класс с именем основным именем + '_for_{ID}', где ID = идентификатор Вашего селекта
Пример:
.select_options_field_for_{ID} { !important }
.select_var_for_{ID} { !important }
.select_var_for_{ID}:hover { !important }
.select_var_for_{ID}:active { !important }
Так же не забывайте указывать "!important" !!! Иначе изменение стиля не произойдет!
*/
 
Code: CSS

Ну вроде бы и все! Скрипт проверен в IE. Если есть какие-то вопросы задавайте здесь.

Скриншот (выкат плавный):

http://image.zone-game.info/images/2013/03/02/2ULgo.png