jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Выложил новую версию – 1.5.3.3.
Я недавно начал изучать JQuery и возможно задам ужасно чайниковский вопрос, но тем не менее: У меня есть код, но нигде в коде не встречается активация плагина, но все select автоматически становятся оформленными вашим скриптом. Никак не пойму где и что его активирует? Этого кода нету точно нигде:
Значит этот код где-то есть, просто не можете найти. Без него плагин не активируется.
Премного благодарен! Нашел я.
А можно каким-то образом использовать разные select? Странно что при активации двух плагинов у меня появляются 2 select рядом. Я так понимаю должен быть способ поименного назначения разных элементов, но я не понимаю как этого добиться.
Это, наверное, самый часто задаваемый вопрос. Ответ здесь.
Разобрался! Спасибо.
Спасибо , за полезный плагин, очень полезная штука. Единственное замечание, в css некоторые свойства написать бы через префиксы, чтобы обеспечить кроссбраузерность, было бы отлично. А так все СУПЕР!!
скрипт не обрабатывает стили радио, возможно и других (не тестировал)
он их показывает, хотя не должен по логике
Сделайте так:
если в css будет стоять display: block или что-то подобное, то буддет показывать, приоритетность правил срабатывает наверное
после версии 1.5.1
перестал работать код
т.е в 1.5.1 все работает
в более новых версиях нет
хотя в ченжлоге написано, что наоборот починили )
у меня лично и раньше работало, а теперь нет
on(‘change’ тоже не работает
На странице примеров есть селект, проверяющий срабатывание change (onchange=”alert(this.value)”). Как видите, там все работает.
ок, вот пример
http://jsfiddle.net/e3b4T/
как видно, при multiple=’true’ change уже не работает
Я думал, речь про одиночный селект. Теперь вижу проблему.
В плагине нужно всего лишь заменить:
на:
Скажите пожалуйста, как заставить список всплывать в верх, а то его обрезает overflow: hidden; убрать его не получиться, нужно чтобы он верх всплывал????
Только некрасивый способ. Замените эту строку:
на такую:
А можно сделать только для одного определенного блока?
К сожалению, нет.
Печально, но спасибо и на этом!)
Да, кстати, тоже интересовал вопрос можно ли стилизировать только одну конкретную форму.
Конечно можно.
Спасибо, попробую! )
а как сделать reset формы?? при использовании $(‘form’)[0].reset(); выбранные селекты остаются как были
В статье же все расписано. Почему не читаете?
Запускайте
.trigger('refresh')
.это ночь без сна, видимо, сори) а что со вторым вопросом?
То же самое.
да и ещё как изменить значение селекта путём js, как это делается обычно:
$(“#my_select :contains(‘two’)”).attr(“selected”, “selected”);
При клике на сам селект не отрабатывается событие onSelectClosed
Да, действительно. В следующей версии исправлю. Спасибо, что сообщили.
Здравствуйте, у меня вопрос по одиночному селекту.
Как я понял селект состоит из 2 списков: select и ul. И при загрузке из БД значения полей li и option одинаковые. Поэтому при выборе определенного значения оно в БД прекрасно обновляется.
Но если селект заполняется данными из AJAX-ответа, который меняет значения в UL, в БД новое значение не летит, т.к. оно берется из тега select, а значения в нем не меняются.
Подскажите, пожалуйста, как изменить значения в select на такие же как в UL?
Через AJAX нужно менять select, а не UL. UL создается плагином, поэтому не нужно его трогать.
При получения AJAX-ответа в select у меня пропадают стили этого списка.
Всего у меня два списка – один с регионами, другой с городами. При выборе из первого списка региона, подгружаются во второй список его города, но уже без стилей оформления. Подскажите, как правильно сделать вывод?
После завершения AJAX-запроса запускайте
.trigger('refresh')
или.styler()
для измененного селекта.Куда я только не вставлял .trigger(‘refresh’) ни чего не выходит.
Посмотрите мой код, может не так запускаю.
Да, неправильно запускаете. Нужно после этой строки:
Пробовал и после этой строки так:
$(“.city_region”).html(html).trigger(‘refresh’);
ни чего не получается.
Не создается список UL, к которому применяются стили.
В AJAX-ответ (в html) у меня идет вот это, правильно?:
echo (“”);
foreach($city_arr as $key => $item){
printf(“%s”, $key, $item);
};
echo (“Другой город, населенный пункт”);
echo(“”);
exit();
Все это помещается в div с классом city_region.
Скорее всего, в этом и ошибка. city_region – это должен быть select, а не div.
Плагин стилизует селекты, а не дивы.
Так ещё хуже получается, весь список выводится сразу в столбик и так же без стилей.
Значит где-то что-то делаете неправильно.
Вопрос в следующем: Селект с плагином jQuery Validation, делаю следующим образом
Потом вот так:
Но динамическое обновление классов не срабатывает, но иногда срабатывает и получается путаница, вроде должен быть класс valid, а подставляется класс error. Как заставить селект менять классы на лету, как это делается без плагина стилизации?
Живой пример помог бы разобраться, а так и ничем не могу помочь.
Вот пример http://karelin.pw/w/ck/form.html
Мда, непростая оказалась задача. По логике у вас все правильно написано, но почему это не срабатывает, не знаю, к сожалению.
Нашел вот такое решение (некрасивое, но рабочее):
Спасибо за уделенное время, сделаю так, а там видно будет.)
А я вот никак не могу понять как нужно делать, что бы input:file показывал имя файла после его выбора.
это html, css подключен, jquery потом и скрипт ваш подключен перед закрытием тега body.
скорее вот так, тот блок я добавил, думал сработает а теперь вижу, что класс динамически присвоивается инпуту, а у меня нет.
Посмотрите страницу с примерами, там имя файла отображается после выбора. Если у вас это не работает, покажите вашу страницу с проблемой.
Страница у меня в денвере еще.. Единственное что я поменял, это .jq-file добавил position: relative; так как без него у меня input растягивается на всю ширину и высоту браузера, покрывая все собою.
Вот стили input
так и должно быть?
position: relative итак уже стоит по умолчанию для этого тега.
Да.
position relative не стоит.
вот что стоит изначально. Я скачал с гитхаба. Уже думаю, может битая какая то мне попалась..
Посмотрите через инспектор кода. Он добавляется самим плагином, а не через jquery.formstyler.css.
смотрите сами, я залил на хостинг http://testform.meximas.com/form.html
И что мне нужно там увидеть?
все, я прошу прощения, я почему то изначально обернул сам инпут в див .jq-file вот оттуда и такие дела)
Здравствуйте! Хотела попользоваться Вашим плагином в своих динамических списках, они формируются через ajax, используя базы данных. Но столкнулась с проблемой! Не могу понять куда необходимо вставлять .trigger(‘refresh’); Сделала вот так, но появляются два селекта: один стилизованный, но пустой, второй стандартный, но с необходимыми позициями.
Подскажите, пожалуйста, что я делаю не так?
Как минимум, две ошибки в этой строке:
А должно быть:
Доброго времени суток, интересует такой момент.
Добавляю селекту и диву, в который он оборачивается
После чего вижу, что область выбора – стала размером 200px, так же как и все выпадающие элементы в нем. Хотя в живом примере не увидел ничего, кроме стиля css. Подскажите что делаю не так.
Нужно, чтобы поле было 200px, а выпадающие – по ширине самого большого пункта.
И еще 1 момент.
В такой записи. все работает нормально, но если убираю умное позиционирование (falce), то скролл по элементам теряется… Необходимо, чтобы выпадал список ВСЕГДА вниз.
Подскажите что делать надо, пожалуйста)
Достаточно указать:
На странице примеров 3-й селект именно так и сделан.
Это баг. Буду исправлять.
Закоментил умное позиционирование – полет нормальный.
Нашел ошибку у себя. у родительского блока был overflow:hidden. Вот все и не влезало)
Спасибо. кстати. Есть 1 небольшое пожелание – сделать, чтобы скрипт изменял еще и стрелку (переворачивал), когда список открыт и обратно
Стрелку вы и сами можете перевернуть. Когда список открыт, добавляется класс
.opened
.Спасибо, у меня уже загон к концу рабочего дня – сам спросил – сам ответил))
Неплохой плагин, но только есть хороший лично для меня минус.
Если выпадающий список открыли то срабатывает event – onSelectOpened, но если пользователь закрыл список просто кликнув на любой другой элемент на страницу то событие onSelectClosed не срабатывает. Также проблемы с .opened когда пользователь открывает список, класс почему-то не добавляется.
Что-то у тебя походу глюки со скриптом. все работает, что ты описал.
Данные проблемы наблюдаются только в Internet Explorer, буду разбираться.
Если чем-то помогу – Я проверил в 9ом ИЕ, полет нормальный, если клацать по стрелке. А если клацать по самому селекту, то беда. да – “не выпадает” список
Выложил новую версию плагина – 1.5.4.
http://toolfind.ru/toolfindsearch/?template=new&result_new=Y#
На радио кнопки посмотрите. http://joxi.ru/XOvCU4wyTJDkBqtKw84
Это после обновления так?
Нет, это вообще косяк. Вставил тот код что в примере, с тем же скриптом что в примере и все равно так радио отображаются.
может ты переключил им активность?! )
у вас вообще-то верстка неверная
внимательнее посмотрите
а стоп, это мне спать пора
Для вашего случае в плагине предусмотрена опция
wrapper
.Спасибо
А вот мне, к сожалению не помогает, что-то делаю не так?
http://joxi.ru/WBnEU4wyTJCQaCURx6A
Вместо
radio
должен быть указан селектор. Например, если радиокнопки находятся в блокеdiv.container
, то:{wrapper:'div.container'}
.А по умолчанию в скрипте прописан “form”, что если при вызове я тут переопределю на label.className ?
с формой ничего не случится?
Мне это не помогло(
Нужно указывать блок, в котором находятся все радиокнопки одной группы, а не одна конкретная.
ну так-то они находятся у меня в Form. но внутри каждая в своем Диве и своем Article
article- в роли строки “таблицы”
div – в роли ячейки “таблицы”
Имя одинаковое надо было выставить, и без Wrapper’a все заработало =)
После обновления до версии 1.5.4. в Ие 9-10 такая вот лабуда, при нажатии на сам селект.
Баг с закрыванием исправлен, как и обещалось =)
А вот тут – не ясно(
http://joxi.ru/c8rEU4wyTJDuBqAhFYc
Когда вот пример с ИЕ 11
http://joxi.ru/6MrEUxjKTJALVkjulCU
Что-то я у себя такого не наблюдаю. В моих примерах тоже так?
Странно, но нет( я отключил у себя только подстраивание
и
вернув все обратно – результат тот же =(
в Вашем примере, все ок. парадоксльно однако. Ничего не изменял, кроме позиции left:0 на right:0 в скрипте
И происходит это только при нажатии на пустую область селекта, когда жму на стрелку – все ништяк)
Обновился еще раз – вижу обратный баг. Когда жму на стрелку в ИЕ 9,10 все ок, кроме закрывания списка. А когда жму на селект – список закрывается, при нажатии в любом месте экрана.
Что тоже странно(
От чего вообще может зависеть это? оборачивающие дивы?
http://joxi.ru/zdjEUxjKTJD4Veq6sqk
У вас происходит что-то неведомое мне. Не представляю, в чем может быть причина.
Подскажите, как можно очистить значение input типа file/
Спасибо за помощь
Подскажите, пожалуйста, можно ли сделать так, чтобы при выборе файла – .jq-file__name не подставлял другой текст. а оставался всегда тот, что указан в filePlaceholder??? Очень нужно
Заранее спасибо!
закоментил строку
Решение найдено)