В данной статье мы рассмотрим создание плагина jQuery, суть которого в замещение элемента select красиво оформленным неупорядоченным списком (ul) .
Одним из важнейших способов эффективной организации jQuery кода служит превращение его частей в плагины. Такие превращения несут в себя ряд преимуществ: код становится проще модифицировать и сопровождать, руководство повторяющими задачами упрощается. Также увеличивается скорость разработки, так как организация плагина способствует повторному использованию кода.
Поэтому мы и продемонстрируем сегодня процесс конвертирования кода в плагин. Код мы возьмем из этого руководства jQuery& CSS3 замещаем элемент select и превратим его в готовый к использованию jQuery плагин.
Основная идеяНаписать jQuery плагин совсем не сложно. Для этого нужно расширить объект $.fn своей собственной функцией. Гораздо сложнее должным образом структурировать свой код, чтобы плагин можно было легко вставить и использовать (без зависимостей).
Вот, несколько проблем, которые нам надо решить при конвертировании кода руководства в jQuery плагин:
1. Пользователю нужно дать возможность решать, какая разметка будет генерироваться для dropdown (выпадающего списка). К примеру, код руководства сильно зависит от наличия data- атрибутов, которые содержат разметку HTML. Это слишком специфично, чтобы подключать в плагин, поэтому данную реализацию нужно исключить.
2. Из-за способа вызова плагина код нужно переписать, чтобы он использовал объект this , который передается плагину, вместо жестко заданного селектора. Это также позволяет конвертировать не один, а несколько элементов select одновременно;
3. Код JavaScript и CSS нужно поместить в разные файлы, чтобы их было проще подключать и редактировать.
КодКак вы помните из руководства, наш jQuery код сканирует элементы option тега select и создает неупорядоченный список. Одновременно с этим он также ищет ряд data- атрибутов в тегах option , которые содержат URL на изображение и описание для использования в элементах списка.
Это слишком специфично для плагина. Пользователям нужно дать возможность переписать эту функциональность. Для решения этой проблемы можно позволить пользователям передавать плагину функцию в качестве параметра, которая и будет генерировать разметку. Если такой параметр не передается, будем обращаться к тому, который стоит по умолчанию, и который просто берет текст элемента option и превращает его в пункт списка.
Превратим вышесказанное в код:
Функция render берет элемент option (который находится в select) и возвращает элемент li , который подключается плагином к выпадающему списку. Это решает описанную выше проблему № 1.
Прежде чем обратиться к проблеме № 2, давайте посмотрим, как плагин будет вызываться:
$(document).ready(function(){ $("select").tzSelect(); });
В приведенном выше коде вы можете видеть, что плагин применяется к каждому элементу select . Получить доступ к этим элементам можно при помощи объекта this , который передается плагину.
Return this.each(function(){ // ключевое слово "this" это текущий элемент select var select = $(this); // selectBoxContainer - блок обертка для ul var selectBoxContainer = $("
Показанный выше фрагмент почти идентичен коду руководства, который мы сегодня конвертируем. Единственное заметное отличие – мы присваиваем $(this) переменной select (строка5), раньше же это был $("select.makeMeFancy") (жёстко запрограммированный селектор), что значительно сужало область действия кода.
Другое изменение – вместо непосредственного генерирования выпадающего списка (dropdown), мы вызываем функцию render, которую мы передали как параметр (строка51).
Собрав все воедино, мы получим полный исходный код плагина:
(function($){ $.fn.tzSelect = function(options){ options = $.extend({ render: function(option){ return $("
Проблему № 3 решаем, поместив этот плагин в отдельный файл. Однако, как я упоминал ранее, мы сознательно не включили код, который содержит data- атрибуты, чтобы сделать плагин более мобильным. Чтобы компенсировать это, нужно при вызове плагина передавать пользовательскую функцию render , как вы можете увидеть ниже (этот код также используется в демо).
$(document).ready(function(){ $("select.makeMeFancy").tzSelect({ render: function(option){ return $("
Вы можете использовать этот плагин, бросив папку tzSelect в корневую директорию и включив jquery.tzSelect.css и jquery.tzSelect.js в свои HTML документы.
Подключите CSS файл в разделе head:
.. ..
Если вы захотите применить другую тему оформления, не забудьте скопировать CSS файл в папку проекта.
Применяем стиль к SelectПри использовании EasyDropDown.js, ваша разметка остаётся ясной и интуитивно-понятной. Вам нужно просто добавить обычный элемент select . Вы так же можете отключать данный элемент, присваивать лэйбл и обозначить элемент, который должен быть выбран по умолчанию.
Для стилизации элемента достаточно приписать к нему класс dropdown . Вот и пример:
Setting Option 1 Option 2 Option 3 Option 4 Option 5
Вот и всё, больше ничего вам не нужно. Теперь ваш элемент SELECT будет более симпатичным.
Если вам нужно изначально выделить какой-то элемент, воспользуйтесь атрибутом selected . В данном случае мы не рекомендуем использовать лэйбл, т.к. отображение может немного нарушиться.
... Option 2 ...
Вы так же можете отключить элемент, добавив атрибут disabled:
...
Выбор темыВ комплекте с плагином EasyDropDown.js поставляется 2 стилевые темы: Metro и Flat . Для того чтобы их подключить, воспользуйтесь HTML5 атрибутом data-attribute .
Для применения другой темы, внутри элемента SELECT напишите data-settings="{"wrapperClass":"theme-name"}" . Параметр theme-name может принимать значения: metro или flat . Примеры:
...
Около года назад, я уже делал подробный обзор jQuery-плагинов для стилизации селектов . Итог остался неутешительным, у каждого из них были свои недостатки, и я так и не смог найти то, что хотел. В комментариях отписалось довольно много разработчиков, но все мы сошлись на том, что идеального плагина нет, и что над любым из них приходится хорошо поработать напильником.
Недавно на хабре проскакивал Selectik - довольно неплохой плагин, но не без недостатков . Работа над ним, судя по GitHub , ещё идёт, но пока он не очень удобен, и его основные проблемы ещё имеют место быть.
Недавно мне написал незнакомый человек, и попросил протестировать его плагин ikSelect , который он старался написать максимально приближенным к идеалу. Плагин мне настолько понравился, что после всестороннего тестирования и багфиксинга, я решил написать его обзор и поставить точку в данной теме, а также помочь толковому разработчику попасть на хабр.
В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта Mac OS X, но его без проблем можно стилизировать через css.
Вот так он выглядит в закрытом виде:
Вот так в открытом:
Достоинства:
В Opera mini остаются стандартные селекты, во избежание перезагрузки страницы при открытии списка. В Opera mobile работает так же, как и в настольной версии.
Здравствуйте, хабраюзеры и просто читающие. Сравнительно недавно задался вопросом, как применить стили к тегу select. Всем же хочется, чтобы стилизация формы соответствовала дизайну сайта, а пока что еще не все можно описать чистым CSS. В данной статье мы рассмотрим простенький пример написания своего select-списка, используя CSS и библиотеку языка JavaScript - jQuery. Думаю, особенно новичкам будет любопытен данный материал. Конечно, лучше было бы лучше написать на нативном JS, но всем известно, что строк кода было бы больше, и вряд ли он был бы понятнее.
Честно говоря, прежде чем взяться за создание очередного велосипеда, я пробовал найти подобное решение, но кроме эффектных div-оберток для тега select ничего не нашёл. И я подумал, что будет неплохо написать что-то простенькое и нужное. Ну, что ж, начнём!
В нашем кружке лепки из пластилина участвуют три файла:
selectbox.html
Месяц
selectbox.css
div#selectBox {
width: 250px;
position: relative;
height: 50px;
border-radius: 3px;
border: solid 1px lightgrey;
background-color: #fff;
color: #333;
cursor: pointer;
overflow: hidden;
transition: .3s;
}
div#selectBox p.valueTag {
padding: 15px;
cursor: pointer;
transition: .2s;
height: 40px;
}
div#selectBox > img.arrow {
position: absolute;
right: 0;
width: 50px;
padding: 15px;
}
/*
для пользователей Safari, Chrome и Opera приятный бонус - стилизованный скролл-бар.
*/
::-webkit-scrollbar {
background: transparent;
width: 0.5em;
position: absolute;
}
::-webkit-scrollbar-track {
background: transparent;
position: absolute;
z-index: -2;
}
::-webkit-scrollbar-thumb {
border-radius: 100px;
background: #888;
}
ul#selectMenuBox {
background: #fff;
transition: .3s;
width: 100%;
height: 200px;
overflow-y: auto;
overflow-x: hidden !important;
position: absolute;
margin-top: 00px;
display: block;
}
ul#selectMenuBox > li {
display: block;
padding: 10px;
border-radius: 00px;
cursor: pointer;
}
ul#selectMenuBox > li.option {
color: gray;
padding: 10px;
}
ul#selectMenuBox > li.option:hover {
color: #333;
background: #e1e1e1;
transition: .2s;
}
А теперь к вкусностям! Рассмотрим исходный код плагина selectbox() для jQuery, файл selectbox.js :
selectbox.js
(function($) {
$.fn.selectbox = function() {
// начальные параметры
// задаем стандартную высоту div"a.
var selectDefaultHeight = $("#selectBox").height();
// угол поворота изображения в div"e
var rotateDefault = "rotate(0deg)";
// после нажатия кнопки срабатывает функция, в которой
// вычисляется исходная высота нашего div"a.
// очень удобно для сравнения с входящими параметрами (то, что задается в начале скрипта)
$("#selectBox > p.valueTag").click(function() {
// вычисление высоты объекта методом height()
var currentHeight = $("#selectBox").height();
// проверка условия на совпадение/не совпадение с заданной высотой вначале,
// чтобы понять. что делать дальше.
if (currentHeight < 100 || currentHeight == selectDefaultHeight) {
// если высота блока не менялась и равна высоте, заданной по умолчанию,
// тогда мы открываем список и выбираем нужный элемент.
$("#selectBox").height("250px"); // «точка остановки анимации»
// здесь стилизуем нашу стрелку и делаем анимацию средствами CSS3
$("img.arrow").css({borderRadius: "1000px", transition: ".2s", transform: "rotate(180deg)"});
}
// иначе если список развернут (высота больше или равна 250 пикселям),
// то при нажатии на абзац с классом valueTag, сворачиваем наш список и
// и присваиваем блоку первоначальную высоту + поворот стрелки в начальное положение
if (currentHeight >= 250) {
$("#selectBox").height(selectDefaultHeight);
$("img.arrow").css({transform: rotateDefault});
}
});
// так же сворачиваем список при выборе нужного элемента
// и меняем текст абзаца на текст элемента в списке
$("li.option").click(function() {
$("#selectBox").height(selectDefaultHeight);
$("img.arrow").css({transform: rotateDefault});
$("p.valueTag").text($(this).text());
});
};
})(jQuery);
$("selector").selectbox();
Предварительно, включив вызов в метод ready() объекта document, чтобы плагин загружался после полноценной загрузки документа. Подробнее, что такое плагин на jQuery, можно ознакомиться
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .
Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.
Не поддаются полной стилизации следующие элементы html-форм:
Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.
Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.
Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).
Демонстрация работы плагинаНа вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.
ДостоинстваПлагин недоступен, т.к. он уже не актуален.
jQuery-плагин «SelectBox Styler»Версия: 1.0.1 | Загрузок: 11103 | Размер: 7 Кб | Последнее обновление: 07.10.2012
Обновления 22.09.2012 Переделал скрипт в плагин (в том числе сделал минимизированный вариант), а также добавил поддержку динамического добавления/изменения селектов. 07.10.2012 Исправлено поведение скрипта при использовании метода onchange у тега . Подключение плагинаЕсли на сайте еще не подключен jQuery, то добавьте следующую строку перед тегом :
Сразу после jQuery подключите файл со скриптом:
(function($) { $(function() { $("select").selectbox(); }) })(jQuery)
Этот код поместите перед тегом после вышеуказанных файлов.
При динамическом изменении селектов необходимо запустить триггер refresh , например:
(function($) { $(function() { $("button").click(function() { $("select").find("option:nth-child(5)").attr("selected", true); $("select").trigger("refresh"); }) }) })(jQuery)
HTML-код после выполнения плагинаЕго структура выглядит следующим образом:
-- Выберите --
Чтобы оформить селекты с помощью CSS, используйте следующие классы:
.selectbox | родительский контейнер для всего селекта |
.selectbox .select | селект в свернутом состоянии |
.selectbox.focused .select | фокус на селекте, когда нажата клавиша Tab |
.selectbox .select .text | вложенный тег для свернутого селекта на случай вставки фонового изображения по технике «раздвижных дверей» |
.selectbox .trigger | правая часть свернутого селекта (условный переключатель) |
.selectbox .trigger .arrow | вложенный тег для переключателя (стрелка) |
.selectbox .dropdown | обертка для выпадающего списка |
.selectbox .dropdown ul | выпадающий список |
.selectbox li | пункт (опция) селекта |
.selectbox li.selected | выбранный пункт селекта |
.selectbox li.disabled | отключенный (недоступный для выбора) пункт селекта |
Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.