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

[Dementor]

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

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

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

Сюда мы записываем значение нашего select (он скрыт). Обратите внимание! Значение атрибута id имеет значение 'name_value', где name - это имя ID-а нашего select-а, а '_value' - это обязательная приставка для различия и родственности!
<input type="hidden" id="name_value">

А это и есть наш select с именем ID-а 'name'.
<div id="name" class="select"></div>

Классу 'select', который мы так же указали выше, назначим основной стиль тега select.

[SRC="css"]
/* оформляем всех 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(http://127.0.0.1/DEVOLOPERS/editor/arrowSelect.png);
background-repeat: no-repeat;
background-position: 100% 0%;
}

.select:hover { border: 1px solid #316ac5; background-position: 100% 50%; }
.select:active { background-position: 100% 100%; }
[/SRC]


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


[SRC="css"]
#name {
cursor: pointer;
background-color: #00ff00;
...
}
[/SRC]


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


[SRC="javascript"]
/* создали массив значение=>имя */
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);
[/SRC]


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


[SRC="css"]
/* 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" !!! Иначе изменение стиля не произойдет!
*/
[/SRC]


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

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