jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Здравствуйте, так и не разобрался, как применить стайлер к динамически созданному элементу? Точнее при такой реализации второй и следующие селекты не выпадают:
$(‘#add_position’).click (function() {
var block = $(this).prev(‘.one_position’);
block.clone().insertAfter(block);
});
Клонируйте только тег select, и затем к нему применяйте styler().
Dimox, у меня select не клонируется! Я в Jquery не сильна, но как не пытаюсь клонировать, ничего не получается. Пыталась select запихать в div, этот div клонируется, но select в нем не работает, а чистый select вообще не клонируется. Что я делаю не так? Демо тут https://jsfiddle.net/moireceptik/73a5frxw/
Вы не учитываете, что клонируемый селект уже стилизован и обернут в теги.
Решение – https://jsfiddle.net/73a5frxw/7/
Круто! Спасибо огромное!!!
Пожалуйста =)
А если использовать более сложную конструкцию – с использованием списков ul>li, где нужно клонировать последний LI полностью и добавлять этот клон в UL (пример: https://jsfiddle.net/moireceptik/8desqfxL/) – как такое можно сделать? Там же не обратишься напрямую к select.select:first…
Такое у меня не получается сделать.
проводите операции непосредственно с select хоть через тот же .append(html), а потом делайте .trigger(‘refresh’);
Спасибо за подсказку, в глубине души я подозревала что только так и придется делать))) Но надеялась что есть какое то более правильное решение, и не такое замороченное. Попробую сотворить это чудо…
Большой спасибо за плагин, пользуюсь уже несколько лет! На сегодня замечена только 1 проблема – селекты не раскрываются в safari на ios (просто ничего не происходит по нажатию на него). Есть ли решение этого?
Короче в скрипте есть проверка на браузер и если он IOSовский, то функция завершается без выполнения. Отключил эту проверку и все заработало, правда теперь не понятно где вылезет боком эта правка )
а боком, похоже вылезет на старой iOs, где селекты перекрываются нативной выпадайкой.
Если исключить поддержку старого сафари, то все должно быть нормально.
А если селект скрыть под display: none!important; тогда ж по идее должно работать. Сложно прогнозировать конечно.
Как-то так
Не подскажите как именно отключить эту проверку?
Привет. есть возможность отключить плагин для определённого элемента. например для select включить, для multi-select выключить? также предлагаю добавить вот такую возможность https://www.jqueryscript.net/form/Select-Replacement-Plugin-jQuery-Selectator.html возможность мультивыбора в виде тегов.
Добавьте к селектам, которые хотите стилизовать, отдельные классы и через них подключайте плагин.
Понял, спасибо))
Появилась проблема на iPad в fancybox 3. Селект в датапикере юишном. Открываю селект, фокус переходит на первый инпут в попапе а сам селект закрывается и датапикер висит. такое только на яблоке. Что-то не могу понять в чем проблема
Новая версия в некоторых IOS вообще перестала работать (я про селекты). Раньше хотя бы без стилизации хоть как-то работало (стандартный список селекта для ios открывался)
Ребят подскажите как можно сделать подобного рода select или input пока еще не разобрался
https://cdn.discordapp.com/attachments/371824836948787202/488988204033245186/demAnd_chart.png
Добрый день! Проблема с селектом в модальном окне. когда вызываю модальное окно ни чего не работает. С этим как бороться? спасибо
У меня такая же проблема, никак не могу решить её! у вас получилось решить?
в select если включено поле поиска по списку, то не работает листание списка с клавиатуры (UP/DOWN). как можно исправить?
у меня такая ошибка http://prntscr.com/kwakip
ни как не могу решить её, кто то может помочь?
Добрый день, мне понадобилось вывести более сложную структуру в
в виде
не знаю как добавить скрин, так что временный http://prntscr.com/l2gdkk
и это невозможно
Но так получилось что на проекте уже был плагин и я немного немного модифицировал select
получилось примерно так
и модифицировал jquery.formstyler
примерно 550 строка – формирование псевдоселекта
примерно 820 строка – изменение селекта
тут все тоже самое.
Писал на коленке, так как сдавать проект. Мне этого хватило что бы удовлетворить заказчика.
Может кому поможет
ДЕЙСТВУЙТЕ НА СВОЙ СТРАХ И РИСК, ЕСЛИ НЕ ПОНИМАЕТЕ ЧТО ТУТ ТО НАЙДИТЕ ТОГО КТО ПОНИМАЕТ.
Висит на checkbox обработчик
если без плагина – то
elem – собственно чекбокс
в обработчике будет true
если с плагином то будет false
иными словами
обычный чекбокс в момент обработчика клика – уже переключил свое состояние
а плагин – нет
что не очень приятно
Так и не поняла как он работает с input[type=’number’] . Все подключила как в описании. Ничего не поменялось.
Дмитрий, нужна ваша помощь.
Пытаюсь реализовать адаптивные вкладки, которые на мобиле будут отображаться в виде стилизованного select (используя ваш скрипт конечно). Идея такая – на desktop отображаем обычные вкладки, на мобиле – вместо вкладок показываем select. Вкладки и select должны быть взаимосвязаны – при активной вкладке №3, select тоже должен отображать название вкладки №3 и наоборот.
Мои действия:
1. На просторах интернета взяла скрипт вкладок, которые уже привязаны к select и работает взаимосвязь.
2. Подключила к select ваш скрипт. Демо – https://jsfiddle.net/moireceptik/q8uyhj7t/
Проблема:
Взаимосвязь вкладок и select пропала (если кликать по select – видно как активная вкладка меняется, а вот если кликать по вкладкам – select не меняется на нужный номер)!
Нужно внести изменения в скрипт, чтобы вернуть взаимосвязь. Сможете помочь?
PS. Наверняка такие адаптивные вкладки заинтересуют многих верстальщиков, но готового варианта (со стилизацией select) пока еще нет в инете, а он так необходим на сегодняшний день!
Замените строку:
на эту:
Большое вам спасибо! Все получилось!
Добрый день.
Стилизовал select через плагин. Возник такой вопрос:
Когда кликаю по селекту на мобиле iOS, происходит стандартное поведение выбора опций (карусель внизу) – все ок.
Когда кликаю по селекту на мобиле Android, появляется стилизованный список (мне нужно попап окно с прокруткой, как при не стилизованном стелекте). Подскажите, как можно исправить?
Добавил в jquery.formstyler.js после
строку
При клике на селект на андроиде стилизованный список пропал, но нативный список так и не появился…Может есть какое решение, подскажите.
Здравствуйте!
На странице одиночный select с атрибутом data-search=”true”. По выбору происходит перезагрузка страницы с учетом выбранного (фильтр ajax post).
Так вот при выборе из списка элемента происходит перезагрузка страницы с указанной опцией из select. В консоле post выглядит так: filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=%2B7%20(XXX)%20177%207181.
Но если воспользоваться поиском по select и выбрать элемент, то post выглядит уже так: filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=0
filter_date=&filter_status=0&filter_meneger=0&filter_ist=0&filter_tel=%2B7%20(XXX)%20374%203472.
Т.е. при поиске он берет предыдущий выбранный пункт, соответсвенно фильтр не срабатывает на выбранный пункт. Это у меня такой глюк или так и должно быть?
Всем привет! Вопрос такого плана.
Использую jquery datepicker ui.
Хочу закастомить селекты выбора месяца и года.
У datepicker’а есть опция beforeShow тип которой функция с параметрами ( Element, Object ).
В api datepicker’а написано примерно следующее:
https://api.jqueryui.com/datepicker/#option-beforeShow
Когда инициализирую datepicker, опции beforeShow передаю свою функцию dpSelectStyler
Это выглядит следующим образом
Пробовал return inst.dpDiv.find(‘select’).styler();
Пробовал эту функцию не выносить в отдельную и записать прямо после beforeShow:
Результатов пока не добился. Не хватает JS скилла.
Может кто сталкивался? В какую сторону смотреть?
Спасибо!
На данный момент пришел к такому варианту, однако при смене месяца, из за новых инициализациий видно, как плагин разваливается, и собирается повторно.
Есть проблема с отображением контролов, если они изначально скрыты (к примеру в скрытой форме попапа, которая показывается после нажатия какой-то кнопки).
Так вот, если вызывать активацию плагина для скрытых элементов, то скрипт неправильно считает их высоту. Используется jquery функция outerHeight(), которая при скрытых элементах возвращает 0. И в итоге имеем косяки со стилями выпадающих списков и мультиселект вообще нулевой высоты. Два часа искал причину..
используйте .trigger(‘refresh’); после показа попапа.
Здравствуйте. У меня такой вопрос:
Есть несколько селектов и их нужно стилизовать по разному, возможно ли это реализовать?
Да, добавьте с select уникальный класс, или к родителю, от него и пляшите
Здраствуйте. У меня не получаеться получить значение селекта при обработке на стороне сервера. Задал для селекта поле name но не получаеться. Можете подсказать?