jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
http://joxi.ru/KAxXNwXt46pPwA
в попап окно( подгружается на ajax) выдает длинный список без прокрутки. полосу прокрутки ставит на экран. как это решить?
В статье есть пример “Селект во всплывающем окне”. Сделайте по аналогии. Скорее всего, причина в ваших скриптах.
Здравствуйте скажите пожалуйста есть ли возможность у дроп даун меню ширину делать динамически как и селекте например 200px, в li будут генерится часовые пояса у них названия длинные это ламает select, что бы текст которые не помещяется переносился на новую строку спасибо http://prntscr.com/h25tv8
Нет такой возможности. Переносы в дропдауне не предусмотрены, как и в нативном селекте.
Добрый день, есть ли возможность прокручивать выпадающий список к выбранному элементу при вводе значения с клавиатуры? Спасибо.
Не понял, как это.
В выпадающем списке 100+ элементов, список ограничен по высоте, и внутри его появляется вертикальный скролл. При вводе значения с клавиатуры в селект подставляется требуемое значение, но в списке прокрутка к данному элементу не происходит.
При вводе где?
Здравствуйте, есть на сайте слайдер
Если я нажимаю на Select и раскрывается список, то после смена картинки в слайдере список select автоматически закрывается и так со всеми стилизованными select`ами. А со стандартным не стилизованным select`ом такого не происходит.
Не работает установка атрибута checked на сам input[type=”checkbox”] с jQuery 3.2.1 ): Дохрена кода и стилей, а толку ноль. Переинициализация и прочие отложенные запуски не помогают. Автор, проверяй велосипед.
У меня работает.
Здравствуйте.
Подскажите пожалуйста как быть.
При выборе радиокнопки т.е. при клике по ней мне необходимо скрыть блок а другой показать. Я событие клика повесил на #optionsRadios3-styler но оно не срабатывает. Я так подозреваю что его перебивает событие другое т.е. событие даннго плагина.
как сделать так чтобы второе моё событие тоже сработало?
Код события клика
Вместо
click
используйтеchange
.Спасибо!
Dimox помогите, пожалуйста в ещё одном вопросе.
При добавлении товара в корзину html (товара) подгружается динамически в popup окно.
В этом html есть кнопка input[type=number], которая подгружается не стилизованной. Стилизация происходит только после перезагрузки страницы.
Я видел вsit в посте что то про динамические элементы, но попытки стлизовать этот элемент не увенчались успехом.
Помогите пожалуйста.
Без живого примера ничем не могу помочь.
тут http://s1.u7m.ru/index.php?route=product/product&path=60_61&product_id=57
После завершения ajax-запроса нужно тоже запускать
.styler()
, а у вас этого нет. В файле http://s1.u7m.ru/catalog/view/theme/mbstudio/js/js.js после этой строки:добавьте:
Заработало но немного странно)
При добавлении ни чего не меняется, а вот если закрыть окно, нажав на крестик и после этого открыть корзину, нажав на картинку корзинки, то стилизация появляется.
Клик по кнопке закрыть связан с этим.
без этого всё по прежнему(
Видимо, где-то еще нужно подключать.
Я заметил что если отключить инициализацию для всего сайта и оставить только после
то тот input что рядом с кнопкой добавления в корзину меняется в момент нажатия. А те что в модальном окне не меняются. Получается что инизиализация плагина происходит раньше чем товар оказывается в модальном окне?
Здравствуйте.
Спасибо за плагин.
Обновите пожалуйста v/2.0.2 для установки через bower_components
Доступна на данный момент только v/2.0.0
Я не знаю, как там обновлять.
Привет. А как вставить картинку напротив option? В демонстрации написано
, так и сделал
Но картинка накладывается на весь select.
В примере всё есть, мне больше нечего добавить.
В демонстрации в смысле?
Да. Скорее всего, что-то неправильно делаете.
В мобильной версии выпадающие списке не выпадают, даже в демо-примере http://dimox.github.io/jQueryFormStyler/demo/
Спасибо за отличный плагин! Не подскажете как можно сделать чтобы поле поиска в была так сказать “сверху”. Не появлялась только когда нажать на селект и уже в выпадающем списке с ней работать, а чтобы она была сразу в поле селекта и при вводе данных появлялся уже выпадающий список?
По-другому никак, только такой вариант.
Пользуюсь плагином уже давно, но сегодня столкнулся с проблемой. Просидел полночи, пока не нашел причину. Такие вещи недопустимы:
Нативный селект прячется элементарно.
Всем привет! Столкнулся с проблемой, мне нужно в выпадающем списке вставить дополнительный span, так как там есть текст и в некоторых словах подчеркнутый текст. Кто знает решение?
Привет всем!
Есть одиночный select, в начале пустой.Потом ajax-ом в него добавляется порядка 1000 option.Ну и дальше – $(select).trigger(‘refresh’).Браузер думает пару секунд и все OK!
Но имеются шустрые посетители, которые за это время успевают натыкать мышкой на другие взаимно связанные элементы формы.В итоге – полный дурдом.
Не могу понять то-ли браузер долго перестраивает DOM, то-ли styler ‘refresh’ .Это – ладно, понятно , что нужно время.Но, как то можно заблокировать ввод(мышка,клава) для посетителя пока все не успокоится?
Добрый день!
У меня есть select, и на мобильных вообще не раскрывается, как решить проблему ???
Здравствуйте!
Похоже это глюк!
Столкнулся на реальном проекте с непонятной странностью.Попытался воспроизвести на demo(Примеры для плагина jQuery Form Styler).Получилось.
jQuery Form Styler v1.7.8.
В demo.js мняем строчки
на
Общий смысл в том, что ajax-ом записать в скрытый пустой селект опции.Потом refresh.А только после этого показать селект.
Если в последних строчках сначала show, потом refresh, то все нормально.
Если сначала refresh, потом show, то обрезаются выбранные строчки.Примерно так:
— Выберит…
Новая длинн…
Что делать?
Для правильной работы плагина refresh нужно запускать после show, как вы сами и написали. Обновлять нужно видимый элемент, а не скрытый.
Dimox, спасибо за плагин, но у меня возникла проблема, в класс .jq-selectbox__trigger-arrow я поставил картинку со стрелочкой и хочу чтобы по клику на селект она делала оборот на 180 градусов, но дело в том, что селектор совершенно не реагирует на .click(function(). Помогите пожалуйста!
У меня это заработало, но как сделать так, чтобы ещё при закрытии стрелка возвращалась на место? Типа toggle
Это делается на CSS, скрипты не нужны.
Спасибо большое Dimox, всё отлично работает!
И ещё вопрос, можно ли при помощи вашего плагина сделать чекбокс не в виде квадрата с галочкой, а как текст? Чтобы вместо галочки просто была обводка вокруг текста?
Это можно сделать вообще без плагина, только стили поменять.
Не совсем то, что мне нужно. Мне нужно чтобы текст был КАК ЧЕКБОКС, т.е вместо квадрата текст, а вместо квадрата с галочкой текст с обводкой
Всё то. Я же говорю, что дело в стилях. https://jsfiddle.net/6sk5h4xm/
Спасибо!!!
У меня не стилизуется input[type=”file”]. Ни в CSS, ни в JS файлах я такого селектора не нашёл. Это у меня проблемы со зрением, или чего-то не хватает в скрипте?
Что-то неправильно делаете. На демо-странице же всё в порядке.
Извиняйте, разобрался
Добрый день!
могу ли я не подключать jquery.formstyler.theme.css чтобы написать свои стили а не переопределять их сверху?
и можно ли редактировать jquery.formstyler.theme.css?
На оба вопроса – да. Данный файл для этого и был создан.
Добрый день!
установила плагин все работает но есть проблема
jq-selectbox__select-text почему то не определяет самый длинный элемент и как итог прыгает ширина и обрезаются длинные li
как поправить?
Если используете нестандартный шрифт, то смотрите решение в статье в недостатках.