Пишем свой select-список, используя jQuery и CSS. 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 или проще говоря кнопки выбора. Мы будем рассматривать несколько скриптов, которые будут преобразовывать обычный элемент 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 , этим мы предотвратим увеличение общей ширины, так как наши фрагменты размещаются внутри элемента. На этом все, наши улучшенные элементы выбора созданы, удачных Вам экспериментов.

    Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью .

    Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка 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
    -- Выберите -- Пункт 1 Пункт 2 Пункт 3

    CSS-классы, используемые для оформления селекта

    Чтобы оформить селекты с помощью 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 отключенный (недоступный для выбора) пункт селекта
    Заключение

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

    Soldatov Nikolay
    Стилизация selectСтилизация select на чистом CSS без использования сторонних библиотек или JavaScript кода. А также бонус: рассмотрим как стилизовать select option при помощи JavaScript и jQuery Стилизация select

    Структура будет стандартной

    Слон Бегемот Жираф

    Чтобы в select отображаемая строка была одна используем атрибут size со значением 1.

    Стилизация для нашего селекта

    -webkit-appearance : none ; -moz-appearance : none ; -ms-appearance : none ; appearance : none ; background : url ("path/img.png" ) no-repeat right center ; outline : 0 ;

    Получаем

    Слон Бегемот Жираф

    В примере выше мы прописали четыре строчки ccs свойства appearance с вендорными префиксами, чтобы свойство работало одинаково во всех браузерах . Что это за свойство читайте ниже.

    Вся сложность заключалась лишь в замене стандартной стрелки в прямоугольнике, вместо которой мы реализовали background. Таким образом можно вставить любую картинку. Необходимо лишь подогнать размер при помощи свойства background-size

    Appearance CSS

    Реализовать нашу задачу помогло css3 свойство appearance

    Данное свойство позволяет изменить вид элемента на: button, checkbox, radio, field, icon и многое другое. В нашем случае мы вообще скрыли элемент, используя none и добавили картинку с помощью background

    Стилизация select option

    Для того чтобы стилизовать select option нам потребуется JavaScript

    Выбрать HTML JavaScript PHP .select { display : block ; max-width : 215px ; width : 100% ; position : relative ; } .new-select { border : 1px solid #ced4da ; padding : 10px 15px ; cursor : pointer ; position : relative ; } .new-select__list { border : 1px solid #ced4da ; cursor : pointer ; position : absolute ; top : 45px ; left : 0 ; width : 100% ; } .new-select__list.on { display : block ; } .new-select__item span { display : block ; padding : 10px 15px ; } .new-select__item span :hover { color : #12b223 ; } .new-select :after { content : "" ; display : block ; width : 25px ; height : 25px ; position : absolute ; right : 9px ; top : 9px ; background : url("path-to-image") no-repeat right center / cover ; opacity : 0.6 ; -webkit-transition : all .27s ease-in-out ; -o-transition : all .27s ease-in-out ; transition : all .27s ease-in-out ; -webkit-transform : rotate (0deg ); -ms-transform : rotate (0deg ); -o-transform : rotate (0deg ); transform : rotate (0deg ); } .new-select.on :after { -webkit-transform : rotate (180deg ); -ms-transform : rotate (180deg ); -o-transform : rotate (180deg ); transform : rotate (180deg ); }

    Перед JavaScript-кодом должен быть подключен jQuery

    $ (" .select " ). each (function () { const _this = $ (this ), selectOption = _this . find (" option " ), selectOptionLength = selectOption . length , selectedOption = selectOption . filter (" :selected " ), duration = 450 ; // длительность анимации _this . hide (); _this . wrap (" " ); $ (" " , { class : " new-select " , text : _this . children (" option:disabled " ). text () }). insertAfter (_this ); const selectHead = _this . next (" .new-select " ); $ (" " , { class : " new-select__list " }). insertAfter (selectHead ); const selectList = selectHead . next (" .new-select__list " ); for (let i = 1 ; i < selectOptionLength ; i ++ ) { $ (" " , { class : " new-select__item " , html : $ (" " , { text : selectOption . eq (i ). text () }) }) . attr (" data-value " , selectOption . eq (i ). val ()) . appendTo (selectList ); } const selectItem = selectList . find (" .new-select__item " ); selectList . slideUp (0 ); selectHead . on (" click " , function () { if ( ! $ (this ). hasClass (" on " ) ) { $ (this ). addClass (" on " ); selectList . slideDown (duration ); selectItem . on (" click " , function () { let chooseItem = $ (this ). data (" value " ); $ (" select " ). val (chooseItem ). attr (" selected " , " selected " ); selectHead . text ( $ (this ). find (" span " ). text () ); selectList . slideUp (duration ); selectHead . removeClass (" on " ); }); } else { $ (this ). removeClass (" on " ); selectList . slideUp (duration ); } }); });