jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Вот, дополнил Вашу функцию для радиокнопки (пример был выше), чтобы при смене выбора менялся цвет текста (класс родителя) этого пункта, в след за отметкой…
Не уверен, что грамотно, но вроде работает:
Может быть есть лучше вариант? :)
Помогите пожалуйста. Пытаюсь разобраться с плагином но в ие7-9 не работает. Хочу подключить кастом селект. Опыта в подключении и настройки плагинов нет. В чем может быть ошибка. Прилагаю код:
Я уже задавал этот вопрос… Вот пример его решения… Т.е. селекты class=”styler” будут обрабатываться плагином, а все остальные настраивайте через свой CSS как Вам нравится…
Удачи! :)
Я не понимаю как эта ссылка относится к моему вопросу. У меня все селекты на странице должны быть стилизированые. Проблема моя состоит в другом:
Сам плагин у меня подключился во всех браузерах кроме ИЕ7-9. А мне нужна именно поддержка этих браузеров.
Вам для IE кастом селект нужен что ли?
IE7 и 9 нет под рукой, но в IE8 всё работает чётко (сам удивляюсь этому)… Смотрите html ваших страниц – возможно, с другими скриптами где-то есть конфликт…
В том то и дело. У меня только этот скрипт и подключен. Выше код – моего тега
БАГ при нескольких вложенных optgroup в optgroup – список превращается в непонятную кашу.
Почему вы решили, что один optgroup можно вкладывать в другой?
) да, прошу прощения, думал что можно..
Нужно сделать предупреждение только при выборе в мультиселекте, а при снятии выбора – нет. Вот такой код:
Везде работает, кроме IE (кстати, если даже отключить плагин, то даже Ваш пример не работает нормально – не передаётся значение)…
Может быть посоветуете другой вариант для обработки события?
http://jsbin.com/axahaw/1/edit
Спасибо Вам за красивое решение – именно то, что и задумывалось… Его и буду использовать… :)
Но только в IE8 плагин не пашет категорически… Не то чтобы сильно напряжно, но многие его ещё используют… Вот что пишет консоль:
Как-то так…
Пожалуйста.
Демо плагина у вас тоже в IE8 не работает?
Ну да, я именно об этом и говорю…
Не работает только мультиселект… Выдает вышеуказанную ошибку при попытке выбора любого пункта…
Ясно. Видимо, эта проблема возникла в одном из последних обновлений, до этого работало. Будут разбираться.
Абсолютно точно, т.к. до перехода на 1.9.1 все функции работали чётко на этом же браузере…
Устранил проблему. Выложил новую версию плагина. Спасибо, что сообщили об этом!
вопрос чайника для поле input[type=”text”] нужно вручную прописывать стиль styler то есть
пробовал
(function($) {
$(function() {
$(‘input, select, input[type=”text”]’).styler();
})
})(jQuery)
не помогает(
Для input[type=”text”] не нужно ничего прописывать в JS, он стилизуется при помощи обычного CSS.
Привет,
нужно вцепить selected на сам select при изменении, сейчас только на стилизированном селекте оно есть, а на елемент формы значение не пробрасывается.
Как это правильно сделать?
С какой целью это нужно?
Было бы круто если бы стилтзовались и текстовые элементы типа text и textarea, ну просто бордюром скругленным, чтобы не париться со стилями самому.
Они итак стилизуются, если указан класс
.styler
. В примерах же показано.Да извиняюсь, не доглядел.
У меня возникла другая проблема.
К некоторым элементам типа checkbox или radio прикручены события onclick, но после стилизации они не работают (почему понятно, ведь оригинальные элементы прячутся). Я проблему то конечно решил, но это костыль.
Было бы здорово, если бы плагин проверял наличие прикрученных событий и копировал их в стилизованные элементы (у меня есть корявый код стилизации элементов, который я писал давно давно, он как раз умел делать такое копирование, мог бы выслать если интересно).
Попробуйте использовать обработчик события change из jQuery, это не будет костылём.
Нет необходимости что-то добавлять в плагин, т.к. событие onclick можно перенести с оригинального элемента на псевдоэлемент, и результат будет тот же самый.
Прошу подсказать, как данный плагин подключить только к элементам с определенными id (кроме определенных id)?
Благодарю!
А возможно сделать так чтобы при динамическом изменении элеменотов формы стили так же применялись без использования триггера refresh? Как например через метод live
Насколько я понимаю, исходя из своего опыта, без триггера не выйдет. Этот триггер как раз и запускает метод
on
, который аналогиченlive
.Как изменять ширину Селект не в css
у меня на странице нужно несколько селектов с разной шириной, поэтому задание ширины в css для меня не подходит
если я задаю DIV размер в котором лежит select то он ни как не реагирует..
Каждому селекту добавьте свой класс и в каждом классе пропишите соответствующую ширину.
возможно ли в будущем задать ширину в опциях плагина??
а то создавать новые классы не очень рационально, ведь так дублируется куча стилей чтобы поменять только оно свойство, а потом если нужно будет изменить стиль то нужно будет бегать по всем классам менять..
А по опциям плагина не надо будет бегать? Перекладывать на плагин то, что делается простым CSS – глупость.
тогда предлагаю другой вариант чтобы select подстраивался по ширине к div в котором он лежит, тогда в стиле дива я задам ширину и буду знать что select будет иметь такую же ширину или высоту..
Зачем реализовывать через JS то, что можно сделать через CSS?
Чтобы получить то. что вам нужно, просто поправьте стили для .jq-selectbox .select, сделайте ему
и
В случае с box-sizing необходимо не забыть про вендорные префиксы, естественно:
пробовал ваш совет но нужного эффекта это не дает
select делается по ширине соддержимого а не div
Вот стили, которые нужно применить, чтобы селект растягивался на ширину родительского блока:
спасибо попробую)
столкнулся с такой проблемой я select создаю динамически с помощью jquery
и эти select остаются какими были и не трансформируются..
пробовал их обновлять
$(‘#idSelect’).trigger(‘refresh’);
но результат тотже, при этом select которые были приписаны в коде страницы успешно изменяются..
Думаю, что вызываете триггер не в том месте. Где можно посмотреть весь код?
весь код показать не могу(
(P.S. используется asp.NET)
вот функция в которой происходят действия.
Вроде бы все правильно. К сожалению, не знаю, в чем дело.
а можно пример когда создается динамически select и к нему применяется стилизация.
я бы тогда попробовал привести свой код к коду примера..
Я понял, в чем дело. Вы же создаете новый селект, а не изменяете существующий, поэтому вместо:
нужно:
огромное спасибо))))
теперь все заработало)))
заранее извиняюсь если мои предложения уже упоминались.
– было бы круто сделать поддержку иконок у selectbox (для выбора языка показывать иконку страны очень информативно)
– для сделать изменение значения стрелочками
Это и сейчас можно сделать. Пример:
Можно ли изменить цвет текса в
.jq-selectbox
после выбора любого пунктаТолько путем написания дополнительного скрипта, например:
Хороший плагин. Все нравится. Хотел бы спросить у вас совет, возможно ли это все в виде combobox запилить. Что бы у пользователя кроме выбора, была возможнь вводить свой текст?
Такую функцию не планирую.
Спасибо за работу! Пока посмотрел всё обзорно, не увидел у Вас конкретной информации о кроссбраузерности и решил бегло прогнать в разных версиях ИЕ. Одиночный селект, который у Вас в демо по JS алертом выводит значение – выводит результат только в ИЕ9+ :( Уже начинаю переживать, точно ли всё будет работать корректно на живом проекте… Попробую ещё. Всё-таки напишите, пожалуйста, в каких версиях браузеров обещаете корректную работу :)
В стандартном селекте (без плагина) все точно так же, это косяк IE.
Во всех популярных.
Спасибо за ответ! И всё-таки, про браузеры я не зря спросил… Вы поймите, что это нужная информация и она должна быть. Например, вот эти товарищи _http://uniformjs.com справа у себя написали, где тестировали. Для разработчика, который потом будет пользоваться плагином, это очень важно.
Плз, помогите – в интернет эксплорере не показывается как в других. Как то можно пофиксить до идентичности?
Разве что искать jQuery-плагин, который умеет это делать.
Например, этот – https://github.com/alexriz/jQuery.ins
Добрый вечер, есть форма в ней есть checkbox также сть конпка сбросить (input type=”reset”) , принажатие на неё checkbox не сбрасываются, в чем может быть проблема?
Скрипт не знает, что нажат reset. Нужно добавить что-то типа:
Приветствую. Хороший плагин!
Заметил два таких момента:
1) Нет стилизации полосы прокрутки в выпадающем списке селекта, а это порой необходимо. Т.е. получается не полный контроль над внешним видом.
2) При зажатии кнопки мыши на стилизованных элементах остается возможность выделения текста на странице. Стандартные элементы в этой ситуации отключают выделение текста. Да и просто это не очень красиво смотрится :)
Спасибо за красивый плагин! Использовал предыдущую версию на сайте “мастер-банк” в списке регионов
http://www.masterbank.ru/offices
Всё хорошо, красиво.
Единственный недочёт, это название класса text. Оно наслаивалось на стандартные классы. Пришлось немножко менять исходники.
Сейчас начал перерабатывать раздел с банкоматами. Там список побольше и с optgroup. Взял свежую библиотеку.
Но что-то не заработало в IE8. При развороте списка и попытки его скроллировать. он сразу же сворачивается. Без optgroup такая же лобуда. Пришлось вернуться к предыдущей версии, где такого не наблюдается, переделавть по виду disabled в optgroup.
В примерах к плагину такого не наблюдается.
Действительно, дело оказалось всё в том же, что у меня в вёрстке присутствует контейнер с классом text.
Переименовал всё в ваших исходниках на text_sel и список перестал сворачиваться.
Погорячился. Это в FF. В IE сворачивается.
Ладно, фиг с ним. Нет времени долго разбираться. Потом, если найду в чём глюк, отпишу.
Две библиотеки на одной странице отлично работают. Можно первую использовать только для select. Вторую для всего остального.
При переключении радиокнопок в обычно режиме срабатывает js, который выполняет определенные действия. Как это можно реализовать с помощью вашего плагина учитывая что радиокнопки не имеют постоянных значений типа name или id. Спасибо
Повесьте событие не на оригинальный элемент, а на псевдоэлемент.