jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Выложил новую версию плагина – 1.5.5.
А как разным селектам на странице присвоить разные placeholder? Например для селектов с классами class1, class2, class3.
Вопрос снимается. Не внимательно прочитал инструкции.
А как открыть селект с помощью JS?
Делаю связанные селекты… по автомобилям производитель->год->модель
Ответ дан тут.
Если заполнить data-placeholder у select-а и нет пустого тега option, то текста-подсказки “Выберите..” нет. Хотя логически должно быть.
Не должно. В нестилизованном селекте по умолчанию видно значение 1-й опции, в плагине используется тот же принцип.
Плохо что нет поддержки IE7. Можно как-то заставить IE7 использовать стандартное оформление?
какой смысл внедрять поддержку браузера, которому 8 лет?
Иногда заказчики просят поддержку IE7. Нужно предоставить хотя бы рабочую форму на IE7
версия 1.5.5
строка №634 “.bind(‘keydown.styler keyup.styler’, function(e) { ” про изменение селекта с клавиатуры.
если в строке убрать keyup.styler, то “открываем выпадающий список при нажатии Space” будет работать
и проблема закрытия селекта сразу после открытия, будет решена.
И можно смело раскомментировать строку
“// divSelect.click();”
но тогда появились проблемы с листанием в нераскрывшемся селекте пунктов и + еще проблемы.
Поэтому раскрытие селекта при нажатии на пробел вынес отдельно на нажатие клавиши.
В итоге получилось так:
Большое спасибо за подсказку! Теперь понятно, в чем была причина =) В следующей версии исправлю.
Очень понравился Ваш плагин но не хватает поиска и выбора в мультиселекте.
Скажите, будет ли осуществлена возможность поиска в мультиселекте и выбора пунктов.
Выбор пунктов можно сделать как здесь, вот только удалять выбранные пункты не backspace & del, а сделать крестик: http://plugins.jquery.com/selectize/
PS: смотрите в демо.
Пока не планирую.
А может все таки? Думаю это не так долго реализовать. И тогда равных Вашему плагину не будет.
хм, а как бы на андроиде вызвать нативный селект, мультиселект выбрать невозможно
Что означает фраза “мультиселект выбрать невозможно”?
непонятно как выбрать несколько пунктов одновременно
Ясно. Что-то я на это совсем не обратил внимание и не протестировал. Значит придется на Андроиде сделать вывод нативного мультиселекта. Видимо, это будет в следующей версии плагина.
Выложил новую версию – 1.5.6.
Здравствуйте.
Спасибо за работу и поддержку данного плагина.
Столкнулся с небольшой проблемой
(скрин удобного объяснения проблемы http://prntscr.com/4l644z ).
Уменьшив правый падинг с 45px на 25px, ширина выпадающего списка теперь не правильно высчитывается. Есть ли решение этой проблемы?
Ширина выпадающего списка все равно учитывает правый падинг 45px и тем самым выходит за рамки верхнего блока.
Буду весьма признателен на любой ваш ответ, за ранение благодарен.
Для меня это сюрприз. Странно, что данная величина так влияет на изменение ширины. Возможно, где-то ошибка в расчетах, буду разбираться в свободное время.
Хочу добавить, что эта проблема не касается последней версии, это наблюдалось и в остальных версиях.
Большое спасибо, непременно буду ждать результатов. Спасибо.
Вроде бы нашел решение. Нужно удалить эту строку:
Да, действительно теперь все ок. Большое спасибо.
Отлично, пожалуйста. В следующей версии внесу это изменение.
Заметил небольшой глюк, скорее всего не срабатывает триггер(срабатывает только один раз) – в следующем коде: $(this).attr(“checked”, true).trigger(‘refresh’), хотя в самом input атрибут задается, зато с (“checked”, false) срабатывает всегда.
для наглядности – http://zina-korzina.ru/test/zina_basket_histori_zacazov_Final.html
Возможно, причина в том, что используете
.attr()
, правильнее – использовать.prop()
.помогло, спасибо!
А вот интересно, это только у меня следующая проблема?
Предположим есть селект с множеством опций. Их количество такое, что для того чтобы выбрать нужную необходимо перемотать список. Т.е. опция в самом низу и ее позиция вне видимого диапазона при открытии списка. Так вот, если на Android выбирать эту опцию, то выбирается совсем другая, та которая находится на этом месте при открытии списка. Т.е. браузер не понимает, что список перематывается и выбирает то, что было на месте тапа до перемотки. Проверял на Galaxy Tab 10.1
Можно как-то нативный выбор предлагать при раскрытии списка для Android устройств?
Только что проверил в Андроиде на демо-странице плагина – ничего подобно не наблюдаю, что длинный, что короткий список – все работает замечательно.
В каком браузере проверяли?
Чтобы сделать нативный, найдите эти строки:
и замените на такие:
Да, на более поздних моделях устройств эта проблема отсутствует.
У проблемной таблетки браузер AndroidBrowser 4.0
Он ко всем позиционированным блокам с перемоткой так относится.
После внесения изменений в плагин при клике на оболочку селекта нативный выбор опций на устройстве не открывается. =(
Тогда по-другому. Замените строку:
на:
Да, так список работает, но и сами селекты не стилизуются. =)
Только так, по-другому не знаю, как.
Просьба, если это возможно, когда срабатывает умное позиционирование для селекта (когда список появляется над ним) добавлять какой-то класс к контейнеру .jq-selectbox. top например. Это нужно для усовершенствования стилизации. Например скругленные края только в нижней части выпадающего списка, а когда список выше, то скругляются верхние края.
Хорошо, в следующей версии добавлю.
У меня получилась очень странная вещь. У меня на сайте много разных элементов на jQuery. Подключил и Ваш. Все работает. Но если сейчас отключить файл jquery.formstyler.min.js, то перестают работать карусели и аккордионы установленные ранее и прекрасно ранее работающие. Не подскажете почему так получается?
Не представляю, не сталкивался с подобным.
консоль откройте и посмотрите в чем проблема. Наверняка используете какие-то методы плагина, отключив его
Наверняка из-за отсутствия проверки на существование функции
или просто не удалили в коде где вызывается $(‘input, select’).styler();
Большое спасибо Фарит и Вадим! Удалять то я удалял $(‘input, select’).styler();, да вот файл со скриптом брался из кэша браузера – спасибо, что напомнили про консоль.
Приветствую, у вашего плагина случаем нет такой возможности чтобы не затрагивать определенные блоки по id или еще как нибудь..?
Конечно есть. Пример:
Добрый день. Подскажите пожалуйста, возможно ли динамически через JS изменять текст selectPlaceholder для селекта? На форме есть два зависимых селекта “Страна-Производитель”. Для селектов указан тег data-placeholder=”All” и в каждом по дефолту пустой All. При выборе страны из первого селекта, если Ajax-запрос вернул пустой результат, во вотором селекте нужно текст “All” плейсхолдера поменять на “No Items”. Уже перепробывал менять через attr(“data-placeholder”, “No Items”), добавлением пустого No Items, trigger(‘refresh’) вконце, но всеравно плейсхолдер не меняется. Пробовал изменять через JS сам текст в All, но jquery по селектору $(“.”jq-selectbox__select-text.placeholder”) возвращает вовсе не этот елемент. Спасибо
Вот так работает, только что протестировал:
Спасибо Вам огромное, работает!
Добрый вечер!
Пользовался раньше версией 1.4.9. Вчера обновился до 1.5.6 из-за плейсхолдера и обнаружил, что стилизованные чекбоксы перестали наследовать дата-атрибуты. В истории изменений по плагину ничего такого не заметил. Откатился до старой версии, потому что на дата-атрибутах у меня многое завязано.
Спасибо, что сообщили. В следующей версии исправлю.
Здравствуйте, пользуюсь вашим плагином, довольно крутая штука, вот только возникли загвоздки с полем input=’radio’ , а именно не убираются состояние checked при клике на input=’radio’, в чем может быть проблема?
Без живого примера ничего не могу сказать.
проблема может бональной, имена разные)) Возможно Вы переопределяете функцию .change(), если это так) Как правильно было замеченно, нужен пример
а нет стилей написанных для препроцессора?:)
Я препроцессорами не пользуюсь. Из сторонних знаю только эти:
https://github.com/talgautb/jFSS
https://github.com/pafnuty/jQueryFormStyler/tree/master/less
Да, кстати, недавно обновил :)
Если актуально могу набросать и на sass/scss ;)
сделал нормально с демкой и через форк)
Какая-то проблема с selectPlaceholder. Если его значение не задано и не указан атрибут data-placeholder, то по умолчанию выводится “Выберите…”, а первый пункт из селекта вообще не доступен. Как сделать, не задавая этих атрибутов, чтоб по умолчанию уже был выбран первый пункт селекта?
Добавьте пустой data-placeholder.
В таком случае селект изначально отображается пустым, без выбранных пунктов (а хотелось бы, чтоб указывался первый пункт, без задания для каждого селекта своего атрибута). При этом нельзя выбрать первый пункт, только начиная со второго. После того, как выбрали второй пункт, уже становится доступным для выбора первый пункт.
Что-то странное вы описываете. Такого не должно быть, и у меня такого не наблюдается. Покажите живой пример с проблемой.
Плейсхолдер отображается только в случае, если первая опция пустая. В ином случае отображается первая опция. На странице примеров показаны оба эти варианта.
Вот, можно тут посмотреть http://93.91.118.16/ Под главным заголовком два селекта.
Причина в том, что у вас пустое значение value у option:
Нужно сделать либо так:
либо так:
Спасибо! Теперь все работает.