jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Прекрасный плагин, единственное не хватает в select множественного выбора без shift то есть галочками как на Avito например
По поводу iOS нужно в строке if(iOS) написать if(iOS){$(“select”).attr(“data-native-menu”,”false”);}
Стандартный select отключается, а стилизированный работает, и еще для .jq-selectbox.jqselect добавить display:block!important;
Не знаю есть такое в этом плагине или нет. На мобилках есть свое оформления выпадалки селекта , модалы, думаю понимаете о чем я , так вот есть тут возможность на мобилах оставлять возможность найтив выпадалок, но при этом оформить его , ну и плюс на декстопах чтоб осталось так как есть.
cry((
Возможно ли производить какое-либо действие при выборе даже активного пункта меню? Сейчас сделал через колбэк закрытия, но это работает, если кликнуть не пункт меню, а на странице вне, что неправильно, так как по сути ничего не выбирали повторно
Нельзя, т.к. в селекте при этом ничего не меняется.
При ините на несколько радио кнопок с одинаковым неймом разрешает чекнуть все инпуты одновременно…
Страница с примерами к плагину этого не подтверждает.
Напиши пожалуйста гайд о том, как можно модифицировать ширину и высоту и цвет поменять…
Привет, Dimox. Спасибо за такой полезный плагин, использовал его неоднократно. Я хотел бы спросить, если вариант только для кастомизации селектов. Те же методы, классы, но с урезанным функционалом только для селектов?
Нет.
Скажите есть ли функция выбора всех чекбоксов на странице?
Есть.
Спасибо!
Огромное спасибо вам за публикацию. На своем проекте как раз необходимо применить стилизацию select ов. Возник вопрос. Я подключаю скрипт к сайту на drupal 7. В файле page–user–%.tpl.php перед вставил так
При перезагрузке страницы один select нормально изменился так как он с классом .form-select но
теперь возникает проблема так как я использую модуль hierarchical_select и при клике на элемент select открывается еще один select и к нему уже не подключается скрипт и как бы оба селекта принимают стандартный вид.
Можете подсказать как мне правильно подключить скрипт в таком случае?
Ничем не могу помочь. Нужно ковырять ваш модуль, который работает с селектами.
В плагине нашлось много багов, один из них описан по ссылке: http://oliwlife.ru/works/libris/formstyler_bug/description.jpg
Вот чистая демонстрация бага без сторонних стилей и js: http://oliwlife.ru/works/libris/formstyler_bug/
Бывают и другие ситуации когда не выводит текст внутри бокса. Что очень печалит
Если Вы решаете использовать ли этот плагин сначала проверьте исправлен ли этот баг. Если нет то лучше обойти плагин стороной!
А в чем собственно баг? У меня указанная страница открывается нормально и всё отрабатывает как нужно. Если вы про последний селект так у него просто не указан класс “select” на который вы цепляетесь в скрипте.
Я же описала его тут http://oliwlife.ru/works/libris/formstyler_bug/description.jpg
Попробуйте откройте http://oliwlife.ru/works/libris/formstyler_bug/ потом перейдите на любую другую ссылку, а потом используя кнопку назад (к примеру в хроме) перейдите обратно на страницу http://oliwlife.ru/works/libris/formstyler_bug/. Это очень важно использовать кнопку “назад”, так как именно при её использовании некоторые селекты пустые, какие именно у меня в описании рассказывается.
Селект Я последний оставила для более ясной демонстрации бага.
Использую styler для select внутри дилогового окна JQuery UI.
Инициализируется нормально, только при открытии окна объект выпадающего списка уезжает за горизонт события. Вверх с контейнера диалогового окна, да так, что только хвостик виден в верхней части диалога. Что-то вероятно происходит с позиционированием блока.
Инициализация после открытия диалога и trigger не помогают. Не подскажете что может быть и как это обойти? И есть ли какие-либо особенности использования внутри диалогов?
Вопрос на миллион.
Сайт вешается по-дикому если в селекте много пунктов (у меня в селекте города России ~700 пунктов). Даже на топовых банках браузер выкидывает сообщение, что “слишком долгая обработка, может до свидания?”
Есть какой-то вариант решения проблемы?
К сожалению, нет.
А разбить на два разных селекта Регион – Город, динамически подгружаемых?
Сжечь биомед
День добрый!
Есть ли возможность реализовать в вашем плагине для пунктов селекта (и не только) вставлять произвольный html?
Либо какой-нибудь другой способ в пункты селекта вставить иконки (например, при помощи иконочных шрифтов fontawesome). Часто требуется для полей сортировки и тп.
HTML нельзя. Иконки можно добавить через классы. На демо-странице есть пример с флагами.
Добрый день!
Никак не могу понять почему у меня не срабатывает аттрибут selectSmartPositioning так, чтобы список выпадал только вниз. Он вообще у меня на всём сайте неправильно отрабатывает – только вверх во всех случаях независимо от расположения селекта.
Могу только предположить, что на это влияют другие скрипты.
Не баг. Скорее недоработка.
При таком раскладе, если блок раскрытого списка превышает видимую часть родителя, он уходит за скролл. При позиционировании fixed проблема решается, но пришлось немного лезть в код.
Имеется ли возможность с select вытягивать события которые хранятся в options?
Нет.
Потребовалось в зависимости от выбора пользователя в одном select’е, прятать/показывать некоторые пункты в другом select’е. Но
Игнорируется. Выводятся все пункты, даже спрятанные.
Решил проблему использовав “disabled” и пару строчек CSS
У меня 2 проблемы, помогите пожалуйста http://joxi.ru/LmG31PbhRMVdwm :
1. Не знаю почему, но никак не получается заставить выпадать список вниз – он всегда выпадает вверх, независимо от опций плагина и от положения на экране.
2. Добавил элементу select класс, который ограничивает длину в 200px, но выбранный длинный текст некрасиво вылезает за рамки селекта.
По скриншоту причины не выяснить.
По первому пункту: такой сдвиг вверх происходит по всему сайту независимо от страницы, от положения селекта и других факторов.
Что может так влиять на него?
К сожалению, не представляю. На странице примеров подобного не наблюдается.
колбэк onFormStyled не вызывается после select.trigger(‘refresh’); то есть плагин срабатывает заново перестраивает все, но не запускает колбэк; Или так и должно? Пришлось везде где refresh есть копировать функцию из колбека…
Да, он запускается только при первой инициализации.
Это не дело)) надо бы поправить. Или добавить колбэк на refresh. Очень помогло бы людям.
Здравствуйте.
При стилизации плагином динамических select`ов не работает зависимый select.
При отключении плагина все работает.
Как возможно решить данную проблему?
Добавляет пункты в зависимый select след код:
Непонятна суть проблемы. Что значит “не работает”?
То-есть указанный скрипт не может добавить в зависимый селект новые пункты, как будто он не видим для скрипта. При отключении плагина все нормально.
Возможно, дело в отсутствии
.trigger('refresh')
после изменения селекта.Не подскажите куда его вставить? так как я не очень разбираюсь в jquery
спасибо большое, заработало.
Пожалуйста, подскажите, что дает такая конструкция:
(function($) {
$(function() {
…
});
})(jQuery)
ведь по идее можно было обойтись просто
$(function() {});
подразумевается что в анонимной функции будут использоваться переменные или это для чего-то другого?
Уже и не помню, почему так. Видимо, где-то была такая рекомендация.