jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Спасибо за скрипт.
Добавляю динамически в select пункты, после refresh(), в хроме нормально, в IE10 список выпадает после двойного нажатия, в IE8 после нажатия появляется и сразу исчезает.
Если создать обычный селект, то все нормально и в IE8
Сюрприз, однако. Спасибо, что сообщили, буду разбираться.
А как сделать destroy этому стайлеру есть ли такая функция?
Такой функции нет.
Добрый день,
А можно какой-либо пример на следующую ситуацию – 3 селекта. При выборе в одном добавляются пункты во втором, при выборе второго добавляются пункты в третьем. (страна, регион, город). Заранее спасибо.
После ajax-a слетает.
Группа select’ов, содержимое последующего зависит от выбора предыдущего. Подгружается через ajax. После подключения jQuery Form Styler селекты перестают обновляться.
В остальном плагин качественный и удобный в использовании.
Может показать пример, скажем, на jsfiddle.net?
Здравствуйте! Спасибо за плагин, очень пригодился.
Стилизую селект во всплывающем окне, которое может закрыться если щёлкнуть вне его границ. Проблема в том, что если в этом окне открыть стилизованный элемент, то при щелчке по всплывающему окну он не закроется, при щелчке вне границ — закроется окно. Как сделать так, чтобы при щелчке внутри окна селект закрывался? Спасибо.
Не знаю, в чем дело. Сделал пример, не наблюдаю такой проблемы.
В моей ситуации нет оверлея, т.е. щелчок сбрасывающий окно скорее всего цепляется на html. Видимо он как-то пересекается с вашим плагином.
Возможно. В таком случае я ничем не могу помочь.
У checkbox не срабатывает событие onclick, если отключаю $(‘input, select’).styler(); все норм…
Вместо onclick используйте onchange.
Добрый день, подключаю также как написано выше(http://prntscr.com/3ihfap) – но появляется сообщение http://prntscr.com/3ihepv – делаю на Mac ,убираю инициализацию http://prntscr.com/3ihf3r – сообщение не появляется, почему так?
Возможно, что либо интернет-подключение не активно, либо API Гугла на момент запроса было недоступно.
сам google работает , а api гугла не работатают в течение дня. Вы сами на mace проверяли?
Проверял, но только на виртуальной машине.
На IOS не работает.
Выпадающий список.
На iOS есть нативный выпадающий список.
Если radio-группа лежит вне тега form – не работает снятие состояния с элементов группы.
Для этого предусмотрена опция “wrapper”.
Дмитрий, добрый день.
При раскрытии списка, а затем клике по месту вне выпавшего списка callback onSelectClosed вызывается количество раз, зависящее от количества стилизованных элементов с помощью плагина. А При выборе из списка какого-либо пункта – лишь один раз. Так и задумано?
Нет, так не задумывалось, но я не знаю, как сделать правильно, к сожалению.
Багрепорт: при стилизации
<input type="file" multiple />
отображает название только последнего из выбранных файлов.Проверил в хроме и ФФ на маке, но, думаю, это должно быть видно во всех браузерах.
За скрипт спасибо:)
До этого момента я даже не знал, что файловые поля поддерживают множественный выбор.
Добрый день! Подскажите, в чем может быть проблема. Установил, все работает, только при загрузке страницы на секунду появляется нестилизованный список, только через секунду становится таким, каким он и должен быть с вашим плагином.
Дайте адрес страницы, где можно посмотреть вживую.
Пожалуйста, vremyahobby.ru
Скрипт применяется после загрузки всей страницы, на которую как раз и уходит эта секунда, поэтому наблюдается такой эффект. С этим ничего не сделать.
Спасибо за ответ!
Вроде эта проблема исчезла, но появилась другая. Кнопка селекта показывается всегда поверх выпадающего горизонтального меню. Я так понимаю в jquery.formstyler.css нужно править?
разобрался. в js файле вместо 100 прописал 1, все стало ОК!
singleSelectzIndex: ‘1’
Здравствуйте. Скажите пожалуйста как сделать, чтобы при выборе города из селекта сама вкладка с этим городом запоминалась? http://www.perevoz24.org/catalog/rubrics/uborka-musora&city=Белгород если ссылка вот такого типа в адресной строке, то сама вкладка соответственно должна быть Белгород. Помогите пожалуйста разобраться, в jQuery плохо шарю(((
Ещё заметил такую штуку, что при нажатии на первый пункт “Абакан”, перехода на страницу не происходит почему то.
У меня переходит.
Это делается с помощью PHP и к jQuery отношения не имеет, обращайтесь к своему программисту.
Выложил новую версию – 1.5.2.
А как можно заблокировать выполнение открывающего списка? Ну то есть к примеру – есть ajax и мне не надо что бы показывался список пока ajax не вернет результат?!
Список сам по себе не открывается, только по клику, поэтому я вас не понимаю.
Хороший плагин, но в ‘use strict’ mode много ошибок, в основном связанных со вложенным определением функций.
Проверь код с помощью jshint, увидишь кучу ошибок и варнингов.
Не удивительно, т.к. мои познания в нативном JavaScript почти нулевые. И я не знаю, что такое ‘use strict’ mode и jshint и как все это использовать.
=) Могу посоветовать использовать IDE PhpStorm, она синтаксис очень хорошо подсвечивает, и в ней есть встроенный jshint валидатор, который укажет на ошибки. А что такое use strict можно загуглить. Если заморочишься, уровень яваскрипта сильно подтянешь 100%.
IDE – не моя тема. Я использую Sublime Text, jshint к нему сейчас установил, use strict добавил, кучу ошибок вижу. Буду разбираться. Спасибо за наводку!
Разобрался со всеми ошибками, оказалось не так сложно =) Еще раз спасибо! Выложу в следующей версии.
В общем, проблема была с angular.
Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)
Не подскажите в какой строчке обработка события закрытие селекта при открытие другого селекта?
В этой:
Спасибо, за оперативный предыдущий ответ.
Можно селекту задать ширину 100%?
Вопрос снят, решил таким образом:
display: block вместо display: inline-block
Достаточно было добавить: