jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Пробовал код с шапки:
Как можно сделать для всех элементов обновление? Или же при добавлении класса, тоесть любой вариант
Dimox извиняюсь, но я мало чего понимаю в jquery.
Можете написать полный код. И мне надо обновлять не
Пробовал вот так
Непонятно, что вы хотите сделать.
У меня интернет-магазин и есть радио и чекбокс кнопки в фильтрах, вот мне и их надо изменить.
План ваш я поставил, он заработал. При первом заходе в каталог ваш плагин все кнопки стилизует но после применения фильтром все кнопки становятся обычными. Вот это мне и надо решить.
В общем надо как то обновлять чекбоксы и радио кнопки
Где-то в вашем скрипте после кода фильтра нужно запускать
.trigger('refresh')
, как я показал в комментарии выше.Запускайте рефреш после обновления аяксом, как то для селектов такое делал
Извиняюсь в предыдущим Коментарии опечатался
ширина псевдоселекта не хочет меняться
Что я не так делаю?
И еще этот css файл с моими настройками должен быть до jquery.formstyler.css или после?
пробовал и так и так все равно ширина не меняется
Не знаю. У меня этот код работает корректно. Я проверил.
Не имеет значения.
сработало после того как прописал вместо id class
но почему не работает когда мы пишем так
???
Dimox помоги пожалуйста куда вставить:
$(‘input, select’).trigger(‘refresh’);
Уже куда только не ставил.
Этот код отвечает за фильтрацию
[вырезано, слишком большой код]
Я не смогу в этом разобраться. Обращайтесь к тому, кто писал этот скрипт.
Подскажите, можно ли в этом плагине в селекте – выпадающий ul обернeть в див
Например так
Надо кросбраузерно несколько фоновых картинок вставить
А как мне получить значение выбраного поля?
вот например есть селект
допустим я выбрал запись 2
пишу после клика на форму alert($(“.sel”).val())
Выводиться пустота
Так и делается. Где-то значит ошибку допустили.
Всё равно не работает…после того как отключаю плагин, работает норм, как влючаю всегда пустоту выдает
Заработало!! НО
только после того как я сделал вот так alert($(«.sel :selected»).val())
Почему???
Скажите зачем у
скриптом ставится?
Для того, чтобы не допустить вылезания оригинального чекбокса за пределы псевдочекбокса. Иначе могут быть случаи, что, если кликнуть в нескольких пикселях вокруг псевдочекбокса, произойдет переключение, чего быть не должно.
Почему не должно быть? Чем это так плохо? Все же кликают на лейбл а не на сам чекбокс.
В случаях когда нужно чтобы галка чекбокса вылезала за родителя придется перебивать импортантом или править скрипт.
Мне конечно нетрудно поправить, но не проще это перенести в css?
Добрый день.
Большое спасибо вам за ваш труд!
Я использовал ваш плагин для стилизации селектов (там обсуждение закрыто)
Заметил, что он работает не должным образом на версиях jquery выше 1.8.2 (внешне все ок, но при заборе значения value после нескольких переключений возникает “замыкание” на первом опшионе)
Не знаю, относится ли это к данному плагину, но все равно хочу спросить – может быть вы знаете как исправить, чтобы он работал и на свежем jQuery
В начале той статьи все четко написано.
Подскажите пожалуйста, на 1 форме задействую несколько select
Скажите плз как определяется ширина этого блока? она ставится автоматом?
дело в том что у меня ширина этого блока почему то больше чем ширина блока
мне нужно чтобы
вообще не было..как это сделать?
И еще ширину я устанавливаю сам, может из за этого??
Ширина расчитывается исходя из длинны опшенов. Если она не заданна.
В старых версиях псевдо селект принимал ширину оригинального селекта, и это было круто. В последних версиях ширина задается непосредственно псевдо селекту.
Черт как тут редактровать комменты
правильно так
Ширина блока .jq-selectbox__select-text ставится автоматически в зависимости от ширины самого длинного пункта.
На ie7 клик по псевдо чекбоксу не срабатывает. Хотя клик по лейблу срабатывает. Незнаю почему возможно оригинальный инпут перекрывает. Как это исправить?
Давно пора забыть про IE7.
Рад бы да никак. Особенно для корпоративного сектора.
Если там до сих пор используют IE7, нужно увольнять админа к чёртовой бабушке ))
IE7-8 устарели и все уважающие себя разработчики на них уже давно забили…
google вообще уже и IE9 считает устаревшим.
При изменении значения селекта событие срабатывает два раза. первый раз возвращает правильное значение второй раз $(this).val() возвращает пустое значение. Никаких дополнительных функций для плагина не увидел. (например change: function(){}). Вот такая проблемка
пришлось применить такой костыль.
Так лучше
Не наблюдаю у себя такой проблемы.
А какой нибудь callback есть?
Отсутствует.
жаль, если будет свободное время добавьте хотя бы callback который будет срабатывать после выполнение вашего скрипта.
Можно узнать, для чего это нужно?
есть много селектов, или подгрузился новый селект. после стилизации по ним нужно пройтись циклом. В цикле идет поиск нужного класса. Этот класс не находит так как стилизация еще не прошла. Можно конечно поставить задержку, но это не очень хорошо. Нужно короче чтобы была возможность вызвать нужную функцию после того как ваш плагин выполнится. Думаю это не только мне пригодится. Во всех модных плагинах есть калбеки)
Согласен. Добавил в TODO.
Попытался реализовать. К сожалению, пока не получается. Не могу выцепить место окончания выполнения плагина.
Проблема в том, что плагин проходит циклом (.each) по каждому стилизуемому элементу, и, если добавить колбек в конце этого цикла, то он будет запускаться после каждого стилизованного элемента. Если же этот колбек поставить после цикла, то он просто-напросто не срабатывает.
В общем, у меня пока недостаточно опыта, к сожалению, чтобы реализовать эту штуку.
Магия слова в очередной раз сработала. Стоило публично написать о проблеме, как решение тут же нашлось.
Только вот что я обнаружил во время тестирования. Для того, чтобы сделать то, что вы описали, колбек же не обязателен, вот так будет то же самое:
С колбеком получается то же самое. Или может я что-то неправильно понял?
ну это решение подойдет если нужно, чтобы для каждого селекта отдельно сработала моя функция. Если допустим поставить туда alert(), то он будет вызываться столько раз сколько у меня селектов. Надо чтобы после стилизации можно было вызвать свою функцию 1 раз.
Неправда. С вышеуказанным кодом alert() сработает только для селекта с классом
.some-class
, а не для всех.Будет лучше, если покажете пример вашей ситуации.
ну а если этот класс не у одного селекта? пример я так не смогу показать. Просто надо вызвать функцию после выполнения вашего плагина. Вот например как есть у этого слайдера http://bxslider.com/examples/callback-api..
Плохо, что не можете показать пример, т.к. я не вижу разницы между способом, который я показал выше, и колбеком. У меня получается один и тот же результат.
Почему я просил пример – чтобы я мог удостовериться, что я правильно реализовал этот колбек.
Вот вы в комменте №998 писали:
Код из коммента №1004 позволяет решить эту задачу.
у меня есть 10 селектов с классом .some-class. Я запускаю ваш код
alert появится 10 раз. А надо 1 раз. Как-то так
После того как селекты будут готовы появится alert(1).
Вот это другое дело. Теперь я убедился, что колбек сделал правильно. Завтра, наверное, выложу новую версию с этим изменением.
Большая просьба, добавить callback на открытие селекта, так как надо было вставить кастомный скролл, и пришлось править файл скрипта, что бы встроить туда апдейт скролла.
Хорошо, сделаю.
Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:
Буду признателен, если кто-то предложит более красивое решение.
Доступна новая версия плагина – 1.4.9. Добавлены колбеки.
Отлично, будем тестить)
Очень хороший скрипт, легко устанавливается и настраивается!
Есть маленький недочет, у меня на странице используются 3 селекта, взаимосвязанные между собой … в одном из селектов есть повторяющиеся названия, например http://www.gbmgroup.ru/kirpich/468 первый из селектов содержит 2 одинаковые значения, когда происходит change, то он просто не реагирует! Тогда как в других селектах, где значения не дублируются, все отрабатывает нормально!
Какой смысл в дублировании значений в селекте?
В других 2ух селектах значения разные, а в этом совпадают … так было заложено … понятно что смысла нет повторять … получается скрипт написан с таким условием? и смысла нет переделывать, потому что всю логику менять?
Не понимаю, что вы хотите. Просто удалите дублирующиеся пункты и все.
для type=”file” не срабатывает trigger refresh при обнулении поля.
Может что-то там и вызывается, но в идеале должно выполняться обновление имени файла
А этого не происходит.
Только что проверил. У меня срабатывает.