jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Комментарии (2 614)
Сделайте пожалуйста формирование тега “li” в следующих версиях вот таким :
var rr = option.eq(i).attr(‘class’);
ddlist += ”+ option.eq(i).text() +”;
тогда все классы написанные для select будут переносится, если например я какие-то select хотел выделить жирным, или картинку сбоку сделать.
Выложил новую версию плагина – 1.2.5
Повесил данный скрипт на форму на которой динамически отображаются/скрываются определённые поля в зависимости от выбранного пункта. При использовании данного скрипта действие не выполняется. Прошу внести изменения в ваш отличный плагин)
Пример можете показать?
Мне кажется бы не плохо сюда до кучи стилизацию текст инпутов и текстарей добавить. Чтобы не приходилось отдельно темезировать.
Надеюсь не посчитаете за придирчивость или флуд. но Z-index 1000 по-моему черезчур
Никто не мешает поменять на свое, для того и сделано опцией.
плагин крутой, нет слов
добавлю пару инетересный изменений
var selectbox =
$(”+
”+
‘‘+
”+
”);
пока что для селекта – очень удобно когда нужно разные размеры и большие и маленькие и мредние
$(”+
Есть страница на ней подключен
возле “Архива новостей”.
Так вот когда мы делаем
должно брать ссылку с
и переходить по ней.
В Firefox неправильно (не по той ссылке) переходит
В WebKit браузерах вовсе ничего не происходит.
Когда отключаю плагин все работает как задумано.
В теге
select
не должно быть никаких тегов, кромеoption
иoptgroup
, у вас же там всего понапихано.Почистил, но от этого ничего не поменялось.
Причина в версии jQuery. У вас подключена 1.7.1. Поменяйте на 1.8.3.
проблема в опере, если я несколько раз выбираю из списка селекта то присваивается первое ранее выбранное значение. В хроме смотрел – там все работает исправно
версия jquery 1.8.3,
Спасибо большое помогло.
Пожалуйста. Рад, что помог.
Будет ли возможность менять цвет и шрифт для отдельных элементов selecta`a?
Такая возможность уже есть. Добавьте к
option
какой нибудь класс, и он будет автоматически добавлен к соответствующему пункту в псевдоселекте.Да, действительно работает. Только при добавлении класса с заменой цвета, ничего не менялось. Пришлось убрать в .jq-selectbox li:
Можно было ничего не убирать, а прописывать цвета к своим стилям как-то так:
При стилизации простого селекта в случае, если для ul изначально прописаны какие-то стили (например на HTML5 Boilerplate), в выпадающем списке получаем ненужные отступы.
Было бы здорово в дефолтных стилях для плагина сделать обнуление отступов для ul, например так:
Хорошо, добавлю.
Классный плагин, да вот только на демо странице в разделе мультиcелекторы стилизация селекторов не происходит
Chrome версии 24.0.1312.52 m
У меня та же версия Хрома – все селекты стилизованы.
Добавил для тех, кто просил:
– стили для
<input type="text">
и<textarea>
;– обнуление отступов для
<ul>
в псевдоселекте.А классы на текст инпуты скриптом не навешиваются? Просто в какой либо цмс будет довольно геморно это сделать.
Конечно нет. В этом нет необходимости. Класс добавлять не обязательно, стили можно и так указать:
Хотелось бы чтоб оно как-то автоматом умело работать с шириной. Если получится так сделать – было бы отлично.
Плагин ломается в сочетании с jQuery 1.9.0.
Через ~10 секунд select выбрасывает событие onChange, но с одним и тем же значением, checkbox один раз устанавливается, после этого один раз снимается, и потом не меняется вообще.
В jQuery 1.9.0. часть API удалена. Мне нужно некоторое время, чтобы в этом разбираться.
С чекбоксами вроде бы разобрался.
Как воспроизвести эту ошибку?
Делаем select, вешаем на него какой-нибудь обработчик onchange. В обработчике делаем alert( ……val() ) этого select-а. Открываем страничку, начинаем клацать, менять значения. В течении секунд 10 – 15 alert показывает правильные значения, а потом styler меняется, но alert начинает выбрасывать одно и то же значение. Т.е. до самого select-а изменения не доходят.
Выложил новую версию. С jQuery 1.9 теперь работает, как положено.
а почему вы добавили метод prop, но оставили attr? и игнорируете продолжительное время мой пулл реквест?)
Без attr в DOM не добавляется атрибут
checked/selected
, и в результате при отправке формы передаются данные не из выбранного поля.А про пул реквест я не знал, никакие уведомления не приходили.
проверил select из моего форка. не смотря на отсутствие attr, формы передаются корректно.
Вероятно, проблема может возникать из-за removeAttr, который не изменяет состояния элемента, а просто удаляет атрибут.
Ясно, потестируют без removeAttr.
Проверил. От removeAttr тут ничего не зависит. При использовании prop без attr все работает, как положено, данные передаются правильно.
Странно, однако – ранее (когда стилизацию чекбоксов и радиокнопок я делал отдельными плагинами) выбранные пункты на сервер не отправлялись.
По ссылке, которую Вы выкладывали ранее про часть API удалена как раз есть пункт “.attr() versus .prop()”
Я читал уже, только так ничего и не понял. С английским плохо дружу.
Так, просто еще одна полезная ссылка по теме на русском. http://habrahabr.ru/post/119134/
При использовании модального jQueryUI dialog на страничке с селектом, этот самый селект оказывается поверх всего. Дело в том, что у него z-index = 1000, а у div-а .ui-front, которым диалог закрывает всю страничку z-index = 100.
Извините. Про опции я протупил… )
Давайте в jquery.formstyler.css после 270-ой строки подобавляем ко всем селекторам класс styled?.. А то как-то нехорошо получается.
Как повесить свой обработчик события onclick для checkbox-а?
а не получиться сделать так, чтоб автоматом вызывалась функция, прописанная в свойстве onclick этого чекбокса?
Не стоит. Не известно, чего от этого можно ожидать.
А ещё у этого span-а получается такой же id как и у input-а. Это, наверно, неправильно?
Пользователи просили, я сделал. Если с этим будут возникать какие-то проблемы, то уберу.
Но это ж невалидно получается…
Валидатор не видет результаты работы скрипта, но в принципе верно, двух одинаковых id не должно быть. Можно использовать атрибут data-id вместо id
Дима не думал о том, чтобы сделать возможным передачу указанных атрибутов в
к примеру таким образом можно сделать выпадающий список с картинками.
у заводим атрибут data-img=”URL”, который будет передаваться при обработке соответствующему элементу ну а выводить картинку из атрибуте – несложная задача.
Если я тебя правильно понял, все уже сделано. Добавь к тегу
option
какой-нибудь класс, и он появится у соответствующего пункта в псевдоселекте. С data-атрибутами не вижу смысла мудрить.По поводу id – можно сделать, чтобы он удалялся у оригинального элемента и передавался псевдоэлементу. В таком случае одинаковых id не будет. И дополнительные опции никакие не понадобятся. Надо было сразу так и сделать.
Эй, эй )). Подождите. Не надо торопиться “сразу так делать”.
Тут важный принципиальный момент. Ваш styler – он таки стайлер, или что? Если этот плагин предназначен для стилизации, то он должен минимально влиять на работу всего остального. Стилизация должна подключаться/отключаться, в идеале, вообще без изменений в коде. А если переставлять id на совсем другой элемент – это ж получится ой-ой-ой! Так нельзя.
Оригинальный элемент же не виден. Что плохого в том, что его id будет удален?
Я пока еще ничего не меняю. Нужно больше аргументов “за” и “против” такого изменения.
На оригинальных элементах могут висеть обработчики событий, и в этом случае они перестанут работать.
Во-первых, data-атрибуты. Хорошо, если люди придерживаются рекомендаций и используют префикс data-, тогда эти атрибуты можно перетащить в span. Но раньше это было не обязательно, и практически существует много кода, использующего возможность задавать свои атрибуты, названия которых могут быть какими угодно. Просто взять и подключить Styler уже не получится.
Во-вторых, опять же, уже написанный код, использующий “чистый” js: document.getElmentById(“agree”).chaked = false;
В-третьих, насколько я понимаю, обломаются все селекторы с псевдоклассом “:checked”.
Возможно меня не правильно поняли.
Я имел ввиду реализовать возможность передачи атрибутов. А атрибут data взял за пример как самый правильный (с моей точки зрения), т.к. в через него можно передавать данные наиболее гибко.
Идея возникла не на пустом месте. Именно сейчас я столкнулся с проблемой, которой могло и не быть. Необходимо было реализовать переход по ссылке, находящейся в атрибуте data-url у option`a при клике (это хитрая задумка программиста, так что обсуждению не подлежало). Но это не главное, из php приходила не только ссылка, но и url картинки, количество элементов и прочие параметры, которые легко и непринужденно суются в data-* но не передаются в li, проблема конечно не существенная, решилась легко, но могла быть решена “из коробки”.
С другой стороны скрипт предназначен для стилизации, а не для модификации, поэтому и спросил о возможности, потому что самому лень ковырять и дополнять styler )) всё же лучше автора никто не знает скрипт.
Можно сделать. Только нельзя передавать все атрибуты, которые могут быть у тега. Думаю, атрибутом data и можно ограничиться.
Атрибут data-* более чем достаточен. Было бы очень замечательно.
Опять же приучит новичков использовать правильные атрибуты) А то недавно столкнулся с хорошим скриптом, но там в rel передавался целый массив с данными, которые на js преобразовывались в необходимые элементы.
С data-* работать одно удовольствие.
Ну да.
А кроме того, у меня теперь скрипты начинают пестрить конструкциями, типа
“span#agree”, “input#agree”.
А галочек на форме дофига. И логика сложная. Но с другой стороны, id-шник – штука удобная.
Предлагаю использовать настройки. В смысле, опции.
При подключении плагина программер может указать суффикс, который будет добавляться к id input-ов.
Да, поддерживаю по id-шкам. На них вполне могут быть завязаны события. Уже столкнулись с этим. Пришлось выборке делать не по ID.
Выводы, которые я сделал, исходя из ваших комментариев:
1) Ни в коем случае нельзя удалять id у оригинальных элементов.
2) Очень желательно иметь возможность добавляет свой id для псевдоэлементов. Это можно сделать, добавив, например, атрибут
data-id
.Все верно?
2) …Через опции – гораздо лучше.
А поконкретнее? Пример.
если html:
и javascript:
то генерируются span-ы с такими id-шниками: “id1-styler” и “id2-styler”.
Ваша работа вдохновила меня написать стеклянную кнопку (обёртку) .. сначала в виде сниппеты, затем плагином и главное виджетом (модулем класса) . Дело в том ,что написанные мною плагины (Visual-Basic) канули вместе с библиотеками, а вот модули класса (Visual-Basic) работают написанные ещё 96-97 годах и перекочевали от access 7 до облачного 365 . Вопрос конечно теоретический, но не задумывались ли вы написать хотя бы селект в виде виджета .. ? Тем более ему в последней версии jQuery разработчиками уделено немало внимания виджету.
Нравится мне такая форма записи:
Какие хочешь свойства и методы ,те и добайляй …
Не понимаю, о чем вы.
На jQuery есть фабрика виджетов . Она обладает наследственностью, инстализацией, клосами ,приватные и публичные методами, короче полной атрибутикой присущей модулю класса .. Цепляется она в любом месте ,хоть посередине, решены проблемы циклических ссылок и утечки памяти. Подклассы (Коллбэки) имеют область видимости такие как классов CSS , русский понимают .. Проверяю на одновременное подключение разных версий библиотек …
вот нашел обзор на хабе.. только ещё первых версий http://habrahabr.ru/post/120074/