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 тоже не дает результата.
Вот пример – http://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.
Спасибо!