jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Спасибо большое! Прекрасный скрипт
Dimox, супер! + за подробное описание, даже css-селеторы указаны что для чего. Огромное спасибо и удачи!
Подскажите, а текстовые инпуты не стилизирует?
Нет, плагин для этого не требуется.
Здравствуйте
Не добавляется класс при фокусе. Проверил на Вашей демонстрационной странице. Там аналогично не добавляется класс.
Не понял, что вы хотите.
Когда мы нажимаем на селект и он открыт не дописывается класс “focused”. то есть я не смог задать отдельно стиль для выделенного селекта.
Этот класс добавляется только при переключении с клавиатуры по Tab. При нажатии мышью не вижу в этом необходимости.
Еще дополнение .
Плагин не берет класс с селекта. Например я хочу два разных селекта. Дописал класс селекту и плагин уже дописал этот класс span.selectbox.
Это решается добавлением дополнительного контейнера к селекту – https://dimox.name/jquery-form-styler/?cp=1#comment-15524
Я решил по другому. Дописав немного кода для селекта
А если в каком-то селекте нету класса? То сразу добавится undefinded-класс
уже лучше что то в этом роде писать, (для себя я сделал через id):
var selectID = (el.attr(‘id’) == null) ? “” : el.attr(‘id’);
У меня на странице несколько селекторов, после подключения данного плагина идёт применение только к первому идущему в структуре, остальные игнорятся.
Следует активировать плагин для каждого имеющегося селектора на странице или есть более лаконичное решение?
Так:
Спасибо за очень хороший плагин! Но у меня возникло пожелание, или даже скорее просьба добавить скролл в селект с возможность изменения его дизайна. Заранее благодарен.
Здравствуйте! Плагин понравился очень, но есть одно неудобство у селекта, может это как-то настраивается:
Допустим, прогружается select, у один из последних пунктов (при их большом количестве) выбран по умолчанию. Когда раскрываем список, то чтобы понять какой пункт выбран, приходится листать вручную, а у стандартного позиционирование сразу стоит как надо.
Как можно это настроить?
Это, к сожалению, не предусмотрено. Я пока не знаю, как такое реализовать.
Может суммировать высоту блоков (пунктов списка) пока не встретится выбранный элемент, а потом прокрутить список примерно на это расстояние?
Самому мне в чужом коде не разобраться, слишком долго проплюхаюсь(
Да, вариант. Надо будет попробовать.
Нашел решение. Скачайте новую версию плагина.
Было бы супер, если получится=) Плагин этот много где нужен, но вот эту часть бы только допилить..
А ещё вопрос такой: а есть в этом плагине selectbox с автофильтром (автоматически фильтрует список по введенным буквам)?
Нет и не планируется. Моей целью была эмуляция стандартного селекта.
Здравствуйте!
Плагин просто отличный, но столкнулся с такой проблемой: когда выбран один из вариантов селекта, то не получается сбросить атрибут selected и назначить его первому элементу например через событие onclick какой то ссылки например.
Т.е.
Подскажите пожалуйста как решить данную проблему? Заранее спасибо!
В конце функции resetselect() еще нужно добавить:
Спасибо огромное! Все работает! Ваш плагин лучший!
Спасибо за отзыв! ;)
Не работает, обе option остаются выбранными :(
Не могу не заметить что стиль “позаимствован” с Twitter Bootstrap. Или это он и есть?) Нехорошо тогда, нужно разрешение спрашивать)
Посмотрите исходный код и всё станет понятно) Бутстрапом тут и не пахнет, больше на яндекс похоже, но не более.
Не думаю, что Дима не способен сделать кнопки самостоятельно, при его то уровне профессионализма.
Не позаимствован, просто похож.
Возникла проблема с input file в IE 8-9 (скорее всего проблема есть и в более ранних версиях). При загрузке файла через обновленный input, файл на сервер не пересылается. В других браузерах такой проблемы нет.
Почитал комментарии, но не нашел решения. Конечно, может что-то упустил :)
На выходных потестирую, посмотрю, что не так.
Проверил. Да, действительно есть такая проблема, от IE, к сожалению, можно ждать чего угодно. Не представляю пока, как ее можно устранить.
Нашёл проблему с firefox, наблюдаю только там версия FF 17.0.1
Версия плагина Версия: 1.2.1
Проблема возникает при добавлении атрибута selected к первому элементу option потом когда я выбираю другие пункты из списка мне всё равно передаётся value первого пункта, хотя визуально выбирается другой пункт.
Если атрибут selected назначить не первому элементу option проблемы не будет наблюдаться.
Проблема уходит если выбрать Пункт 2 , а потом Пункт1 , всё после этого всё работает, как надо
Ссылка для теста
http://playnonstop.net/files/select/dimox-select-problem.html
Код для теста
Ранее уже сообщали об этой проблеме. Я вносил правки, казалось, что проблема решена (по крайней мере по тестируемому в тот момент примеру она решилась), а оказывается нет. Нелогичное поведение Firefox. Единственное решение, которое я пока вижу – не ставить первому пункту атрибут
selected
.В тонкостях JavaScript, к сожалению, не разбираюсь, поэтому не представляю, как это можно решить.
По-моему, нашел решение. Еще немного потестирую, чтобы убедиться, что все действительно правильно, и выложу новую версию.
Не работает плагин при использовании с плагином fancybox.
Делаю форму заказа.
popup – делаю через fancybox, внутри же элементы, среди которых
То есть, если использовать отдельно на странице все работает, если внутри fancybox то печалька((
Можете живой пример показать?
http://sprint.bildom.com/oxrana-kvartiryi.html на этой странице, вызов fancybox окна http://clip2net.com/clip/m86412/1358169268-clip-33kb.jpg
и вот там есть самый первый select.
А вот на этой странице http://sprint.bildom.com/novosti/ возле надписи “Архив новостей” плагин работает.
Скорее всего, в данном случае нужно вызов моего плагина делать после появления popup. Там, где у вас прописана инициализация fancybox с опциями, добавьте такой код:
Решил проблему подключением другого плагина для поп_апа.
Вот ссылка на ту же проблему у другого разработчика, может поможет понять в чем дело.
То что выше предлагали не помогло.
В коде, который я указал, нужно поменять
afterLoad
наbeforeShow
, и тогда все работает! Только что проверил.Спасибо, все правильно работает.
в моем случаи обновление плагина до 1.2.2 ничего не изменил(((
Новая версия для вас ничего и не должна была изменить. Я выше вам написал, что нужно сделать.
Выложил новую версию плагина – 1.2.2
Как ограничить количество пунктов выпадающего списка SELECT? А лучше всего выписать все возможные настройки для данного плагина выше вместе с описанием
Если я вас правильно понял, то нужно через CSS указать свойство
max-height
для.selectbox .dropdown
.Все настройки плагина указаны в статье. Их всего две в данный момент.
например настройка
visibleRows:5, и я вижу только 5 пунктов, а далее scrollbar-ом прокручиваем список или если не ставить тогда оно включается автоматом по достижению подвала браузера, т.е. чтобы я не задавал CSS-ом для .dropdown, а настройкой
Думаю, в будущем сделаю такую опцию.
Немного надо доработать, чтоб цеплял позицию width у самого select.
Чтоб длина самого бокса, совпадала с длиной выпадающего списка.
Не удобно прописывать.
Тем более, если учесть момент, что в данном случае, width самого бокса изменится, а длину выпадающего надо дописывать.
С одной стороны легче дописать ф-ю и не перегружать CSS.
Проще как раз через стили задать ширину, чем мудрить со скриптом, увеличивая его размер.
Добрый день. Делаю сайт с каталогом спортивных событий – вот ссылка. Пытаюсь подключить ваш код, но применяется он только для первого селекта из трех, комменты все прочитал, видел две подобных проблемыЮ не знаю помогли ли им ваши ответы, но мне не помогли.
Вызываю как вы и говорили код
Но как вы видите по ссылке выше, он срабатывает только для первого селекта. Можете подсказать ?
Не вижу на сайте ни одного селекта.
Извиняюсь :)
Вот ссылка http://pksport.ru/calendar
У вас используется старая версия jQuery (1.5.2), скорее всего в этом и причина.
Спасибо за плагин. У меня есть просьба к элементу с классом .selectbox прикрутить присвоение какого-нибудь класса .selected, когда .dropdown в значении display:block В стилизации селекта бы очень помогло.
Хорошо, добавлю в следующей версии.