← к списку статей

10.08.10 (последнее изменение 28 октября 2010)

Оформляем выпадающие списки

Как сделать селектбокс таким, каким его нарисовал дизайнер.

Дизайнерам бесполезно говорить или напоминать о том, что селектбоксы невозможно стилизовать посредством css — все равно они рисуют их с рюшечками и прибамбасами. Чтобы реализовать всю красоту, воплощенную в дизайне, приходится писать скрипты. Когда-то я написал один такой скрипт, и он очень облегчает выполнение данной задачи. Не буду объяснять принцип работы скрипта, лучше я потрачу время на другое — объясню как им пользоваться и покажу примеры реализации.

Первое что нам понадобится, это библиотека jQuery, не знакомы — гуглите.

Второе — сам скрипт. Точнее, это не один скрипт — это упакованная в один файл библиотека методов, расширяющих функционал jQuery — назовем ее jquery.utils. Сейчас речь пойдет только об одном из методов данной библиотеки.

Третье — нужна html-страница с селектбоксом, чтобы мы могли поэксперементировать с ней. Имейте в виду, что у страницы должен быть правильный доктайп, в противном случае эффект не гарантирован.

Подведем предварительный итог: у нас имеется страница с формой и селектбоксом; блок <head> данной страницы включает последовательно две библиотеки jquery и jquery.utils.

Теперь начинается самое интересное. Чтобы превратить наш селектбокс в привльно реагирующие слои и ссылки, нужно чтобы он выполнил метод evSboxDecorate(). Добавляем в самый низ блока <head> вызов этого метода и после обновляем страницу.

Свершилось чудо! Селектобкс исчез, вместо него только текст «выберите из списка». Это и есть наш новый селектбокс. Давайте сравним его поведение со стандартным. Кликаем по заголовку — появляется список. Кликаем по элементу из списка — меняется заголовок. Кликаем по заголовку, затем мимо списка — элементы сперва появляются, затем исчезают.

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

Похоже, наш новый селектбокс ведет себя так же, как и настоящий селектбокс. Теперь самое время дописать несколько стилей, чтобы он изменился внешне — стал таким, каким его задумал дизайнер. Для наглядности, я возьму стили с сайта www.esparma-gmbh.ru, а уважаемый читатель, вдохновленный примером, сможет написать аналогичные стили самостоятельно.

И еще один важный момент. Если вы сначала отдекорируете селектбокс, а затем каким-то скриптом поменяете его содержимое, то все что вам нужно для перерисовки селектбокса — это запустить декорирование повторно. В результате, все экстра-элементы и обработчики будут корректно удалены и сформированы заново.

Осталась самая малость — рассказать, каким образом можно управлять методом. Метод принимает хэш с четырьмя возможными ключами, значения которых true или false:

  • style — нужно или нет задавать первичные стили, такие как position, z-index, display, по-умолчанию false;
  • skipFirst — пропустить или нет первый элемент списка, по-умолчанию false;
  • submitForm — отправлять или нет форму при выборе элемента , по-умолчанию false;
  • delay — сделать или нет небольшую задержку (50 млс) перед формированием первичных стилей (такая задержка нужна в том случае, если браузер — обычно Chrome — неправильно вычисляет высоту span.sbox), по-умолчанию false.
  • scroll — ограничивать или нет список по высоте с добавлением прокрутки, по-умолчанию false.
  • destroy — убрать или нет декорирование, по-умолчанию false.

На этом наш урок закончен, успехов!

← к списку статей