jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Плагин шикарный, но для меня есть один недостаток. Почему-то у меня всегда стоит задача, чтобы псевдоселект принимал ширину селекта, на основе, которого он построен.
Для этого приходится дописывать костыли: перед function selectbox()
– из-за абсолютного позиционирования ширина может отличаться от первоначальной (когда селект прячется), а в функции doSelect() делаю вот так:
ну и самой обёртке селектбокса тоже дописываю ширину. Ну это так, на скорую руку.
Не задумывались о том, чтобы реализовать такой функционал из коробки?
Я не вижу в этом необходимости.
Я тоже считаю что ширина должна быть как у оригинального селекта. А у вас ширина просто прописана в css в px и все селекты везде получаются одной ширины.
Это не нормально. Или есть другой механизм задать разную ширину?
Есть.
а зря)
bg4, спасибо за хак)
Здравствуйте, нашел баг в плагине при работе из другим режимом направления текста
. В нем при клике на поле формы скрывается все содержимое и отображается стандартное поле, которое выехало (поскольку ему добавляется стиль position: absolute; left: -9999px;).
Для решения достаточно просто поменять left на right. Локально проблему решил, но было бы неплохо если бы ваш плагин, учитывал это условие, и скрывал бы автоматически в правильном направлении.
Это все так не баг, а отстутвие поддержи режима rtl.
Здравствуйте. Можно узнать, Почему вы используете внутри span теги div? Если нужен инлайновый елемент то лучше наверно использовать див и применить к нему свойство “display”. Запрещено внутри элементов “inline” размещать элементы “block”.
Из-за старых версий IE, чтобы не писать лишние стили.
Спасибо за отличный плагин.
Но, не ловит в некоторых случаях опции селекта, что делать, куда копать. Могу скинуть принтскрин по надобности.
Принтскрин не поможет, покажите живой пример.
Взял другой плагин, спасибо за внимание.
Както странно, все селекты есть, а вот варианта когда задан size но не задан multiple – нету!
т.е. когда обычный список из n строк но без мультиселекта.
Не припоминаю, чтобы я где-то на сайтах встречал такой вариант селекта. На мой взгляд, он вводит пользователей в заблуждение, т.к. ассоциируется с мультиселектом.
Ну вот ссылка на картинку что я имею в виду. Там 2 селекта-списка: http://www.mkyong.com/wp-content/uploads/2011/05/wicket-palette-example1.png
А на мой вопрос вы так и не ответили…
В чем заключается вопрос?
Ну не планируете сделать и такой селект?
Пока не планирую.
Подскажите, как добавить разные фоновые картинки option в select, нужно сделать что-то вроде картинка русский флаг – текст Россия, картинка амер. флаг – текст США и т.д.?
Всего планируется использовать 3 option в select.
Добавьте CSS-классы к тегам оригинального селекта, и они передадутся соответствующим тегам в пседвоселекте.
если так:
то:
Вы какую-то старую версию плагина используете, в последней даже класса
dropdown
нет.Должно быть так:
скачивал здесь, сейчас обновлю на плагин, теперь должно получится :)
Подскажите еще, не передается класс
в поле
Как можно осуществить?
Это в плагине не предусмотрено.
в коде после
добавил
в итоге получаю
помогите пжл решить проблему с rus ukr eng , чтобы эти классы добавлялись не все вместе, а в зависимости от выбранного li (option)
Подскажите, пожалуйста, можно ли как-то в option подставить input? Чтобы помимо предложенных вариантов, пользователь мой ввести и свой вариант.
Такой возможности нет.
Здравствуйте! Понравился ваш плагин. Только не понял, почему сами inputы не меняют состояния checked. Пришлось дописать в код плагина установку и снятие этих атрибутов при клике на объект el. Может что то проглядел, но у вас в демо та же проблема.
Ничего дописывать не нужно. При отправке формы данные передаются, как положено.
ну это для отправки. а если у меня сторонний скрипт должен динамически запрашивать состояние чекбокса? В остальном скрипт отличный! Спасибо вам!
С помощью селектора
:checked
.плагин хороший, очень выручил!
подскажите, как получить value конкретного option при клике по нем?
(вернее при клике по его псевдоэлементу li)
Вот так:
У меня проблема на DLE 9.6
из-за одной строчки кода … пропадает визуальный редактор контента, что делать?
на изображении все визуально видно!
http://s4.uploads.ru/djtRX.png
http://s5.uploads.ru/0CyKs.png
http://s5.uploads.ru/U5qLJ.png
http://s5.uploads.ru/HZgdE.png
Код в файле – jquery.formstyler.js:
Не представлю, как это исправить.
А как можно сделать мультивыбор чекбоксов …
когда к примеру есть список с файлами и нужно выбрать все файлы (тоесть все чекбоксы) нажав всеголишь на один чекбокс …?
Для этого нужно писать дополнительный скрипт.
здесь для этого все есть, но если нужен именно чекбокс, то например так
естественно не забыв добавить функцию toggleChecked
Доброго времени суток. В очередной раз используя ваш стилизатор, столкнулся с такой проблемой: при отправке данных формы, если не перегружать страницу, не срабатывает обнуление значений .jq-file__name. Для обнуления использую .trigger(‘refresh’). Подскажите, в чем проблема?? Заранее благодарен.
Данный триггер не предусматривает обнуления поля, он реагирует только на состояние
:disabled
.Как вариант решения – удалить из DOM input[file] и создать новый, к которому применить стайлер.
Не работает с такими вещами валидация, так как элемент оригинальный находится сами знаете где…
Да. Пока не нашел способ красиво спрятать оригинальные элементы, чтобы не было проблем с валидацией.
Спасибо за плагин!
Верстая сайт для мобильных устройств, столкнулся с проблемой: на iPhone, при нажатии на стилизованный селект, выпадает стандартный пикер iOS. После выбора в нем какого-нибудь варианта, тот же вариант становится активным и в списке селекта, т.е. все работает. Проблема заключается в том, что селект не закрывается после этого.
Можете что-нибудь подсказать?
У меня нет возможности тестировать на iOS.
одиночный селект не настраивается по ширине. в селектке прописал style=”width: 560px;”, но ширина все равно берется из стилей.
Версия Jquery 1.9, ваш стилизатор почему то не работает, пишет
Должно работать без проблем. Если jQuery подключаете с Гугла, тогда версию нужно указывать как 1.9.0, а не 1.9.
Огромное спасибо автору!!! Великолепно!
Хотелось бы реализовать функционал кнопки “Переключить галочки” для чекбоксов из демо-примера в виде другого чекбокса. Кликаешь на верхний чекбокс и отмечаются остальные.
Перенес ваш код отвечающий за работу этого функционала:
Поставил кнопку
– все работает!
Присвоил нужному checkbox-у класс check и увидел, что он перенесся в заменяющий его стилизованный span. Заменил в коде на
, но этот клик вообще не обрабатывается. Скорее всего из-за того, что в вашем основном JS-коде похожая конструкция обрабатывает смену класса: checked.
Как порекомендуете реализовать такую идею? Спасибо!
Самое простое – поменяйте дизайн кнопки на такой же, как у чекбокса.
Если навешать обработчиков на элементы форм, они не работают.
например
$(‘input[type=”radio”][name=”ololo”]’).click(function() {
alert(‘ololo was clicked!’);
});
А вот uniform умеет (зато не умеет селекты стилизовывать)
Можно это исправить в плагине?
Событие нужно вешать на псевдоэлемент.