jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
обнаружено 2 бага в версии 1.6.1
1) Селект с замещающим текстом (placeholder)
если кликнуть на селект и нажать на любую клавишу на клавиатуре, то текст плейсхолдера пропадает
строка 682
2) Если селект находится внизу страницы, то scrollTop у “.jq-selectbox__dropdown ul” тоже прокручен вниз и первых элементов не видно.
Чтобы это проследить нужно страницу прокрутить вниз, скролл поместить за 200px от низа браузера (добавить побольше option-в чтобы скрол был у списка)
у себя на сайте это исправил так:
onSelectOpened: function() {
var ul = $(this).find(‘ul’);
setTimeout(function(){ul.scrollTop(0)},1);
}
PS классный плагин, спасибо
Здравствуйте Dimox спасибо большое за плагин
Но есть проблема и непонимаю вообще как в таком плагине она может присутствовать, если инспектировать код то checked не ставится, ставится класс оболочке но checked не ставится, как так? в safari я инспектором проверял и в мозиле так же через файрбаг, подскажите пожалуйста в чем дело?
checked добавляется с помощью метода .prop(), при котором состояние элемента фактически меняется, но атрибут в html-код при этом не добавляется. И это вовсе не проблема, а особенность метода.
вы волшебник!
А есть ли деструктор?
Нет, не смог его сделать.
Добрый день, Dimox!
Скачал ваш плагин, хотел использовать на своем проекте. Но не могу понять почему у меня не работают радио. Не переключается в одного на другой.
Пример моего кода http://jsfiddle.net/wnesx8hw/2/
У вас отсутствует тег form, поэтому нужно через опцию wrapper указать общий родитель для радиокнопок.
Спасибо!
Уже голову сломал – почему так происходит???
http://i.imgur.com/LOBA3Su.png
Видимо, селект находится в теге с
overflow: hidden
.Спасибо, вроде разобрался… Этот overflow меня постоянно в ступор вводит))) Только теперь другая проблема, как сделать, что бы пункты в dropdown не переносились на другую строку? Пробовал nowrap и другие – не помогает… Уже и не знаю что ещё можно. Подскажите )
http://i.imgur.com/tWP27ch.png
Со стилями, прилагаемыми к плагину, ничего не переносится. Может быть, стили вашего сайта на это повлияли.
Перечитал все сообщения с первой страницы, но, так и не нашел ответа на свой вопрос.
Суть проблемы: при выборе Страны, во втором селекте не отображаеются Регионы/Области.
Вот как они отображаются:
Пробовал подключить Ваш плагин вот так:
Не получается… Подскажите решение.
Спасибо.
Прошу прощения, почему то код не вставился))
Вот так делаю:
А причем тут selectbox?
Выбрав в одном селекте Страну, во втором автоматически отображаются Области/Регионы в ней. При подключении данного плагина – событие onchange пропадает.
Поправьте в чем ошибка.
Уважаемый Dimox, подскажите КАК мне два связанных селекта “подружить”?
Очень нуна (мой код выше – в сообщении #1704)
Уже как только не пробовал:
Ума не приложу…
http://i.imgur.com/cGWUUmX.png
Вы подключаете какой-то другой плагин:
У моего
.styler()
.Да, все верно. Только это Ваш плагин, который изначально был только для селекта. Пробую сделать и на этом – всё тоже самое… Я не могу понять )) КАК мне связать два селекта между собой?
Вы можете показать рабочий пример? У Вас его даже на демо нет..
Я Вам конечно могу помочь, только это возможно исключительно вечером
да помогите уже хоть кто нибудь))) Столько провозился, всё сделал и стили настроил – и только в конце заметил что на странице регистрации (при выборе страны) регионы/области – вообще не отображаются
скриншот
Буду благодарен на Я.Д. по цене чашке кофа))
P.S.
Всё проделывается на чистом OpenCart, версии 1.5.6.4
напишите вечером, все выясним , ну или скайп farit091
В комментарии №1708 вы указали правильный код. Только использовать нужно этот плагин, а не старый.
В общем, я отказался от этого плагина. Не знаю почему но со связанными (зависимыми) селектбоксами от работать отказывается. Тогда как, со всем остальным всё прекрасно работает.. Очень жаль, что никто не смог помочь((
Вы просто не правильно используете.
Вы используете старый плагин, а Вам нужно скачать новую версию с этого сайта, далее
заменить на
Подскажите почему может не работать селект в iPhone. Не раскрывается просто. Display block и z-index не добавляются. В десктопе и на адройде все ок.
Сделано специально, потому что там открывается нативный выпадающий список.
Здравствуйте! Вопрос по производительности. Имею на странице примерно 30 селектов, в которых около 1000 значений. Их стилизация занимает 4-5 секунд, что совсем не годится. Возможно ли что-то сделать чтобы загрузка происходила быстрее? Если нет, то не подскажете ли более простые плагины с ограниченным функционалом (интересует изменение цвета опшенов, указание через css работает не во всех браузерах)? Спасибо
Мой плагин не рассчитан на такие нагрузки. К сожалению, я не умею оптимизировать подобные вещи. Альтернатив не знаю.
Ясно, спасибо
Доброго времени суток, подскажите пожалуйста как быть –
у меня есть оригинальный скрипт системы:
после того как застилил формы, скрипт не отрабатывает :(
самостоятельно бился два дня и ничего не вышло, подскажите пожалуйста как быть?
Вместо:
сделайте:
Приветствую, скринт не стилизирует select с multiple, те при включениии multiple, в окне со списком просто появляются стрелочки, а выпадающего списка нет, как при использовании без multiple, как быть то?
Что-то не то делаете. У мультиселекта нет выпадающего списка. Посмотрите, как он выглядит на странице примеров.
Dimox
С мультиселектом разобрался, появилась новая проблема, у меня сайт на движке DLE, и в нём используются доп поля, а так же установлен загрузчик фото и файлов из доп полей (модуль), так вот при подключении скрипта
Не работает загрузчик фото, не открывается окно загрузки
Вряд ли я чем-то тут смогу помочь.
если кто-то вдруг захочет использовать данный плагин в rails:
Используем плагин через rails-assets.org, который подружит bower плагин с bundler (кстати, у тебя какой-то не кошерный bower.json)
Gemfile:
Подключаем в application.js сам файл:
И всё :)
Какой мне прислали шаблон (кто-то просил добавить этот файл), такой и сделал.
Здравствуйте.
Плагин отличный, все супер. Вот только столкнулся с проблемой. У меня в селекте присутствует onclick в option
Который при выборе производителя ведет на его страницу.
А данный плагин не поддерживает данное свойство. Можно ли как-то дописать его, чтобы он onclick прибавлял в li. Например
Можно сделать следующим образом:
Не тестировал, но по идее должно работать.
Вот такой скрипт сработал
Добрый вечер, есть небольшая проблема, а именно не передаются аттрибуты data-* у option. Есть следующий код:
при таком формате аттрибут data-value не передастся в li, после запуска styler, а вот если убрать обертку из optgroup – то data-value передастся… Подскажите – это я не правильно что-то делаю или баг плагина?
Это недоработка в плагине. Я забыл добавить соответствующий код для данного случая. В следующей версии будет исправлено. Спасибо, что сообщили.
Нужно всего лишь заменить эту строку:
на такую:
Возможно отвечали, но все же – как принудительно сделать открывание вверх. У меня селект в футере и сам он не хочет вверх открываться.
Спасибо.
Такого варианта нет. Смотрите опцию selectSmartPositioning.
пример : Селект с шириной 200 пикселей, имеющий пункт с длинным текстом.
не могу понять как сделать ширину дропдайна динамичной относительно самого широкого пункта, когда селект имеет заданную ширину.
пишу как в примере
— Выберите —
Пункт 1
Пункт 2
Какой-то пункт с очень-очень-очень длинным-длинным-длинным текстом
Пункт 4
Пункт 5
css:
.jq-selectbox.width-200 {
width: 200px;
}
но дропдаун всё равно шириной как задан селект 200px
В примере этот селект отображается, как положено, так что не знаю, в чем у вас проблема.
Подскажите пожалуйста, как стилизовать динамический select?
В статье показан пример для чекбокса. Для селекта – по аналогии.