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

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: SELECT JQUERY

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
Поиск в теме | Версия для печати
armancho7777777 Супермодератор
Отправлено: 15 Февраля, 2012 - 07:04:08
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Всем привет!
Написал небольшой плагин для списков (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;
Скачать файл: jquery.select_custom.min.js
Скачан раз: 127

(Отредактировано автором: 15 Февраля, 2012 - 12:49:16)

 
 Top
Zuldek
Отправлено: 15 Февраля, 2012 - 07:29:58
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2122
Дата рег-ции: Июнь 2010  


Помог: 50 раз(а)
не поддерживается выбор элемента списка с клавиатуры
 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Февраля, 2012 - 07:34:32
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Zuldek пишет:
не поддерживается выбор элемента списка с клавиатуры

Спасибо)
Доработаю)
 
 Top
SAD
Отправлено: 15 Февраля, 2012 - 07:48:48
Post Id



Постоянный участник


Покинул форум
Сообщений всего: 2508
Дата рег-ции: Май 2009  
Откуда: Днепропетровск, Украина


Помог: 75 раз(а)
А как значение то получить?
 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Февраля, 2012 - 07:57:03
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
SAD пишет:
А как значение то получить?

Как обычно Вы получаете значение селекта, так и получайте)
По его имени)
Вся работа с селектом такая же, как и без этого плагина.

(Отредактировано автором: 15 Февраля, 2012 - 07:57:48)

 
 Top
armancho7777777 Супермодератор
Отправлено: 15 Февраля, 2012 - 10:42:19
Post Id



Активный участник


Покинул форум
Сообщений всего: 4526
Дата рег-ции: Февр. 2011  
Откуда: Москва


Помог: 221 раз(а)
Всё, доработал)
И добавил ещё 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 Кб.
Скачать файл: jquery.select_custom.min.js
Скачан раз: 155

(Отредактировано автором: 15 Февраля, 2012 - 15:03:38)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB