Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: SELECT JQUERY
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » SELECT JQUERY

Страниц (1): [1]
 

1. armancho7777777 - 15 Февраля, 2012 - 07:04:08 - перейти к сообщению
Всем привет!
Написал небольшой плагин для списков (select), чтобы они имели кроссбраузерный внешний вид
и внешний вид которых можно было настроить без проблем.
Т.е. все стили, которые надо задать списку, задаются непосредственно самому списку.

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <select name="select_test" id="select_test" style="margin:20px; padding:3px 5px; font-size:18px; color:#666; background:#BDF; border:1px solid #00F;">
  3.   <option value=""></option>
  4.   <option value="Раздел 1">Раздел 1</option>
  5.   <option value="Раздел 2">Раздел 2</option>
  6.   <option value="Раздел 3">Раздел 3</option>
  7.   <option value="Раздел 4">Раздел 4</option>
  8.   <option value="Раздел 5">Раздел 5</option>
  9. </select>
  10.  


Всё, что надо сделать, для того, что бы изменить вид селекта, это установить ему ID и
присвоить ему метод обёртки:

CODE (javascript):
скопировать код в буфер обмена
  1. $('#select_test').select_custom();


..или ко всем элементам select формы с ID, на пример 'f':

CODE (javascript):
скопировать код в буфер обмена
  1. $('#f select').select_custom();



Если надо настроить внешний вид опций списка и самой кнопки, то обёртка принимает соответствующие параметры:

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. /*
  3. Параметры для кнопки селекта и опций селекта
  4.                          
  5.       button : { bg : '', color : '' },
  6. button_hover : { bg : '', color : '' },
  7.       option : { bg : '', color : '' },
  8. option_hover : { bg : '', color : '' }
  9.          
  10. */
  11.          
  12. $('#select_test').select_custom();
  13.  


Может кому пригодится.
Да, кто-то может сказать, что я опять придумываю велосипед,
но это не так))
Этот плагин удобнее. Не надо поключать отдельные стили для обёртки,
или оборачивать селект в див, и прописывать ему стили, и т.д.
Весит он 3.34 Кб.

Пример:
http://jsfiddle[dot]net/uLtXr/1/


Да, и сами стрелки, это не картинки, а HTML сущности:
▼ - & #9660;
▲ - & #9650;
2. Zuldek - 15 Февраля, 2012 - 07:29:58 - перейти к сообщению
не поддерживается выбор элемента списка с клавиатуры
3. armancho7777777 - 15 Февраля, 2012 - 07:34:32 - перейти к сообщению
Zuldek пишет:
не поддерживается выбор элемента списка с клавиатуры

Спасибо)
Доработаю)
4. SAD - 15 Февраля, 2012 - 07:48:48 - перейти к сообщению
А как значение то получить?
5. armancho7777777 - 15 Февраля, 2012 - 07:57:03 - перейти к сообщению
SAD пишет:
А как значение то получить?

Как обычно Вы получаете значение селекта, так и получайте)
По его имени)
Вся работа с селектом такая же, как и без этого плагина.
6. armancho7777777 - 15 Февраля, 2012 - 10:42:19 - перейти к сообщению
Всё, доработал)
И добавил ещё 2 параметра.
"autoComplet"
Если равен true, то при выборе клавишами вверх-вниз значение будет само подставляться в поле.
По умолчанию false.

И option : { height : number }
Если установить это параметр (в пикселях) для длинных списков,
то появится вертикальная прокрутка.

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. $('#select_test').select_custom({
  3.                      autoComplet : true,
  4.                           option : { height : 100 }
  5.                  });
  6.  


Остальные параметры описаны выше.
Пример тут:
http://jsfiddle[dot]net/uLtXr/17/
А сам плагин справа.
Теперь он весит 5.84 Кб.

 

Powered by ExBB FM 1.0 RC1