пятница, 28 ноября 2008 г.

Плагин jQuery SexyCombo

Почти каждому из нас приходилось хоть раз в жизни заполнять веб-формы, в которых нужно было ввести свой город или страну. Обычно это реализуется с помощью selectboxов. Но ни один пользователь не скажет Вам, что это удобно. В самом деле, пользователю приходится искать в длинном списке значение, которое ему заранее известно. В большинстве случаев было бы быстрее ввести это значение в текстовое поле. Но это неприемлемо с точки зрения разработчиков, так как в данном случае мы имеем вполне ограниченное множество ответов, и было бы неразумно позволять пользователям вводить слово "Россия" наряду с "Российская Федерация". Я уже не говорю об опечатках. Налицо конфликт между интересами пользователей и разработчиков, который необходимо разрешить. Видимо, следует каким-то образом соединить возможности текстовых полей и selectboxов. Те пользователи, которые хотят выбирать значение, как при использовании selectboxа, будут делать это и дальше. Мы также не хотим ущемлять пользователей, предпочитающих печатать, но мы должны убедиться, что введенное значение входит в некоторое множество.

Не стану лукавить - элемент пользовательского интерфейса, о котором я сейчас "мечтал", существует уже давно, и придумал его не я. Называется он combo box. Впервые я столкнулся с ним, используя библиотеку ExtJS. Это очень богатая AJAX библиотека, со множеством замечательных визуальных компонентов. Но богатство в этом случае - это не всегда преимущество, поскольку все компоненты этой библиотеки связаны друг с другом (разработчики попытались сделать ее объектно-ориентированной, и активно использовали наследование). Если Вам нужны всего несколько компонентов этой библиотеки, Вам все равно придется использовать большую ее часть. А весит это богатство немало, поэтому я бы не советовал использовать ExtJS в приложениях, рассчитанных на массовое использование. Но в общем это замечательная библиотека, и ее разработчики, как мне кажется, достойны восхищения. Они сделали свое дело хорошо.

Другая JavaScript библиотека, которая вызывает у меня восхищение - это, конечно, jQuery. Если первая привлекает своим богатством, то вторую я люблю за ее простоту и элегантность. Как-нибудь я раскрою эту тему глубже, а сейчас мимоходом замечу, что эта библиотека имеет очень удобную систему плагинов, которая позволяет сторонним разработчикам расширять функциональность библиотеки. Этим я и решил заняться, и на выходе получился jQuery-плагин, который я назвал SexyCombo.

Сразу сделаю оговорку - плагины с аналогичной функциональностью существуют. Например, этот. Меня он не устроил потому, что он использует другие jQuery-плагины как основу, а, на мой взгляд, плагин должен представлять собой самостоятельную единицу. Кроме того, мне не очень понравился его внешний вид. Конечно, мы можем изменить стили, и все будет выглядеть так, как мы хотим, но это все же дополнительная работа. Внешний вид такого рода компонента, по-моему, должен быть как можно более нейтральным, и подходить для большинства сайтов без необходимости его изменить. Не все будут рады тому, что приходится изменять стиль компонента, тем более, что, как оказалось, стили - самая важная и трудная часть работы.

SexyCombo предоставляет приблизительно тот же объем функциональности, что и другие реализации comboboxов. Он позволяет пользователю выбирать значения из выпадающего списка или же печатать его в текстовое поле. Также реализована навигация по выпадающему списку с помощью клавиатуры (клавиши-стрелки), а также выбор значения из выпадающего меню с помощью клавиши Enter.

В качестве источника данных SexyCombo использует selectboxы. Это значит, что Вы можете легко начать использовать плагин без всяких изменений в верстке. Важная особенность: изменения значения comboboxа синхронизируются со значением соответствующего ему selectboxа, при этом вызываются обработчики события change для этого selectboxа. Таким образом, при наличии JavaScript-кода, который каким-то образом использует selectbox, Вы можете оставить его без изменений, и все будет нормально работать. К примеру, у Вас есть selectbox, в котором пользователь должен выбрать цвет. При этом справа от selectboxа Вы расположили <div>, который меняет свой цвет при изменении значения selectboxа, то есть реагирует на событие change. Теперь, когда Вы используете SexyCombo, Вы можете оставить этот код без изменений, и функциональность приложения не пострадает.

Использование

Для того, чтобы начать использовать SexyCombo, вы должны как минимум:

  1. Скачать последнюю версию дистрибутива и распаковать архив.
  2. Включить библиотеку jQuery в свою веб-страницу. Файл библиотеки поставляется вместе с дистрибутивом.
  3. Включить файл плагина (js/jquery.sexy-combo-min.js) в веб-страницу.
  4. Подключить стили плагина (css/sexy-combo.css).
  5. В пользовательском JavaScript-файле напишите что-то вроде $('select').sexyCombo(). Этот код превратит все selectboxы на Вашей странице в comboboxы. Конечно, Вы можете использовать другие jQuery-селекторы, например, $('#future-combo').sexyCombo.

Кроме этого, метод jQuery.sexyCombo() принимает единственный аргумент в виде литерала JavaScript-объекта, с помощью которого можно конфигурировать плагин. Например, можно написать $('select').sexyCombo({listMaxHeight: 250, triggerSelected: true}); Этот объект может иметь следующие свойства:

  • (integer) listMaxHeight - максимальная высота всплывающего списка. Если элементы списка не умещаются в эту высоту, будет показан scrollbar. По умолчанию 200 пикселей.
  • (integer) listItemHeight - высота элемента выпадающего списка. По умолчанию 20 пикселей.
  • (boolean) triggerSelected - если значение равно true, то начальное значение selectboxа будет начальным значением созданного comboboxа. По умолчанию false.
  • (string) blankImageSrc - URL картинки-пустышки, которая отображается на месте иконки comboboxа. Скорее всего, Вам не придется изменять это значение. По умолчанию "http://phone.witamean.net/combo-images/s.gif".
  • (string) unselectedLiColor - цвет неактивного элемента выпадающего списка. По умолчанию "rgb(255, 255, 255)".
  • (string) selectedLiColor - цвет активного элемента выпадающего списка. По умолчанию "rgb(223, 232, 246)".

Поддерживаемые браузеры

В настоящее время SexyCombo поддерживает только Firefox 2. В Opera и Internet Explorer 6 обнаружены серьезные ошибки рендеринга. Самая активная работа будет вестись в этом направлении, и я надеюсь, что в ближайшем будущем удастся обеспечить поддержку большего числа браузеров.

Поддержите проект

SexyCombo - открытый проект, и я буду рад любой форме сотрудничества. Помогите улучшить плагин, расскажите о нем друзьям, напишите о нем статью, помогите другим установить и настроить его. Любая Ваша помощь неоценима.

Если у Вас возникли какие-либо вопросы или предложения, пишите мне на Kadalashvili dot Vladimir dot gmail dot com.

Ресурсы

Комментариев нет: