Slyweb
На разработку сайта! Скидки 50%!

jQuery Chosen Plugin

jQuery Nivo Slider

Многим разработчикам не нравятся стандартные элементы форм браузеров, их часто приходится заменять на нестандартные. Наибольшую сложность из всех html элементов представляет элемент select. Его замену можно реализовать с помощью кроссбраузерного плагина jQuery Chosen Plugin. Этот плагин наиболее удобен при замене элемента select по сравнению с другими в связи с тем, что поддерживают замену динамически созданных элементов, события. Более того, для тех кто разбирается в jQurey есть возможно использовать множество доступных обработчиков событий, если Вы откроете js файл плагина. В целом плагин поддерживает следующие возможности:

  • настройка стиля select;
  • поиск по тексту опций;
  • обработка событий;
  • стилизация динамически созданных элементов форм;
  • генерация уникальных id;
  • неограниченное количество стилизованных элементов select;
  • и многое другое;

Подключаем нужные библиотеки:

  • Код
  • Чистый код
  1.<link rel="stylesheet" href="chosen.css" />
  2.
  3.<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  4.<script type="text/javascript" src="chosen.js"></script>

        

Чтобы плагин подключился нужно станадартному списку select установить класс "chosen".

  • Код
  • Чистый код
  1.<!-- single dropdown -->
  2.<select class="chosen" style="width:200px;">
  3. <option>Cent OC</option>
  4. <option>Ubuntu</option>
  5. <option selected="selected">Fedore core...</option>
  6. <option>Free BSD...</option>
  7. <option>Debian</option>
  8.</select>
  9.
10.<!-- multiple dropdown -->
11.<select class="chosen" multiple="true" style="width:400px;">
12. <option>Cent OC</option>
13. <option>Ubuntu</option>
14. <option selected="selected">Fedore core...</option>
15. <option>Free BSD...</option>
16. <option>Debian</option>
17.</select>

        

Результат работы плагина:


Результат работы плагина с атрибутом multiple:

Красиво и просто, но это ещё не всё. Плагин поддерживает событие change:

  • Код
  • Чистый код
  1.<script type="text/javascript">
  2.jQuery(document).ready(function(){
  3. jQuery(".chosen").chosen().change(function(e){
  4.
  5. console.log(e);
  6.
  7. });
  8.
  9.});
10.</script>

        

Живой пример использования события change:

  • Код
  • Чистый код
  1. jQuery(".chosenexample").chosen().change(function(e){
  2.
  3. $('.infoch').fadeOut().empty().text($(this).val()).fadeIn();
  4.
  5. });

        


Вы выбрали:

Получить html через ajax с использованием плагина jQuery Chosen

Мо выбор остановился на этом плагине, ещё из-за его поддержки преобразования элементов полученных динамически, например через ajax:

  • Код
  • Чистый код
  1. $('#button').click(function(){
  2. $('#append').load('chosen.html',function(){
  3.
  4. jQuery(".chosennew").chosen().change(function(e){
  5.
  6. console.log(e);
  7.
  8. });
  9.
10.
11. });
12.
13.
14. });

        

Элементы полученые через ajax так же стилизуются и работают через плагин jQuery Chosen.

Для получения значений элемента select можно использовать следующий код:

  • Код
  • Чистый код
  1.jQuery(".chosennew").chosen().change(function(e){
  2.
  3. console.log($(this).val());
  4.
  5.});

        

Теперь Вы с успехом можете использовать jQuery Chosen на своих сайтах!

Загрузить архивом jQuery Chosen Plugin


Александр Ермаков