Оформление select jquery. JQuery-плагин для стилизации селектов. HTML-код после выполнения плагина

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

Честно говоря, прежде чем взяться за создание очередного велосипеда, я пробовал найти подобное решение, но кроме эффектных div-оберток для тега select ничего не нашёл. И я подумал, что будет неплохо написать что-то простенькое и нужное. Ну, что ж, начнём!

В нашем кружке лепки из пластилина участвуют три файла:

• selectbox.html
• selectbox.css
• selectbox.js

Рассмотрим их по очереди. Сначала обратим внимание на самое что ни наесть простое в этом примере - верстка списка или файл selectbox.html :

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, можно ознакомиться

Кто серьёзно занимается вёрсткой страниц, знает, что возможности стилизации select в CSS крайне сильно ограничены. Но очень часто в дизайн стандартный select не вписывается вообще никак, поэтому приходится делать стилизацию select через JavaScript . Фактически, в этой статье мы с Вами создадим свой собственный select с помощью JavaScript .

Есть масса готовых плагинов, в том числе и на jQuery , которые позволяют всё это сделать. Но если Вам не нужно что-то сверхсложное, то проще сделать всё самому с нуля на чистом JavaScript .

Первым делом, давайте создадим HTML-структуру нашего будущего select :

Элемент 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 .

В данной статье мы рассмотрим создание плагина 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"); }); });

