jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Решил тут обновить с версии 1.3.8
и вылезло несколько проблем
1) почему-то все селекты стали display:block, т.е несколько на одном уровне не расположишь (решается через css)
2) в селекте проблема с короткими значениями, например 10,15,20,25, их не видно, раньше такой проблемы не было
1) Если ширина указана в процентах, то да, он становится блоком.
2) Не понял, о чем речь.
http://iceimg.com/NRLsxGUQ/screenshot-2014-01-27-001.png
попробуйте, странно выглядит, правда? )
Нужно указать ширину.
ну так это неудобно же, без плагина же нормально показываются. У меня в системе например эти селекты через макросы создаются, я не знаю какая им там ширина нужна и какие там значения будут
Буду полностью переделывать формирование ширины селекта. Нагородил огородов, в итоге самому не нравится.
будем ждать ) плагин очень нужный
А как сделать комбобокс
Комбинированный список
Смотрите опции плагина.
Вы не поняли не поиск по опшенам.
Сочетание выпадающего списка (раскрывающегося при щелчке мыши) и однострочного текстового поля, которое позволяет пользователю ввести значение вручную или выбрать из списка.
В моем плагине такой возможности нет.
Жаль, хороший плагин. Спасибо.
А есть в планах добавить такую возможность?
Не представляю даже, для чего такое может понадобиться. Ни разу не встречал комбобоксы.
Объединяет сразу 2 поля. Поле город в форме.
Нужно чтобы пользователь мог добавить свой город если его нету в списке, или выбрать если есть.
Кстати в JQueryUi есть такая штука http://jqueryui.com/autocomplete/#combobox
у меня по-чему то все содержимое прячется, http://cs607919.vk.me/v607919585/f64/YAHHXqlk8zs.jpg (скрин)
почему, не подскажете? и как это можна по править?
По скриншоту не определить причину.
Видимо у одного из родителей стоит overflow: hidden;
Вопрос – если у select style=’display:none;’ – после применения Вашего плагина – он станивится видимым …. как побороть?
Как вариант – поместите селект в тег со своим классом, которому задайте display:none.
сработало :)
И еще – Ваш плагин не работает если на сайте используется FancyBox – есть идеи как побороть?
Нет. Нужно тестировать.
Если не критично используйте колорбокс, с ним прекрасно работает
плагин прекрасный, но есть одна не очень приятная особенность, хотелось бы каким-нибудь доп элементом убирать файл из input[type=file], если человек передумал. И еще, если выбрать файл, а потом еще раз нажать выбор файла и отменить, placeholder пропадает.
уже подредактировал плагин, но все равно, можно было бы пару строк для удобства дописать. Еще раз спасибо за плагин)
Спасибо. Уже нашел решение. В следующей версии будет исправлено.
Выложил новую версию (1.4.8).
Доброго дня! Есть ли возможность настроить ваш чудесный плагин таким образом, что бы селект всегда выпадал только вниз, независимо от положения на старнице? Сейчас до середины видимой области страницы селект выкидывает список вверх, без поля поиска, а находясь ниже середины, вниз, что лучше настроить (в моем случае) по умолчанию.
Спасибо.
Для этого предусмотрена опция
selectSmartPositioning
.Кстати, selectSmartPositioning:’false’ я прописал, но изменений не последовало,
использую вот на этой http://autozapchasti64.ru/zakaz/ странице.
На будущее, подскажите, что не так я делаю с selectSmartPositioning ?
Пока ограничился правкой css (максимальную длину списка сократил)
false нужно писать без кавычек.
да, спасибо, все от невнимательности и безграмотности)))
теперь, конечно, работает)
Обращался с вопросом о селекте выпадающем вверх (хотел настроить что бы выпадал только вниз)- вопрос снят. Просто изменил максимальную высоту ul в jq-selectbox__dropdown, и, для мох целей, все отлично. Спасибо. Очень все гибко.
Уважаемый автор. Этим плагином пользуюсь еще со времен его отдельного существования плагина для селектов. Частенько приходилось немного его править под свои нужды (часть того что я когда то делал уже реализована в плагине). Но вот почему вы решаете какой должен быть элемент(block или inline-block). Переназначить можно только через important. Было бы хорошо чтобы вы сделали просто дополнительный цсс файл где прописали эти стили и их с легкостью можно было менять.
Я делаю так потому, что оригинальный элемент тоже inline-block.
Я полностью согласен. Но у нас же не оригинальный селект :)
к примеру если нужно изменить свойства оригинального селекта:
В вашем же случае:
Зато плагин работает из коробки и можно сразу его стилизовать. А то есть плагины к которым не подключил цсс и все, что то делать с элементами проблемно.
Спасибо за прекрасный плагин. Раньше он подглючивал на iPad, открывалась два меню (на сайте и на iPad), но сегодня обновился и все стало на 5+. Спасибо Вам!
У меня отказывается работать Ваш селектор. Это из-за ajax. Как побороть?
Вот тут.
Забыл добавить, что здесь Radio неправильно работают.
Тут уже кто-то писал, но я понятия не имею, куда это прописывать и решит ли это мою проблему. Может кто-то подсказать?
Используйте опцию плагина
wrapper
, т.к. у вас Radio не в теге form.На счет селекта ничем не могу помочь.
Подскажите, есть ли возможность анимировано переключать чекбоксы, пробовал с transition и background-position что-то не выходит)
Не знаю, как это можно сделать.
Ширина select(а именно .jq-selectbox__select-text) рассчитывается по первому option, поэтому длинные option превращаются в три точки … Даже если указывать класс с шириной больше чем самый длинный option, все равно три точки. Но такое не всегда, иногда все нормально. И у Вас в примере тоже все ок, как так?
Странное дело. Почему-то оказалось, что это зависит от количества символов. Например, если вместо “упак.” указать “упак1.” (т.е. на 1 символ больше), то проблема устраняется.
В общем, буду разбираться, почему так.
ну по хорошему можно туда прикрутить массив, который будет отбирать ширину option по самому длинному.
Так и сделано, но, как видим, в некоторых случаях почему-то не срабатывает. Где-то ошибка в расчетах.
Ошибку исправил. Выложил новую версию плагина.
jQuery Form Styler v1.3.8.1
На сайте запускается так:
Но необходимо чтобы один селект оставался обычным.
Вариант с инициализацией по одному не подходит, на странице может быть разное количество селектов и только на определенной, один селект нужно оставить стандартным.
через if lj,fdbnm не стилизированному селекту класс
Сделайте так:
http://iceimg.com/NaQ4d_VV/screenshot-2014-02-19-001.png
просто применен шрифт OpenSans, и уже не лезет
Какую версию используете?
1.4.8.1
нажатие enter переключает чекбоксы, так не должно быть
В Опере 12 это нативное поведение.
не знаю как в опере, но у меня в фоксе переключает
да и есть сейчас специально проверил в опере – не переключает
вот видео в опере 12
http://taskme.littlebyte.co/uploads/projects/57/bc/57bc7e17fdaec7b11ff81c24e9e9d703ef37ff961394028550.avi
получается когда я жму энтер, у меня снимается галка, и форма уходит без галки, хотя галка была отмечена
убрал энтер в итоге сам. Это ненативное поведение в любом браузере и ломает логику форм вообще
Объясните плз никак не могу понять
есть 4 тега селект:
Задаю в css епрвым двум ширину 400px а вторым двух 600px
Но ширина не менятеся, как исправить?чтобы у первых 2-ух была 400 а вторых двух 600 пикселей
Сори я имел ввиду ширина не меняется даже если так
Почему?? браузер хром
Добрый день Dimox.
Пожалуйста помогите.
У меня на странице фильтры которые обновляются на ajax.
И получается так что после обновления чекбоксы и радио кнопки становятся простыми, как можно сделать что бы они постоянно обновлялись. Движок prestashop.
Пробовал сделать вот так:
Не сработало
.trigger('refresh')
не должен быть внутри.styler()
.