jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Здравствуйте! Нужна помощь. Пытаюсь получить значение select’а через val(), в консоли выводится сначала значение, а потом undefined – http://take.ms/vwPqD
Пробую получить текст выбранного option( $(this).children().filter(‘:selected’).text() ) – сначала получаю значение, а потом пустую строку – http://take.ms/utHtr
Отключаю плагин и таких проблем не наблюдается. Подскажите пожалуйста в чем причина? Спасибо!
Возможно, где-то ошибка в ваших скриптах. Через val() у меня работает без проблем.
Нашел уже в чем проблема. Оказывается если селекту задать класс, то и к родительскому контейнеру(jq-selectbox) он тоже цепляется) Поэтому в скриптах надо явно задавать $(select.class)
Добрый день!
Подскажите, пожалуйста, как сделать раскрытие списка select на hover, а не при клике(по умолчанию)
В этой строке поменяйте
click
наhover
.Добрый день!
в файле jquery.formstyler.min.js jQuery Form Styler v2.0.0 такой строки не находится
Возьмите не минимизированную версию.
По поводу реализации через hover, он открывается только при наведении на селект, при этом если спускаться дальше в выпадающий список он скрывается, как пофиксить этот баг? К тому же в стилях выпадающего списка везде убрал отступ списка сверху (хотя мне он нужен в дальнейшем) а навести на него и выбрать нужное значение все равно не выходит.
Жаль input[type=range] нету (((
здравствуйте! подскажите, пожалуйста, как правильно подключить formstyler в webpack?
путь в пакете был указан неверно, так что я прописал алиас:
jquery сделан глобально через ProvidePlugin:
ошибка: Uncaught TypeError: $fs.styler is not a function
все прочие jquery-плагины работают нормально
Я в этом не разбираюсь, к сожалению.
Шикарно. Если у меня получится исправить – я скажу вам что нужно сделать, чтобы оно там заработало
Ну как успехи получилось подключить? Тоже столкнулся с подобной проблемой. Решения пока не нашел.
На крайний случай можно скачать файлы плагина, предложенные на этом сайте и поместить их в папку вне node_modules, после этого уже подключать плагин из нее.
Очень странно, но действительно так, если писать:
import from ‘jquery-form-styler/dist/jquery.formstyler’
то он не хочет работать никак, а если скопировать jquery.formstyler.js к себе в папку и оттуда подключить, то работает без проблем.
Привет. Использую форм стайлер для селектов, на айфоне при клике присваивается класс focused и на этом взаимодействие заканчивается, селект не открывается. В чем может быть причина, вижу я не первый кто с подобным столкнулся
Может кому пригодится, проблема была в том что я пытался изначально скрыть стандартный селект, что бы он не появлялся при загрузке страницы до обработки скриптом. Я делал display: none, а на iphone он как раз и отрабатывался, нужно делать opacity: 0 и все будет работать
Спасибо Роман ) та же самая проблема, ты очень помог )
Здравствуйте! Как при поиске по селекту сделать что бы группы не скрывались, если в группе есть хоть один подходящий результат? И как отключить поиск по названиям групп?
Ни то, ни другое не предусмотрено.
Здравствуйте, как подключить плагин к Prestashop 1,6 стандартная тема? подключаю выкидывает ошибку:
Failed to load resource: the server responded with a status of 404 (Not Found)
Не знаю, не знаком с Prestashop.
Судя по ошибке, вы не правильно указали путь к библиотеке.
Всё верно, неправильно был указан путь. Но к сожелению, плагин некорректно работает на Prestashop 1.6, а именно не стилизует option
Здравствуйте.
У меня тупой вопрос: какие файлы плагина и куда загружать на сервере?
Я загрузил два файла (jquery.formstyler.css и jquery.formstyler.min.js) из папки dist в папку jquery на сервере. И у меня ничего не работает.
У вас не написано в статье, что theme.css надо подключать. Подключил, вроде бы, всё работает.
Этот файл был добавлен недавно, и я забыл обновить статью. Спасибо, что сообщили! Исправлено.
Подскажите что надо задать что-бы сократить текст в “option”, как в “select” с точками?
Что-то типа этого (не проверял):
Сработало, огромное спасибо!
FixBugWithSelectFirstOptionForJqueryFormStyler(only for simple select).
Cуть бага в том, что не плагин не позволял выбрать 1 элемент из выпадающего списка.
Ловим все клики по элементам выпадающего списка:
Здравствуйте. При ограничении выпадающего списка селекта по высоте и прописания ему overflow-y: scroll, список опции не прокручивается колесом мыши, только за ползунок. Как-то можно изменить?
У меня это не воспроизводится.
Dimox, подскажите, почему select-ы не работают на мобильных устройствах? Даже у вас на демке если открыть в отладчике и обновить страницу – jq-selectbox__dropdown – всегда display:none
Читайте эту ветку.
Спасибо, проверил на устройстве – работает, однако не верно рассчитывается ширина окна выбора.
Помогло пока .jq-selectbox__dropdown{width:100% !important}
Dimox, есть возможность обновить значение data-placeholder динамически? Пробовал разные варианты – не работает. Например:
#js_get_obl – id селекта
Что я неправильно делаю? Заранее спасибо.
Вместо:
.attr('data-placeholder',"новое значение")
сделайте.data('placeholder', 'новое значение')
, и будет работать, только что проверил.Dimox, добрый день. Подскажите пожалуйста, почему при установке Вашего плагина через npm подтягивается только версия 1.7.5, тогда как актуальная 2.0.1. Планируете ли вы актуализировать пакет в репозитории? Это было бы очень удобно, спасибо.
В npm последняя версия – 2.0.1. Не знаю, почему может подключаться старая.
Спасибо за полезный плагин!
Скажите пожалуйста есть ли возможность у input type=”number” сделать так чтобы количество не уходило в минус?
Есть, используйте параметр
min
.Точно) Сразу не заметил что средний в примере с параметрами)
Спасибо!
Здравствуйте. Этот плагин работает на девайсах? В эмуляторе браузера – селект не открывается. ошибки в консоле нет.
Работает.
Здравствуйте. Вопрос такой.
Когда смотришь через эмулятор Google, то селект не открывается (display:block не ставится dropdown). Чтобы это увидеть, надо открыть эмулятор и страницу обновить.
На iOS когда открываешь – отрабатывает стандартный селект системы. Можно ли как-то сделать так, чтобы открывался стилизованный?
Нельзя, потому что неизвестно, как скрыть стандартный селект.
Привет, а как можно сделать добавить в селект чекбоксы или радио кнопки? я по разному пробовал и все никак не подучилось
Такой возможности нет.
Привет, подскажите, как можно скрыть 1 элемент в селекте? что бы в выпадающем списке от не отображался , а в самом селекте был? http://joxi.ru/Rmz1EabhW7pkXr http://joxi.ru/v29a3EXSGX7v32
Если я правильно понял, то используйте плейсхолдер. На странице с примерами это “Селект с замещающим текстом”.
Добрый день!
Dimox, проверьте на странице с примерами “Селект с шириной 200 пикселей, имеющий пункт с длинным текстом” – это третий сверху пример:
http://dimox.github.io/jQueryFormStyler/demo/#select
Если кликать на самом селекте – все нормально, но если кликнуть справа от него, то появляется нативный выпадающий список.
Как это побороть – к селектору “.jq-selectbox select” нужно добавить “width: 100%”
По идее при абсолютном позиционировании достаточно было бы и того, что сейчас: left: 0; right: 0;
Но получается, что без “width: 100%” селект вылазит за границы родительского блока.
И огромнейшее спасибо за плагин!
Спасибо, что сообщили! Исправлю.