jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
На сколько я понимаю, в скрипте нет защиты от XSS:
для кода типа
мы получим выполнение кода в
<script>
.Как я понимаю, решает проблему замена в строке 232 кода
на
Спасибо за сообщение! В следующей версии будет исправлено.
Очень важный момент – Стилизация кнопок и текстовых полей. Возможно есть смысл показать примером в разделе – Подключение плагина.
После кода:
Написать:
Для стилизации кнопок и текстовых полей, надо в этих кнопках и текстовых полях задать
класс “styler”. Ну, как-то так.
Пример:
Это бы очень секономило нервы и время людям которые “первый раз”)), но мне так точно.)
К плагину это не относится, поэтому я не акцентирую на этом внимание.
Стилизованый select всплывает поверх других активных элементов страницы (в случае наложения активных элементов на select). Манипуляции с z-index проблему не решают, select все равно выше. Как решить проблему? Спасибо!
Поменяйте опцию
singleSelectzIndex
.Спасибо за ответ. Я поставил .styler({singleSelectzIndex: “1”}); но это не решает проблемы, да и собственно не против дефолтного 100, но активные элементы с z-index: 999 все равно проваливаются под select.
Думаю это как-то связано с тем, что .styler() вызывается уже после загрузки страницы.
Проблема была в баге другого плагина. Прошу прощения за беспокойство. Последние ответы можно удалить.
Можно ли добавить опцию placeholder для селекта ?
И как это должно выглядеть?
Примерно так как это работает в http://harvesthq.github.io/chosen/ :)
Попробую, если будет не слишком сложно, то добавлю.
Добрый день.
Подскажите, как сделать, чтобы начали работать стили для .jq-file__browse:hover?
Просто нужно стилизовать кнопку при наведении.
Вот так:
Спасибо большое!
При количестве опций селекта выше 1000 блок определения ширины селекта вызывает большую задержку по времени. Не могли бы Вы переделать этот фрагмент. Все остальное просто замечательно. Заранее Вам благодарен. Алексей.
// определяем самый широкий пункт селекта
//if (l.innerWidth() > liWidth1) {
// liWidth1 = l.innerWidth();
// liWidth2 = l.width();
Благодарю за плагин, он очень хорош.
Указанный кусок кода в селектах с количеством пунктов более 1000 приводит к тому что страница браузера зависает на 3-5 сек
el.off(‘.styler’).parent().before(el).remove();
Производительность ни к черту :) Создали 500 элементов, и ради того что бы программно изменить значение, мы удаляем их и пересоздаем заного ?
Когда по сути нужно задать всего лишь значение val() и обновить окошко с текстом.
Селекты по 300 + элементов блокируют браузер при обновлении.
http://joxi.ru/Xy_cU4wyTJCCY6U-_Ik
вот статистика.
количество элементов –
511
132
7
Нахрена тебе такой селект!? Загрузи всё в БД, создай окно поиска и не мучай людей.
Добрый день. Спасибо за отличный плагин. Есть вопрос. У меня поле для выбора файла является мультизагрузочным. И когда я применяю плагин, он пишет не количество загруженных файлов, а списком все файлы, которые были выбраны. Можно ли это исправить?
Добрый день. Подскажите, а есть ли возможность отображать мультиселект в точности, как одиночный?
Такой возможности нет.
Добрый день как задать ширину селекта? Читаю комменты с самого начала , по ходу вы отсылаете всех читать https://dimox.name/jquery-form-styler/?cp=1#comment-15525 но у меня по этой ссылке открывается эта страница.
Где посмотреть про стилизацию?
Спасибо, помогло.
как раскрыть селект через js?
https://dimox.github.io/jQueryFormStyler/demo/ поломалось что-то
Нужно открывать с протоколом http, а не https, тогда все будет нормально.
как можно сделать, чтобы список в select всегда вверх открывался?
в selectSmartPositioning такого выбора нет :(
Такой возможности нет. Только варианты, которые в selectSmartPositioning.
уже разобрался. удалил все условие в 498 строке и то что в него вошло. Оставил только dropUp().
Так-то тут ничего не стоит добавить еще одно значение для проверки,чтобы сделать универсальным эту опцию и вверх тоже.
Спасибо за ответ.
Есть один момент.
Полностью бессмысленный код, который увеличивает время отработки скрипта в двое.
Добавляем в листинг стилизации селектапеременную кешируюшую текущий стилизируемый элемент (например ххххх). Удаляем весь код выше. Пишем вместо всего выше
liWidth1 = ххххх.innerWidth();
liWidth2 = ххххх.width();
Эффект тот же, производительность на 50 процентов быстрее.
Эффект не тот же.
Вот так сейчас выглядит селект с длинным пунктом:
А так после вашей правки:
А если попробовать так: всем li поставить block у его родителя ul взять .outerWidth(), jq-selectbox__select-text применить ширину минус padding: left, right от .jq-selectbox__select; Может глупо конечно)
Так же не забываем
// прячем оригинальный селект
el.css({
position: ‘absolute’,
left: 0,
top: 0,
//width: ‘100%’,
height: ‘100%’,
opacity: 0
});
комментируем ширину селекта. что бы функции выше нормально отработали
Было бы отлично, если добавить в библиотеку подсветку/выделение значений по-умолчанию, то есть тех, которые выбираются при form.reset. При редактировании и внесения изменений в большие формы, было бы удобно для выпадающих списков и чекбоксов/радио знать куда внесены изменения.
Классный плагин, спасибо Большущее!!! Единственное – было бы здорово учесть какие-либо параметры, позволяющие увеличить быстродействие и экономить ресурсы устройства. Чтобы можно было выбирать функциональность или быстрота и экономия ресурсов (видел предложения по увеличению производительности в комментах, ущемляющие функционал). У мя на странице около 150 чекбоксов (выбор городов и т.п.) и около 150 опций селекта. Плагин загружает андроид браузер 4.0 так, что при тапе на любой селект изображение страницы из браузера пропадает. =) А с таким браузером больше 6% трафика ходит.
Я не настолько опытен в JavaScript и jQuery, чтобы сделать подобные вещи. В таком случае рекомендую отказаться от использования плагина, тем более, что радиокнопки и чекбоксы можно оформлять на чистом CSS.
Сделал стилизацию радио и чекбоксов CSS, отключил активацию этих элементов в плагине. Теперь в Андроиде все работает как надо. =)
Заметил багу плагина в IE 9. Селекты при загрузке страницы принимают ширину 100%, а не по содержимому опций. При наведении указателя мыши на селект его ширина уменьшается по размеру выбранной опции (в подписи селекта). Как только указатель покидает активную область ширина селекта вновь растягивается на всю доступную.
У меня такой проблемы не наблюдается.
К сожалению, проблема все-таки есть. В том числе на странице с примерами для одиночного селекта без заданной ширины, имеющий пункт с длинным текстом. При наведении указателя мыши ширина элемента прыгает с максимально-возможной до ширины по подписи. Сейчас специально поставил ie9 на другое устройство, чтобы потестить.
Причем при наведении на триггер как-то сильнее прыгает. =)
Можно вот этим потестировать http://www.my-debugbar.com/wiki/IETester/HomePage В полноценном браузере баг выглядит аналогично, я проверил это.
В общем решил проблему заданием фиксированной ширины на каждый селект
У меня нет нативного IE9, чтобы нормально протестировать. Проверяю обычно через режим эмуляции в IE11. Установил сейчас заново IETester (он у меня глючил) – теперь вижу проблему. Попытаюсь исправить.
Классый плагин, а на мобилках работает – iPhone, iPod Touch, and Android ?
Сейчас активно ищу плагин для адаптивок.
Конечно работает.
А вот в эмуляции почему-то не выпадает http://joxi.ru/cBn7U4wyTJDnAoZv8m8
На Android точно работает. iPad у меня нету… =( Есть у кого проверить?
В эмуляции не выпадает, потому что это эмуляция. Для iOS выпадание специально отключено в плагине, т.к. там свой нативный список появляется.
Я тестировал на айфоне, всё работает, значит на айпэде тоже должно, т.к. одна и та же ОС.
Блин, точно не выпадает. Проверено в Safari под User Agent iPhone и iPad
Вопрос! Предположим один из селектов при загрузке страницы спрятан в div display:none. При клике по ссылке div получает display: block, но на селекте в этом случае не отображается подпись (т.е. опции внутри есть, но в закрытом состоянии выглядит как пустой блок). Можно это как-то вылечить?
Живой пример можете показать?
Проект в разработке, ссылку не хотелось бы на этих порах паблишить. Куда скинуть (почта, скайп)?
Сделайте пример на http://jsfiddle.net/.
Хм. А там в селекте подпись отображается нормально, но режется выпадающее окно с опциями.
http://jsfiddle.net/147hbaw6/
Возможно, мой косяк. Буду думать. Хотя конфигурация такая же… =(
Чтобы опции не обрезались, нужно после
$(a).slideToggle();
добавить$('select').trigger('refresh');
.Да, так работает. Спасибо!
Возникла проблема с клонированием input type=file с помощью clone(). Я клонирую полностью стилизованный формстайлером input, со всеми дополнительными тегами, при этом меняя вручную значение jq-file__name. Клонированные поля добавляют новые файлы правильно, но в jq-file__name не показывается название файла. В чем может быть проблема? trigger(‘refresh’) не помогает.
Сделайте, пожалуйста, пример на jsfiddle.net.