![jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)](https://dimox.name/wp-content/themes/dimox.name/cache/d0/6a66efe39766dd0_150x100.png)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...
Комментарии (2 614)
Добрый день! В последней версии Вашего плагина есть проблема с radio-button. Конкретно, если есть список радио-кнопок, то можно все радио-кнопки выделить как checked.Т. е. с предыдущего статус активности не удаляется.
Взял отсюда же отдельный плагин для радио-кнопок — с ним все работает нормально, в той же ситуации.
Используйте опцию
wrapper, и проблемы не будет.Выложил новую версию — 1.6.
Вы бы загрузили свой скрипт на скриптовые облака… jsdelivr и cdnjs. Очень круто было бы загружать скрипт оттуда, а не со своего хостинга.
На jsdelivr он уже есть.
А как перехватить click при нажатии на select? Я пробовал вешать обработчик и на обертку и на сам селект (вешал через .on ('click', function (){…})), но ничего не выходит.
Клик происходит только на псевдоселекте, поэтому на нем и нужно отлавливать.
Добрый день.
Подскажите, можно ли как-нибудь выловить событие потери фокуса стилизованным селектом?
Фокус получает оригинальный селект, поэтому только так:
Спасибо. Вдруг будет нужно… Если сам селект display: none; (при том что стилизация видна), то blur не сработает, надо сначала сделать видимым скрытый селект.
Хоть выше и писали, но мне никак не удается отследить нажатие на на псевдо селект.
Например так
Никак не работает, подскажите пожалуйста как отслеживать изменения, в идеале сразу и атрибут value узнавать у option’ов. Заранее спасибо!
Если вам нужно отслеживать изменение селекта, тогда так:
Получение значения селекта:
Спасибо большое!
Оказывается мой вариант обработчика не работал потому что предварительно его нужно было заключить в обработчик который сначала проверяет загружен ли документ.
Можно ли принудительно раскрывать select вверх?
Такой возможности нет.
Может кому нибудь пригодится.
Строка 530
Тем селектам которые надо открывать вверх, добавляем класс «top».
Добрый день, подскажите —
Если пользователь выбрал одно из значений селекта — можно ли как-то сделать его не активным? Чтобы пользователь не смог снова выбрать это значение?
Можно. Пример.
К сожалению — по ссылке которую вы указали — 404 ошибка
Теперь должна открываться.
Не открывается. По-прежнему 404
Тогда так — jsfiddle.net/Dimox/5n4ktb0s/1/
Добрый день!
Подскажите, а если форма загружается динамически. Как ее стилизовать?
Запускайте. styler () после кода загрузки формы.
Доброго времени Вам.
Помогите пожалуйста решить задачу. Имеем чекбокс, при клике по которому остальные чекбоксы выделяются.
Проблема заключается в том. что не могу отловить сам клик по чекбоксу при подключенном вашем плагине.
Вот так отлавливается:
Подскажите пожалуйста — как сделать — чтобы после выбора значения с переходом на другую страницу (ссылка в value) в select — в selecte оставалось выбранное значение? Заранее благодарен!
Это делается на PHP добавлением атрибута «selected» соответствующему option. К плагину это отношения не имеет.
Понял, но надо не к конкретному option — а к любому который был выбран.
Dimox, благодарю вас за решение проблемы с отслеживанием клика по чекбоксу. Искал по click , а надо было по change :)
Столкнулся с проблемой небольшой.
Имеем список select, формируется на PHP.
На выходе имеем ширину выпадающего списка в 20px, что существенно меньше. скрин
Подозреваю, что прогружается сайтлер раньше, чем генерируется выпадающий список, но может и неправ. В какую сторону копать?
Такое может быть, если псевдоселект имел display: none или находился в теге с display: none.
диз и настройки одинаковы для нескольких селектов на разных страницах, проблема только с этим. Пока закомментировал в вашем коде строки добавления ширины :)
Спасибо за прекрасный плагин!
Привет. Хочу поблагодарить автора, спасибо за такой отличный плагин. Но есть одна проблема, которую совсем не давно обнаружил, нельзя выбрать один и тот же элемент несколько раз в теге . На моем сайте при добавления кода в комментарий, можно выбрать подсветку синтаксиса, например я выбрал php, второй раз я уже не могу выбрать этот пункт. Срочно нужно решение, очень не хочется отказываться от этого плагина, так как он отлично встал на моем сайте, и очень хорошо подошел под дизайн bootstrap.
В плане дизайна мне очень понравился, тем что его легко можно стилизовать, вот например что у меня получилось http://joxi.ru/0KAgM0vku64dml
Нут. е. можно внешний вид в точности повторить как был в макете! Что очень радует. Спасибо автору!)
Скажите пожалуйста кошель вебмани любой, хочется выразить благодарность.
Можно ли убрать всплывающую подсказку у input поля выбора файла? По умолчанию подсказка отображает имя выбранного файла или текст «Файл не выбран».
Можно. Вот решение:
Спасибо!
Уже достало… Хороший плагин с богатыми возможностями, как говорится то, что нужно. Но уважаемые создатели нужно было бы объяснить и привести примеры кода, как отлавливать те или иные события… Или каждый должен догадываться, проводить эксперименты…
Я вод никак не могу отловить в одиночном селекте значениt выбранного option, тот код, что здесь в обсуждении $('select').val (); срабатывает только при загрузке страницы и все, а что же дальше.
Написано используйте псевдоселекты ну так дайте примеры покажите, как это работает. Если плагин нарушает методы отлова событий, то наверное нужно показать и дать примеры, как это делать.
То, что вы описали, недостаточно, чтобы понять суть вашей проблемы.
Проблема такова. Мне нужно получить значение выбранного селекта. К примеру есть такой код:
Уже пробовал по разному, но не получается отловить и получить значение выбранного пункта option.
На этот код реакция есть, то есть по клику к примеру по «Даше Васильевой» возвращает 0, также, как и по «Васе Иванову» тоже 0. При этом ноль возвращается только при первом клике, при последующих выборах никакой реакции.
Пробовал, как здесь советуют
Результат такой же один раз 0 и до свидания.
Хотелось бы получить объяснения, как правильно отловить события и получить значение при чем не единожды, ведь пользователь может передумать к примеру и выбрать другой пункт, сохранять последний выбор в переменную и при отправке формы уже им пользоваться (обрабатывать)
Правильно будет так:
Псевдоселект — это всего лишь эмуляция, все события нужно отлавливать на оригинальном селекте.
Большое спасибо за помощь! А псевдоселект… Ваш же ответ и прочитал)
«Dimox5 дней назад (ответ на коммент Ivan)
Клик происходит только на псевдоселекте, поэтому на нем и нужно отлавливать.
Это касается только клика.
Админ, ты не хочешь ответить на 1466 пост?
Игорь вы подробней опишите проблему, а то мне не совсем понятно, что за ситуация, админ может тоже не может понять, чего Вы хотите. Вот у Вас например написано, что если один раз выбрали подсветку второй раз уже не можете выбрать ее же, а зачем если она уже выбрана?
Ну так если не понятно, можно было бы и переспросить, я ведь жду.
Ну как зачем? А если человек захочет вставить два кода одного языка? Например вставит один код, напишет какой то текст и нужно вставить второй код. И что бы вставить второй код нужно переключится на другую подсветку, стереть то что добавилось в textarea и снова переключится на нужную подсветку. Ну это уж правда очень не удобно. Выбор происходит через select.
Ну так код нужно смотреть, как и что делается. Почему не выбирается второй раз? Не открывается список или открывается выбирается, но не происходит событие? Или открывается список, но не выбирается нужный пункт? Покажите код, как реализуете.
Все отлично открывается, но при повторном нажатии ничего не происходит, нажал = select закрылся, в форму ничего не добавилось. При отключенном плагине все работает. Да показывать собственно нечего, простой select и 6 option.
Фнкция
Все просто. Событие onchange срабатывает только в том случае, когда меняется выбранный option. А при повторном клике на уже выбранный option, как в вашем случае, событие onchange не происходит.
Вместо селекта сделайте кнопки для каждого пункта.