Показанный выше фрагмент почти идентичен коду руководства, который мы сегодня конвертируем. Единственное заметное отличие – мы присваиваем $(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 = $("

  ",{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);

  Проблему № 3 решаем, поместив этот плагин в отдельный файл. Однако, как я упоминал ранее, мы сознательно не включили код, который содержит data- атрибуты, чтобы сделать плагин более мобильным. Чтобы компенсировать это, нужно при вызове плагина передавать пользовательскую функцию render , как вы можете увидеть ниже (этот код также используется в демо).

  $(document).ready(function(){ $("select.makeMeFancy").tzSelect({ render: function(option){ return $("

  • ",{ html: ""+ option.data("html-text")+"" }); }, className: "hasDetails" }); // вызываем версию по умолчанию $("select.regularSelect").tzSelect(); });

    Вы можете использовать этот плагин, бросив папку tzSelect в корневую директорию и включив jquery.tzSelect.css и jquery.tzSelect.js в свои HTML документы.

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

    Нет ничего лучше, чем увидеть как выглядит список своими глазами:

    Скачать

    Вот как выглядит этот Select оформленный на CSS:

    Похожие статьи на эту тему:

    А сейчас опишу процесс установки по шагам этого выпадающего списка или просто Select.

    1 шаг. Подключаем необходимые файлы

    Всё просто. После того как скачали архив с исходниками оттуда нам будут нужны 2 файла (style.css и select.js — если подключаете первый вариант списка или select_demo2.js — если подключаете второй вариант). Подключаем эти два файла между тегами :

    1 2	<link rel = "stylesheet" type = "text/css" href = "css/style.css" / > <script type = "text/javascript" src = "js/select.js" >

    2 шаг. HTML структура элемента Select

    Ничего сверхсложного в структуре нет (да и откуда ему быть, ведь это просто HTML 🙂). Простая форма, внутри которой выпадающий Select с его пунктами:

    1 2 3 4 5 6 7 8 9 10 11 12

    <form action = "#" > <p > <label class = "label" > Страны Великобритании:</ label > <select class = "turnintodropdown" > <option > Пожалуйста, выберите страну:</ option > <option > Англия</ option > <option > Северная Ирландия</ option > <option > Шотландия</ option > <option > Уэльс</ option > </ select > </ p > </ form >

    3 шаг. Добавляем стили для Select CSS

    Их немного. Я привожу ниже стили для первого варианта списка. Хочу обратить внимание на пути к изображениям. Их всего два: первое для того, чтобы раскрыть список, а второй — чтобы закрыть. Они выглядят в виде двух стрелочек «вверх» и «вниз» соответственно. Их можно скачать в месте с исходниками, которые находятся в начале статьи:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94

    .dropcontainer { position : relative ; font-size : 16px ; color : #777 ; } .trigger { color : #777 ; padding : 10px ; font-size : 16px ; width : 50% ; background : #fff url () 98% center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; transition : all 0.5s ease; } .trigger :hover { color : #777 ; background : #f5f5f5 url (../images/select-arrow-open.png ) 98% center no-repeat ; } .activetrigger { color : #777 ; padding : 10px ; font-size : 16px ; width : 50% ; background : #f5f5f5 url () 98% center no-repeat ; display : block ; border : 1px solid #ccc ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; } .activetrigger :hover { background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; color : #777 ; } .activetrigger :active { background : #f5f5f5 url (../images/select-arrow-close.png ) 98% center no-repeat ; color : #777 ; } .dropcontainer ul { font-size : 16px ; border : 1px solid #ccc ; border-top : none ; background : #fff ; list-style-type : none ; padding : 10px ; margin : 0 ; width : 50% ; z-index : 100 ; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; } .dropcontainer ul li { padding : 5px ; -webkit-transition : all 0.5s ease; -moz-transition : all 0.5s ease; -o-transition : all 0.5s ease; transition : all 0.5s ease; } .dropcontainer ul li :hover { background : #f5f5f5 ; outline : none ; } .dropcontainer ul li :first-child { display : none ; } .dropcontainer ul li :last-child { border-bottom : none ; } .dropdownhidden { display : none ; } .dropdownvisible { height : auto ; }

    В демо примере стили расположены в папке css . Поэтому когда мы задаем путь к папке с изображениями в пути мы сначала пишем ".. " (две точки), чтобы выйти на один уровень вверх. А затем заходим в папку images .

    Сейчас хочу сказать что можно сделать, чтобы не копировать полностью стили для второго варианта списка (который с фиксированной высотой), а изменить одно свойство и получить фиксированный список.

    Вам нужно заменить последнее свойство dropdownvisible :

    1 2 3

    .dropdownvisible { height : auto ; }

    1 2 3 4

    .dropdownvisible { height : 200px ; overflow-y : scroll ; }

    И если не забудете заменить скрипты (смотрите выше что на что менять), то получите следующее:

    В каких браузерах этот Select CSS (выпадающий список) работает нормально?

    • ✓ Firefox 24.0, Firefox 25.0, Firefox 26.0
    • ✓ Chrome 29.0, Chrome 30.0, Chrome 31.0
    • ✓ Opera 12.14, Opera 12.15, Opera 12.16
    • ✓ IE 7.0, IE 8.0, IE 9.0, IE 10.0, IE 11.0
    • ✓ Safari 5.1, Safari 6.0, Safari 6.1, Safari 7.0
    • ✓ Apple IOS – iPhone 4S, iPhone 5, iPad 2 (5.0), iPad 3 (6.0), iPad Mini
    • ✓ Android – Sony Experia X10, HTC One X, Kindle Fire 2, Google Nexus

    Дополнение к уроку — креативный эффект при наведении + ВИДЕО

    В дополнение к уроку хочу рассказать как сделать еще один эффект на сайте очень необычным: эффект при наведении. Посмотрите это короткое видео и всё сами увидите.

    Вывод

    Еще один элемент сайта — Select можно изменить под свой дизайн на CSS и Javascript. Ничего сложного в процессе установки нет, поэтому у Вас всё получится. Также в качестве дополнения к статье Вы получаете креативный способ и видео по установке.

    Около года назад, я уже делал подробный обзор jQuery-плагинов для стилизации селектов . Итог остался неутешительным, у каждого из них были свои недостатки, и я так и не смог найти то, что хотел. В комментариях отписалось довольно много разработчиков, но все мы сошлись на том, что идеального плагина нет, и что над любым из них приходится хорошо поработать напильником.

    Недавно на хабре проскакивал Selectik - довольно неплохой плагин, но не без недостатков . Работа над ним, судя по GitHub , ещё идёт, но пока он не очень удобен, и его основные проблемы ещё имеют место быть.

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

    В двух словах: он умеет практически всё, что умеет стандартный селект, при этом отлично стилизируется и подстраивается под особенности реализации селектов разных браузеров. Плагин полностью копирует внешний вид родного селекта Mac OS X, но его без проблем можно стилизировать через css.

    Вот так он выглядит в закрытом виде:

    Вот так в открытом:
    
    

    Чем же он лучше остальных?

    Объем: 11KB

    Достоинства:

    • работает во всех браузерах (IE6+, FF, Opera, Chrome, Safari), в том числе в мобильных
    • автоматически подстраивает ширину
    • открывается всегда на видимую часть страницы (так называемое «умное позиционирование»), как в горизонтальном, так и в вертикальном положении
    • позволяет задавать максимальную высоту выпадающего списка
    • позволяет группировать опции (optgroup)
    • полностью управляется с клавиатуры (в т.ч. реагирует на переход Tab"ом, PgUp, PgDown, Home, End)
    • имеет подбор по первым буквам (не только по одной, но и по последующим)
    • поддерживает скролл колёсиком мышки
    • вставляется инлайново (inline-block)
    • замечательно работает с огромными списками (1000+ элементов)
    • оставляет стандартный селект при отключенном javascript
    • имеет отличный API
    Недостатки:
    • не позволяет выделять сразу несколько пунктов (multiselect)
    • не стилизирует скроллбар выпадающего списка (т.к. слишком сильно влияет на скорость работы)
    • не бегает за пивом

    Мобильные браузеры

    Плагин стилизирует само поле, но при нажатии вызывает родное поведение браузера. Протестировано на iOS (Safari) и Android (2.3 native, Firefox):

    

    В Opera mini остаются стандартные селекты, во избежание перезагрузки страницы при открытии списка. В Opera mobile работает так же, как и в настольной версии.