jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Добрый день! Большое спасибо за плагин! А планируется ли реализация поддержки браузеров на мобильных телефонах, либо есть ли какой то способ включить поддержку мобильных устройств? Дело в том, что я хотел бы использовать ваш благин в мобильной версии сайта. Особенно мне нравится функция поиска по списку в селектах. У меня есть один селект где порядка 75 пунктов, и поиск по этим пунктам очень удобная функция, но она к сожалению работает только через браузер компьютера, при заходе через браузер мобильного, например через Safari на iOS, селект работает как стандартный селект, а именно jq-selectbox__dropdown не отображается, а открывается стандартный способ выбора пункта селекта как если бы плагин не был использован.
Не нужно обобщать мобильные устройства, потому что такая ситуация только в iOS.
Дело в том, что я не знаю, каким образом в iOS спрятать стандартный выпадающий список, поэтому я его спрятал у стилизованного селекта, чтобы не дублировалось.
Если найду решение, то конечно же сделаю, как положено.
Было бы удобно если селектам добавлять классы по тому как они открываются вверх или вниз.
Для чего это может быть нужно?
Собственно для оформления, вчера как раз допиливал эти классы, чтобы сделать вот такое. Если открывается вверх, то и стрелочка должна быть под выпадающим списком.
Столкнулся с проблемой, что при назначении свойств селекту
плагин не подхватывает их. Посоветуете ли как победить?
Делайте вот так:
По отлову позиционирования можно ориентироваться на атрибут style, как вариант.
Таким способом не срабатывает
Вместо false поставьте true.
При первом срабатывании ($var = 1) все нормально и селект становится disabled, при первом срабатывании ($var != 1) тоже все ок и он становится активным, но при повторном срабатывании ($var = 1) disabled применяется только к селекту, но не добавляется класс disabled к div.jq-selectbox
Да, с этим есть косяк в текущей версии плагина. Когда я внес изменения, связанные с утечкой памяти, данный момент поломался. Поэтому рекомендую пока использовать версию 1.5.1.
Здравствуйте.
Решил попробовать поработать с Вашим плагином. Все отлично. За исключением одного момента. У меня на сайте два селекта (к примеру). Делаею выбор в первом, аяксом посылаю запрос, получаю ответ и вставляю внутрь второго селекта. Т.е. формирую для второго селекта динамически.
После получения ответа и вставки во строй селект использую триггер refresh:
Но почему то обновляет значение только один раз. Второй уже не отрабатывает. НЕ подскажете в какую сторону копать?
Спасибо.
Посмотрите комментарий № 1151.
Спасибо. С версией 1,5,1 все завелось как надо. Благодарю.
Выложил новую версию – 1.5.3.
Сложно сформулировать проблему, но на 1.5.3 перестал работать ajax, повешенный на
$(document).on(‘change’, ‘select.parent’, function (evt)
На 1.5.1 не работает input[type=file] multiple, на 1.5.2 не работает .trigger(‘refresh’), на 1.5.3 не отрабатывается on(‘change’).
Сейчас попробую как-то собрать из трех один:)
Можете выложить пример на jsfiddle.net?
http://jsfiddle.net/RGX24/
Даже console.log молчал.
Заменил в 1.5.1 кусок из 1.5.3, отвечающий за стилизацию input[type=file] multiple – все работает.
Вот так всегда – одно исправляешь, другое ломается. Видимо, придется откатывать назад =(
Нашел причину. Нужно поменять (в версии 1.5.3)
el.trigger('change.styler');
наel.change();
Также, возможно, стоит обратно поменять
el.trigger('focus.styler');
наel.focus();
.Выложил новую версию – 1.5.3.1.
плохо что нельзя отстилизовать мультиселектор как на ютюбе, когда видео загрузишь, начинаешь вводишь он предлагает выбрать из уже имеющихся, если нет совпадений, нажимаешь интер и это слово закрепляется в поле и так можно выбрать несколько
Здравствуйте. Спасибо за отличный скрипт. Когда при развернутом списке нажимаешь кнопки вверх или вниз, он не прокручивается. В вашем примере это видно: http://dimox.github.io/jQueryFormStyler/demo/#select – “Селект с группировкой пунктов” (воспроизводится в FF23, Chrome, IE8). Также, если у селекта есть поиск, эти клавиши нефункциональны, потому что фокус всегда стоит на поле поиска.
У меня в любом браузере прокручивается. Не знаю, почему у вас не работает.
Уберу фокус в следующей версии.
Возможно, мы о разных вещах говорим, вот скриншот: http://hostingkartinok.com/show-image.php?id=9e2b3f0928d380ea7d1274c8fa14b81d
Если сейчас нажать клавишу “вниз”, выделение сдвинется, а ползунок по красной стрелке – нет. То есть сдвиг выделения сработает, а самой прокрутки не будет как в стандартных select-ах.
Да, я про другое подумал. Раньше работало. Значит буду разбираться. Спасибо, что сообщили.
Здравствуйте!
Отличный плагин! Но есть вопрос: как использовать 2 селекта на одной странице с разным стилями?
Кстати, можно еще стилизовать ползунок в селекте, а то что-то в разных браузерах он разный, в вин вообще не очень с скроллом((
на будущее, подумай)
Непросто это сделать, поэтому не буду. Могут появиться лишние проблемы.
Выложил новую версию – 1.5.3.2.
Извиняюсь за немного нуюовский вопрос, но не могу решить задачку..
Имеется форма отправляемая по технологии ajax без перезагрузки страницы:
После того, как форма отправлена и получен результат ошибка или успех, пропадает обертка от select. Т.е. пропадает стилизация списка. Пытался использовать refresh , но результата не добился. Если не трудно, подскажите как с этим бороться.
Этой информации недостаточно, чтобы выяснить причину.
Спасибо, изобрел костыль в виде инициализации
в блоке
ajax запроса. Не знаю, на сколько это будет верно, но работает.
Столкнулся с такой проблемой, если селект находится на скрытой форме, то он (div.jq-selectbox__dropdown) не имеет ограничения по высоте, что крайне не удобно при количестве элементов 150+
Можно это как то исправить?
Высота выпадающего списка рассчитывается лишь тогда, когда псевдоселект видим. Поэтому, чтобы это работало, нельзя его скрывать через display: none. Найдите другой способ скрытия селекта, например, поместите в div в с нулевой высотой и overflow: hidden, либо что-нибудь подобное. Хотя я не уверен, что при этом все будет в порядке.
Dimox, интересный момент.
Можно стилизовать, а потом скрыть, наподобие:
И тогда обычный код с переключением блоков с стилизованными input’ами работает нормально.
Задайте вашему начальному селекту id.
Пример
После обработки вашего селекта плагином на выходе id обертки селекта будет primer-styler.
После этого можно принудительно задать нужную высоту средствами css исключительно для этого списка.
Да, тоже вариант.
Возникает проблема когда в select options с одинаковыми названиями. Он перестает реагировать на change
Зачем нужны две одинаковые опции?
В смысле?
фанера
-2х2
-3х3
картон
-2х2
-3х3
Понял, в следующей версии будет исправлено.
Возникла такая проблема..
Нужно вывести радиокнопки через маркированный список.
После стилизации они работают каждая по себе, а не в группе.
Не в курсе как это исправить?
Используйте опцию
wrapper
.А не подскажете как правильно пользоваться этой опцией? Судя по всему плагин управляет группой кнопок внутри блока с
, но у меня изменений нет.
Большое спасибо )
http://cdn.joxi.ru/uploads/prod/2014/06/16/f2a/b6d/7a6e395d652b89461d9b0d8c92ff5f27dfa8f7b4.jpg
При таком раскладе не хватает места для строки. Скрол перекрывает последние буквы
Попытаюсь исправить.
Есть ли возможность стилизовать чекбоксы и радиобоксы по своему?
Предлложенные Вами не устраивают дизайнера. А картинки у вас формируются как то странно, не могу найти, где их менять
Конечно можно. Все оформление меняется через CSS. В файле jquery.formstyler.css названия классов вполне понятные, и картинок там нет.
if (selCloneWidth == selectbox.width()) {
//divText.width(liWidth2);
liWidth1 += selectbox.find(‘div.jq-selectbox__trigger’).width();
}
Стоит убрать из скрипта эту непонятную конструкцию которая лишь портит ширину селекта магическим образом.
Нельзя, селект по умолчанию должен иметь ширину самого широкого пункта. На странице примеров на втором селекте (Селект без заданной ширины, имеющий пункт с длинным текстом) можно увидеть разницу при отключении этой строки.
я могу на своем сайте показать 2 примера где абсолютно одинаковые 2 селекта, но в разном окружении блоков, выглядят из за этой строки по разному. Убрав ее я добился верного отображения.
Покажите.
Нашел в чем баг с этим параметром!
Когда у нас название опшена меньше чем ширина селекта у нас прописывается фиксированная ширина класса (jq-selectbox__select-text) по самому длинному названию.
Далее если выберешь самое длинное название(Категория прайса) в списке и обновишь страницу (делать нужно в ФФ, он запоминает выбранный элемент из прошлого запроса) то ты увидишь что фиксированная ширина не установилась и наш селект ведет себя как должен, всегда подстраивается под самое длинное название.
Если мы хотим от этого уйти то нам лишь необходимо задать размер селекта
.jq-selectbox.(class-select) {width: 100px}
То есть убрав //divText.width(liWidth2); мы добиваемся большей гибкости чем с ней. Наш селект всегда будет подстраиваться под длинное название, если это не нужно, то задаем ширину и наслаждаемся
Я сделал по аналогии с поведением стандартного селекта, ширина которого по-умолчанию равна ширине самого длинного пункта. Так что убирать эту строку из плагина я не буду.
Замечательный плагин – но если элемент select использовать в модальном окне(jq dialog) – то “умная компоновка” выпадающего списка не работает(т.к. расчет координат ведется не от модального, а от основного окна). Подскажите пожалуйста решение.
Здравствуйте.
Ерунда какая-то. Последняя версия плагина, на страницу приходят аяксом radio
Прописал:
Тишина, ничего не происходит. jQuery(‘.ch2’).css({‘border’:’1px solid #FF0000′}); добавлен специально чтобы посмотреть отрабатывает ли таймаут. Ставил 1,5,1 – то же самое.
На селекте отрабатывает прекрасно.
Сделал так:
Алерта нет. Значит не вызывается refresh?
С аякса приходит:
Обновляю так: jQuery(‘.ch2’).trigger(‘refresh’);
В данном случае вместо
.trigger('refresh')
нужно запускать.styler()
.Спасибо, Dimox
Доброго дня! Помогите пожалуйста чайнику… никак не могу разобрать. Virtuemart 2.6 + Joomla 2.5.20.
http://stroyprom.by/myshop/front-page/otdelochnye-materialy/gipsokarton-profilja.html
Пытаюсь стилизовать select модуля Virtuemart 2 Multiple Customfields Filter 2 и привести его к общему знаменателю с выпадающим списком “Название товара +/-” (над товарами категории).
перед тегом добавил:
не работает. что-то нужно еще сделать? нашел файл, который отвечает за генерацию формы:
подскажите что нужно еще сделать плз. Спасибо.
Поручите это дело тому, кто разберется в вашем коде. У вас там черт ногу сломит. Плагин подключен аж 3 раза, причем разные версии.