jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Доступна новая версия. Отремонтировал ширину селектов.
От того, что я поставил новую версию — мне это не помогло (
В чем может быть проблема?
Может ли быть проблема с refresh?
Вот здесь не выходит:
Список должен быть в зависимости от выбора первого select.
и ничего… помогите пожалуйста!
Мне в этом не разобраться. Я в нативном JavaScript ни бум-бум.
Добрый вечер! Использую Ваш плагин для стилизации динамически формируемых выпадающих списков «Область-Город». Ситуация. Выбираю в первом селекте область. Появляется второй селект, в option которого подгружаются города, соответствующие данной области. Далее, закрываем браузер. При повторном открытии браузера видим первый селект с областями.
Проблема. Мне необходимо чтобы выбран был не тот option, который был выбран перед закрытием браузера, а с идентификатором option_default. Используя id селекта или этого элемента списка, я не могу средствами Jquery добиться этого результата. Понимаю, что нужно каким то образом воздействовать на span с id oblast-styler, но не знаю как это сделать. Очень бы хотелось получить Вашу помощь. Заранее выражаю благодарность за оказанное содействие
Возможно, это связано с кэшированием браузером. А вообще, на словах сложно понять ситуацию.
Ладно. попытаюсь попроще. Как сбрасывать значение селекта или как при загрузке страницы сделать так, чтобы выбирался
?
Он итак должен выбираться, т.к. стоит атрибут selected.
Проблема с iOS устройствами в том, что система берет полностью управление html элемента select, там свои фишки в отрисовкеи т. п. И получается глюк, когда заходишь на сайт на айфоне, кликаешь и отображается два меню — формстайлерское и айфоновское.
Решение такое: в файле jquery.formstyler.js ищем кусок кода:
// если селект неактивный
if (el.is (':disabled')) {
selectbox. addClass ('disabled');
return false;
}
// при клике на псевдоселекте
divSelect. click (function () {
el. focus ();
// умное позиционирование
if (opt.selectSmartPositioning) {
var win = $(window);
var topOffset = selectbox. offset ().top;
var bottomOffset = win. height () — selectHeight — (topOffset — win. scrollTop ());
var visible = opt. selectVisibleOptions;
var minHeight = liHeight * 6;
var newHeight = liHeight * visible;
if (visible > 0 && visible 0 && visible < 6) minHeight = newHeight; // раскрытие вверх Просто через агент браузера смотрим и не рисуем дальше, если iOS. Проверено на живом сайте. var isIosFormStyler = navigator.userAgent.match (/(iPad|iPhone|iPod)/g)? true: false; if (isIosFormStyler) return;
Блин, не всё скопировалось:) Короче вот как кусок кода должен выглядеть:
// если селект неактивный
if (el.is (':disabled')) {
selectbox. addClass ('disabled');
return false;
}
// при клике на псевдоселекте
divSelect. click (function () {
el. focus ();
var isIosFormStyler = navigator.userAgent.match (/(iPad|iPhone|iPod)/g)? true: false;
if (isIosFormStyler)
return;
// умное позиционирование
if (opt.selectSmartPositioning) {
var win = $(window);
var topOffset = selectbox. offset ().top;
var bottomOffset = win. height () — selectHeight — (topOffset — win. scrollTop ());
var visible = opt. selectVisibleOptions;
var minHeight = liHeight * 6;
var newHeight = liHeight * visible;
if (visible > 0 && visible < 6) minHeight = newHeight; // раскрытие вверх
У меня появился айфон, сам смог проверить. Большое спасибо за решение, работает!
Привет. Использовал ваш скрипт. Все нравиться, все красиво. Но у меня появилась такая проблема, Что моя цмс использует динамические селекты. И вот например выводятся 2 селкта.
Первый селект выводиться сразу на страницу без либо каких скриптов обработки.
А второй выводиться уже после обработки скриптами и проверками. Например
Размер 1 селект размер, а второй цвет.
я выбираю маленький и проверил скрипт вывел 2 селект с цветом, а и б,
а выбираю размер большой и второй селект вывел цвет, а, б и с.
И вот тут как раз проблема в формировании вашего списка. Как мне обновить теперь селекты что бы при втором клике добавился цвет с? В селекте стандартном он есть, но в лишку не подставляться. Рефреш не пнимаю как использовать. Есть возможность обновить?
Рефреш нужно добавлять после того кода, который меняет второй селект.
А можно пример обновления для селекта?
$('select').styler ().trigger ('refresh'); - это же не правильно?
Правильно так:
Не могу понять, как обновить/задействовать клонированный селект:
Есть таблица в ячейках которой висят стилизованные селекты, по нажатию клавиши — добавить строку последняя в таблице дублируется со всем содержимым, работает только первоначальная строка с селекатами, остальные (клонированные) не раскрываются, не подскажете как быть? Заново вызывать функцию styler тоже не помогает, триггер через .each тоже не дает результата.
Вот пример — jsfiddle.net/Dimox/4uZU3/2/
Добрый день, у меня тут появилась проблемка, помогите пожалуйста ее решить. вот пример. http://jsfiddle.net/hFLyA/ мне надо чтобы можно было выбирать только один радио, а сейчас можно все их выбрать.
Это из-за отсутствия тега form.
Спасибо, помогло!
Всем привет. Плагин стабильный и очень стильный) Новую версию пока не тестировал. Простестил плагин на Mac OS и ни каких багов или проблем не обнаружил, у кого были проблемы напишите пожалуйста))
Выложил новую версию с устранением проблемы с селектом в iOS.
Dimox, добрый день.
Подскажите как сбросить (очистить форму)?
собственно
работает замечательно, кроме селектов и файлов, они не сбрасываются. Подскажите как их сбросить?
Только путем прописывания нужных дефолтных значений для каждого элемента формы. Плагин не поддерживает сброс.
Очень жаль.
А можете привести пример как выбрать в селекте пункт с определенным текстом или по номеру, например первый пункт
Для обоих случаев:
Спасибо, все оказалось оч просто :)
Dimox, у вас в примере есть флаги к странам (png). Я разобрался как это сделать — не сложно.
Но это ручное прописывание. А у меня 250 стран. Было бы весьма грубо каждому стилю прописывать свою флаг.
Поэтому, не подскажите, как это можно более удобно сделать в рамках вашего плагина?
Не представляю, как бы это можно было сделать автоматизированно.
Здравствуйте, у меня 3 формы, как для них сделать разное оформление на css?
Добавьте к оригинальному элементу свой класс, он же появится у псевдоэлемента.
Спасибо! И ещё вопросик, у меня кнопочка активируется по переключению чекбокса, подключил Ваш плагин, добавил рефреш, но мой скрипт теперь не работает…
Поскольку класс
termsCheck
имеется одновременно и у оригинального, и у псевдоэлемента, нужно указать«input.termsCheck»
вместо«.termsCheck»
, иначе при событии click срабатывает дополнительный лишний клик. Пример.Не совсем правильно написал на счет клика. Важно, чтобы вместо click было указано change.
Спасибо, работает! То-есть в моём случае не нужен рефреш?
Да, не нужен.
Благодарю за помощь!
Что-то со стилями я не могу разобраться :(Вот например дал селекту класс pay
и вот так стили?
Так если для каждого селекта писать то как-то много кода получается))
.pay .jq-selectbox
— должно быть без пробела:.pay.jq-selectbox
а все остальные тогда так?
ведь у вложенных jq-selectbox элементов класс pay не добавляется.
Да. А вместо
.pay.jq-selectbox
можно указать просто.pay
.Ну тогда мы вернулись к посту № 787 :)
Не могу понять ((
У меня в первом селекторе при выборе идет активация следующего селектора посредством JavaScript:
однако при совершении выбора, поле селекта не скрывается обратно, и второй селектор не активируется. Я так понимаю, что куда-то надо прописать trigger ('refresh')? Но куда?
Выложил новую версию. Добавил поддержку
<input type="reset">
.Очень интересный плагин, спасибо.т. е. селект с вашим плагином всегда остается сверху. Как это лечится?
Над селектом поставил поле с jquery ui autocomplete.
Выпадающий список с этого поля выпадает под селект,
Либо понизьте уровень слоя селекта через опцию singleSelectzIndex, либо повысьте уровень слоя jquery ui autocomplete.
Спасибо!