Оформление select jquery. Пишем свой select-список, используя jQuery и CSS
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .
Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, не существует единого стандарта отображения элементов форм, независимо от браузера и операционной системы, так же, как и нет возможности произвольно оформить некоторые из этих элементов, используя каскадные таблицы стилей.
Не поддаются полной стилизации следующие элементы html-форм:
- раскрывающийся список ;
- флажок ;
- переключатель .
- поле для отправки файла .
Как уже понятно из заголовка поста, здесь речь пойдет только про селекты.
Существует немало готовых решений в виде jQuery-плагинов для стилизации раскрывающихся списков. Но я (ввиду того, что ни один из плагинов меня не устроил по тем или иным причинам) решил пойти путем изобретения своего колеса и написал собственный плагин, которым и делюсь в данной статье.
Сразу хочу заметить, что данный плагин не подходит для всех возможных случаев применения селектов (читайте недостатки).
Демонстрация работы плагинаНа вы можете посмотреть пример стилизации селектов с помощью моего плагина. Их оформление я сделал без использования изображений.
Достоинства- При отключенном JavaScript отображаются стандартные селекты.
- Небольшой размер скрипта, примерно 4 килобайта.
- Работает в IE6+ и всех современных десктопных браузерах.
- Выводится внутристрочно.
- Легко поддается оформлению через CSS.
- Позволяет задать максимальную высоту для выпадающего списка (CSS-свойством max-height).
- Автоматически подстраивает ширину, если она не указана.
- Поддерживает прокрутку колесом мыши.
- Имеет «умное позиционирование», т.е. не уходит за видимую часть страницы при открытии списка.
- Умеет «ловить» нажатие клавиши Tab и переключаться стрелками на клавиатуре.
- Поддерживает атрибут «disabled».
- Работает и с динамически добавляемыми/изменяемыми селектами.
- Не поддерживает атрибут multiple , т.е. не позволяет выбирать несколько пунктов (мультиселект).
- Не поддерживает группировку элементов списка (тег ).
- Не поддерживает переключение стрелками на клавиатуре, когда список раскрыт кликом мыши.
Плагин недоступен, т.к. он уже не актуален.
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-код после выполнения плагинаЕго структура выглядит следующим образом:
-- Выберите --
- -- Выберите --
- Пункт 1
- Пункт 2
- Пункт 3
Чтобы оформить селекты с помощью 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 | отключенный (недоступный для выбора) пункт селекта |
Создание подобного скрипта — довольно кропотливое занятие, поскольку приходится учитывать множество различных моментов. Очень надеюсь, что никаких серьезных багов не вылезет. Но, если что, сообщайте в комментариях.
Кто серьёзно занимается вёрсткой страниц, знает, что возможности стилизации select в CSS крайне сильно ограничены. Но очень часто в дизайн стандартный select не вписывается вообще никак, поэтому приходится делать стилизацию select через JavaScript . Фактически, в этой статье мы с Вами создадим свой собственный select с помощью JavaScript .
Есть масса готовых плагинов, в том числе и на jQuery , которые позволяют всё это сделать. Но если Вам не нужно что-то сверхсложное, то проще сделать всё самому с нуля на чистом JavaScript .
Первым делом, давайте создадим HTML-структуру нашего будущего select :
Элемент 1
Элемент 2
Элемент 3
Элемент 1
Элемент 2
Элемент 3
Как видите, тега select тут и близко нет. Теперь мы можем как угодно стилизовать наш собственный select с помощью CSS :
Select {
background-color: #0ee;
border-radius: 10px;
padding: 10px 0;
width: 200px;
}
.select p {
cursor: pointer;
margin: 0;
padding: 5px 20px;
}
.select p.active {
background-color: #ee0;
}
Безусловно, Вы здесь можете сделать всё, что пожелаете. И, наконец, надо превратить внешний вид в функциональность select , то есть выбор и подстветка только одного элемента из нескольких, а также последующая отправка вместе с формой. Для этого мы воспользуемся JavaScript :
Function select(element) {
var value = element.getAttribute("data-value"); // Считываем значение выбранного элемента
var nodes = element.parentNode.childNodes; // Получаем все остальные элементы
for (var i = 0; i < nodes.length; i++) {
/* Отфильтровываем посторонние элементы text и input */
if (nodes[i] instanceof HTMLParagraphElement) {
/* Добавляем active у выбранного элемента, стирая данный класс у всех остальных */
if (value == nodes[i].getAttribute("data-value")) nodes[i].className = "active";
else nodes[i].className = "";
}
}
document.getElementById("my_select").value = value; // Устанавливаем в hidden-поле выбранное значение
}
Ключевым моментом реализации функциональности select является hidden-поле , в которое записывается значение из нашего select . И именно это значение будет отправлено при отправке формы.
Вот таким нехитрым образом делается абсолютно любая стилизация select на JavaScript . Если использовать jQuery , то код будет ещё проще.
Безусловно, стандартный select обладает большей функциональностью. Например, он реагирует на tab , также можно в нём перебирать элементы стрелками на клавиатуре. Но всё это Вы так же можете реализовать при необходимости на JavaScript .
И последняя рекомендация. В коде был использован тег noscript , и это было неслучайно. Поскольку не у всех JavaScript включён, и чтобы форма была вообще рабочей для таких пользователей, нужно вывести хотя бы стандартный select . А все, у кого JavaScript включён, увидят наш красивый select .
Создавая сайт каждый веб мастер пытается сделать что бы его творение одинаково читалось во всех браузерах, и это, порой, доставляет хлопот. По этому в данном уроке речь пойдет о создании и стилизации такого элемента сайта как select или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент select в более стильный и функциональный элемент управления сайта, который отображается корректно в различных браузерах. И так, давайте же посмотрим что у нас получилось..
ИСХОДНИКИ
В уроке мы будем использовать HTML5 , по это создаем в первую очередь HTML разметку, которая имеет следующий вид:
Создаем для сайта элемент select | Демонстрация с сайта сайт
Сделайте Ваш выбор
Выберите продукт
Информационный блон по веб-дизайну
CMS+шаблоны, плагины
Интересные уроки по созданию сайтов
RSS новости нашего блога всегда рядом
Далее рассмотрим некоторые атрибуты, например атрибут data используются для объединения информации в элементах option. В них размещается иконка продукта и текстовое описание с форматированием. Оба этих пункта будут выводиться в нашей версии элемента select.
Теперь подключаем эффекты, jQuery проверяет элемент select , и, используя атрибуты данных, строит разметку, которая добавляется сразу за элементом select :
Выберите продукт
- JavaScript + jQuery для начинающих в видеоформатепосмотреть видеопрезентацию
- PHP + MySQL для начинающихкупить
- WordPress - профессиональный блог за один деньскачать
- Joomla - профессиональный сайт за один денькупить
Наше меню будет строить неупорядоченный список с элементами li , которые представляют каждый пункт option из элемента select .
Теперь рассмотрим наш JavaScript , который будет осуществлять плавную анимацию нашего элемента:
$(document).ready(function(){ // Элемент select, который будет замещаться: var select = $("select.makeMeFancy"); var selectBoxContainer = $("",{ width: select.outerWidth(), className: "tzSelect", html: "" }); var dropDown = $("
- ",{className:"dropDown"});
var selectBox = selectBoxContainer.find(".selectBox");
// Цикл по оригинальному элементу select
select.find("option").each(function(i){
var option = $(this);
if(i==select.attr("selectedIndex")){
selectBox.html(option.text());}
// Так как используется jQuery 1.4.3, то мы можем получить доступ
// к атрибутам данных HTML5 с помощью метода data().
if(option.data("skip")){return true;
}
// Создаем выпадающий пункт в соответствии
// с иконкой данных и атрибутами HTML5 данных:
var li = $("
- ",{
html: ""+
option.data("html-text")+""
});
li.click(function(){
selectBox.html(option.text());
dropDown.trigger("hide");
// Когда происходит событие click, мы также отражаем
// изменения в оригинальном элементе select:
select.val(option.val());
return false;
});
dropDown.append(li);
});
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
// Привязываем пользовательские события show и hide к элементу dropDown:
dropDown.bind("show",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.addClass("expanded");
dropDown.slideDown();
}).bind("hide",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.removeClass("expanded");
dropDown.slideUp();
}).bind("toggle",function(){
if(selectBox.hasClass("expanded")){
dropDown.trigger("hide");
}
else dropDown.trigger("show");
});
selectBox.click(function(){
dropDown.trigger("toggle");
return false;
});
// Если нажать кнопку мыши где-нибудь на странице при открытом элементе dropDown,
// он будет спрятан:
$(document).click(function(){
dropDown.trigger("hide");
});
});
Теперь маленький нюанс, при создании нашего элемента, оригинальный элемент select сохраняется, он будет скрыт с помощью метода hide(). Это не мало важно, потому что все изменения отражаются и в нем.
Затем мы рассматриваем наши стили CSS, будем использовать CSS3 , задаем стили для нашего элемента:
#page{ width:490px; margin:50px auto; } #page h1{ font-weight:normal; text-indent:-99999px; overflow:hidden; background:url("../img/your_product.png") no-repeat; width:490px; height:36px; } #page form{ margin:20px auto; width:460px; } .tzSelect{ /* Контейнер для нового элемента select */ height:34px; display:inline-block; min-width:460px; position:relative; /* Предварительная загрузка фонового изображения для выпадающих пунктов */ background:url("../img/dropdown_slice.png") no-repeat -99999px; } .tzSelect .selectBox{ position:absolute; height:100%; width:100%; /* Установка шрифта */ font:13px/34px "Lucida Sans Unicode", "Lucida Grande", sans-serif; text-align:center; text-shadow:1px 1px 0 #EEEEEE; color:#666666; /* Использование множественных фонов CSS3 */ background:url("../img/select_slice.png") repeat-x #ddd; background-image:url("../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png"),url("../img/select_slice.png");background-position:0 -136px, right -204px, 50% -68px, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, repeat-x; cursor:pointer; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .tzSelect .selectBox:hover, .tzSelect .selectBox.expanded{ background-position:0 -170px, right -238px, 50% -102px, 0 -34px; color:#2c5667; text-shadow:1px 1px 0 #9bc2d0; }
В данном примере используется множество прозрачных изображений, которые накладывается один на одного. Множественные фоновые изображения поддерживаются в Firefox , Safari , Chrome и Opera . Для Internet Explorer и старых версий браузеров.
TzSelect .dropDown{ position:absolute; top:40px; left:0; width:100%; border:1px solid #32333b; border-width:0 1px 1px; list-style:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; -moz-box-shadow:0 0 4px #111; -webkit-box-shadow:0 0 4px #111; box-shadow:0 0 4px #111; } .tzSelect li{ height:85px; cursor:pointer; position:relative; /* Использование множественных фонов CSS3 */ background:url("../img/dropdown_slice.png") repeat-x #222; background-image:url("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"),url("../img/dropdown_slice.png"); background-position: 50% -171px, 0 -85px, 0 0; background-repeat: no-repeat, no-repeat, repeat-x; } .tzSelect li:hover{ background-position: 50% -256px, 0 -85px, 0 0; } .tzSelect li span{ left:88px; position:absolute; top:27px; } .tzSelect li i{ color:#999999; display:block; font-size:12px; } .tzSelect li img{ left:9px; position:absolute; top:13px; }
Используя box-sizing, нам необходимо присвоить ему значение border-box , этим мы предотвратим увеличение общей ширины, так как наши фрагменты размещаются внутри элемента. На этом все, наши улучшенные элементы выбора созданы, удачных Вам экспериментов.
В данной статье мы рассмотрим создание плагина 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 и превращает его в пункт списка.
Превратим вышесказанное в код:
- ",{
html: option.text()
});
},
className: ""
},options);
// More code will be added here.
}
})(jQuery);
Функция 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 = $("
- ",{className:"dropDown"});
var selectBox = selectBoxContainer.find(".selectBox");
// Цикл по тегам option оригинального тега select
if(options.className){
dropDown.addClass(options.className);
}
select.find("option").each(function(i){
var option = $(this);
if(i==select.attr("selectedIndex")){
selectBox.html(option.text());
}
// Так как у нас jQuery 1.4.3 то получить доступ к атрибуту
// HTML5 data можно при помощи метода data())
if(option.data("skip")){
return true;
}
// создаем выпадающий список, согласно атрибутам HTML5
// data-icon и data-html-text
var li = options.render(option);
li.click(function(){
selectBox.html(option.text());
dropDown.trigger("hide");
// При клике отражаем изменения на оригинальное
// элементе select
select.val(option.val());
return false;
});
dropDown.append(li);
});
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
// Связываем события show и hide
// с выпадающим меню dropDown:
dropDown.bind("show",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.addClass("expanded");
dropDown.slideDown();
}).bind("hide",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.removeClass("expanded");
dropDown.slideUp();
}).bind("toggle",function(){
if(selectBox.hasClass("expanded")){
dropDown.trigger("hide");
}
else dropDown.trigger("show");
});
selectBox.click(function(){
dropDown.trigger("toggle");
return false;
});
// Если произошел клик где-нибудь на странице при
// открытом выпадающем списке, то скрываем его:
$(document).click(function(){
dropDown.trigger("hide");
});
});
- ",{
html: option.text()
});
},
className: ""
},options);
return this.each(function(){
// ключевое слово "this" это текущий элемент select
var select = $(this);
// selectBoxContainer - блок обертка для ul
var selectBoxContainer = $("",{
width: select.outerWidth(),
className: "tzSelect",
html: ""
});
// dropDown - выпадающее меню
var dropDown = $("
- ",{className:"dropDown"});
var selectBox = selectBoxContainer.find(".selectBox");
// Цикл по тегам option оригинального тега select
if(options.className){
dropDown.addClass(options.className);
}
select.find("option").each(function(i){
var option = $(this);
if(i==select.attr("selectedIndex")){
selectBox.html(option.text());
}
// Так как у нас jQuery 1.4.3 то получить доступ к атрибуту
// HTML5 data можно при помощи метода data())
if(option.data("skip")){
return true;
}
// создаем выпадающий список, согласно атрибутам HTML5
// data-icon и data-html-text
var li = options.render(option);
li.click(function(){
selectBox.html(option.text());
dropDown.trigger("hide");
// При клике отражаем изменения на оригинальное
// элементе select
select.val(option.val());
return false;
});
dropDown.append(li);
});
selectBoxContainer.append(dropDown.hide());
select.hide().after(selectBoxContainer);
// Связываем события show и hide
// с выпадающим меню dropDown:
dropDown.bind("show",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.addClass("expanded");
dropDown.slideDown();
}).bind("hide",function(){
if(dropDown.is(":animated")){
return false;
}
selectBox.removeClass("expanded");
dropDown.slideUp();
}).bind("toggle",function(){
if(selectBox.hasClass("expanded")){
dropDown.trigger("hide");
}
else dropDown.trigger("show");
});
selectBox.click(function(){
dropDown.trigger("toggle");
return false;
});
// Если произошел клик где-нибудь на странице при
// открытом выпадающем списке, то скрываем его:
$(document).click(function(){
dropDown.trigger("hide");
});
});
}
})(jQuery);
- ",{
html: ""+
option.data("html-text")+""
});
},
className: "hasDetails"
});
// вызываем версию по умолчанию
$("select.regularSelect").tzSelect();
});
Вы можете использовать этот плагин, бросив папку tzSelect в корневую директорию и включив jquery.tzSelect.css и jquery.tzSelect.js в свои HTML документы.
Здравствуйте, хабраюзеры и просто читающие. Сравнительно недавно задался вопросом, как применить стили к тегу select. Всем же хочется, чтобы стилизация формы соответствовала дизайну сайта, а пока что еще не все можно описать чистым CSS. В данной статье мы рассмотрим простенький пример написания своего select-списка, используя CSS и библиотеку языка JavaScript - jQuery. Думаю, особенно новичкам будет любопытен данный материал. Конечно, лучше было бы лучше написать на нативном JS, но всем известно, что строк кода было бы больше, и вряд ли он был бы понятнее.
Честно говоря, прежде чем взяться за создание очередного велосипеда, я пробовал найти подобное решение, но кроме эффектных div-оберток для тега select ничего не нашёл. И я подумал, что будет неплохо написать что-то простенькое и нужное. Ну, что ж, начнём!
В нашем кружке лепки из пластилина участвуют три файла:- selectbox.html
- selectbox.css
- selectbox.js
selectbox.html
Месяц
- Январь
- Февраль
- Март
- Апрель
- Май
- Июнь
- Июль
- Август
- Сентябрь
- Октябрь
- Ноябрь
- Декабрь
Как видно из исходного html-кода, наш список будет предлагать нам выбрать месяц. Теперь рассмотрим файл selectbox.css :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; }
Особых сложностей тут нет, если вы владеете азами верстки и разметки средствами HTML и CSS3 соответственно.А теперь к вкусностям! Рассмотрим исходный код плагина 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);
Кода было больше, но удалось сжать благодаря методам css() и height(). Оформил в виде плагина для удобства и многократного использования. Можно сделать так, как вам нравится, лишь бы работало, так что я не обижусь, если кто-то оптимизирует мой костыль. Для вызова достаточно подключить внешний файл скрипта и вызвать плагин следующим образом:$("selector").selectbox();
Предварительно, включив вызов в метод ready() объекта document, чтобы плагин загружался после полноценной загрузки документа. Подробнее, что такое плагин на jQuery, можно ознакомиться
Проблему № 3 решаем, поместив этот плагин в отдельный файл. Однако, как я упоминал ранее, мы сознательно не включили код, который содержит data- атрибуты, чтобы сделать плагин более мобильным. Чтобы компенсировать это, нужно при вызове плагина передавать пользовательскую функцию render , как вы можете увидеть ниже (этот код также используется в демо).
$(document).ready(function(){ $("select.makeMeFancy").tzSelect({ render: function(option){ return $("
- ",{
html: ""+
option.data("html-text")+""
});
},
className: "hasDetails"
});
// вызываем версию по умолчанию
$("select.regularSelect").tzSelect();
});
Показанный выше фрагмент почти идентичен коду руководства, который мы сегодня конвертируем. Единственное заметное отличие – мы присваиваем $(this) переменной select (строка5), раньше же это был $("select.makeMeFancy") (жёстко запрограммированный селектор), что значительно сужало область действия кода.
Другое изменение – вместо непосредственного генерирования выпадающего списка (dropdown), мы вызываем функцию render, которую мы передали как параметр (строка51).
Собрав все воедино, мы получим полный исходный код плагина:
(function($){ $.fn.tzSelect = function(options){ options = $.extend({ render: function(option){ return $("
- ",{
html: option.text()
});
},
className: ""
},options);
return this.each(function(){
// ключевое слово "this" это текущий элемент select
var select = $(this);
// selectBoxContainer - блок обертка для ul
var selectBoxContainer = $("",{
width: select.outerWidth(),
className: "tzSelect",
html: ""
});
// dropDown - выпадающее меню
var dropDown = $("