Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 69
это только в демо элементы при событии onmouseup срабатывают или всегда?
Как-то демо выглядит не очень…
хорошо бы видеть кросс-браузерную стилизацию для полей типа «number»
По радиокнопкам, чекбоксам и чекбоксам неудобно перемещаться кнопкой tab (не видно активный элемент формы), по селектам вроде вообще невозможно. Также активный чекбокс нельзя «щелкнуть» пробелом — состояние меняется дважды.
еще одна реализация custom-форм на JQ (лично меня ваш код не вдохновляет — слишком много работы с DOM, селекторы не кешируются, классы по которым строим кастом-формы в коде, а не отдельной опцией)
просто оставлю здесь, первыми были niceforms
+ не привязаны к JS фреймворкам
+ так же внешний вид, через css
— желательно обернуть в анонимную функцию — чтоб глобальную в область видимости не захламлять.
просто оставлю здесь, первыми были niceforms
+ не привязаны к JS фреймворкам
+ так же внешний вид, через css
— желательно обернуть в анонимную функцию — чтоб глобальную в область видимости не захламлять.
niceforms — теперь малиновые на GitHube
— нет API
— нет стилизации выпадающей части select'a
Это то, что навскидку увидел. А так классно, да
— нет стилизации выпадающей части select'a
Это то, что навскидку увидел. А так классно, да
Интересно:
Что именно? Два класса с одним именем?
Ага, вложенные
Для удобства стилизации. Да и чтоб не выдумывать названий новых.
плохая практика: нужно держать в голове, зачем нужен первый, а зачем — второй. Да еще и каскадные селекторы
Назначение первого и второго очевидны из DOM, как по мне.
А вот по поводу каскадности, объясните пожалуйста, чем это так плохо.
Похоже у меня дурная привычка, но я довольно часто оборачиваю элементы во враперы (одноименные) и дальше стилизую css-ом вида:
Мне этот подход казался удобным.
А вот по поводу каскадности, объясните пожалуйста, чем это так плохо.
Похоже у меня дурная привычка, но я довольно часто оборачиваю элементы во враперы (одноименные) и дальше стилизую css-ом вида:
.selector {
}
.selector>.selector {
}
Мне этот подход казался удобным.
Выпадающие списки совсем никакие: V, текст плохо виден, ну про скрол ничего хорошего сказать не могу.
Понятно, что все это можно легко поменять, но ведь именно из-за того, что подобные вещи можно быстро подключить и сразу получить приличное отображение, они и используются в большинстве случаев.
Понятно, что все это можно легко поменять, но ведь именно из-за того, что подобные вещи можно быстро подключить и сразу получить приличное отображение, они и используются в большинстве случаев.
Уже писали, ага, поправим демку, чтобы приятная была сразу.
Что, кстати, заставило писать велосипед? чего не хватало?
Очень часто просто стилизации формы было недостаточно. Приходилось взаимодействовать с формой (с элементами формы). Хотя в jNice есть метод для обновления селекта и его отображения.
В jNice, например, не всегда корректно отрабатывали события change (jQuery) на селектах, нет стилизации скрола у выпадающих списков, что, правда, есть в других плагинах, но там нет методов работы с элементами формы. В общем, везде по чуть-чуть. Возможно я не нашел того идеального, и он существует.
Ну и плюс ко всему — просто for fun. Было интересно, загорелся. Сел — написал. Есть еще множество идей по доработке и конечно же учту фидбэк от пользователей хабра.
В jNice, например, не всегда корректно отрабатывали события change (jQuery) на селектах, нет стилизации скрола у выпадающих списков, что, правда, есть в других плагинах, но там нет методов работы с элементами формы. В общем, везде по чуть-чуть. Возможно я не нашел того идеального, и он существует.
Ну и плюс ко всему — просто for fun. Было интересно, загорелся. Сел — написал. Есть еще множество идей по доработке и конечно же учту фидбэк от пользователей хабра.
Главное, зачем стилизовать всю форму, имхо гораздо удобнее использовать несколько плагинов для каждого контрола отдельно, иногда нужно стилизовать только селект, иногда — только чекбокс.
Наверное, тут дело вкуса. textarea и input[type=text] я не включал. А остальное как правило если стилизируется — то все.
Например, подмена инпутов на button может оказаться крайне нежелательным эффектом.
За-то, написав:
За-то, написав:
$('select').customSelect();
$('input[type=text], textarea').customInput();
$('input[type=checkbox]').customCheckbox();
$('input[type=radio]').customRadio();
Самый проблемный элемент — select реализован неважно, обладает фиксированной высотой и не закрывается при открытии другого селекта, так же не предусмотрен случай, если селект находится внутри блока с overflow:hidden.
З. Ы. код ужасен, в частности, с таким форматированием код можно читать только развернув редактор на весь экран(см. строку 132), в колбеках по 4-5 раза создается объект jquery с одним и тем же dom элементом, комментарии на русском.
З. Ы. код ужасен, в частности, с таким форматированием код можно читать только развернув редактор на весь экран(см. строку 132), в колбеках по 4-5 раза создается объект jquery с одним и тем же dom элементом, комментарии на русском.
Еще селекта не учитывается ширина оригинального селекта, иногда это полезно.
+ по второму нажатию на стрелку вниз не закрывается.
Согласен. Сыровато тут ещё.
Для энтерпрайза Select должен уметь это (что пришло в голову за 5 минут):
Ещё добавлю, что в идеале Page Up и Page Down прокручивают ровно на один экран внутри большого списка.
Всё это умеют редкие JS-библиотеки. Поэтому я рекомендую на серьёзных проектах использовать максимум такой метод habr.ru/post/95510/ или его производные.
Для энтерпрайза Select должен уметь это (что пришло в голову за 5 минут):
- При раскрытом списке список скрывается если:
- нажатии кнопки Space или Esc
- select теряет фокус
- элемент списка активируется
- нажатии мышкой на сам select
- При скрытом списке кнопка Space раскрывает список
- Кнопки Home И Page Up активируют первый элемент
- Кнопки End И Page Down активируют последний элемент
- При раскрытом списке:
- первым выделяется активный элемент списка
- наведение курсором мыши на элемент списка (mouse over) выделяет его (не должно быть двух выделенных элементов)
- при событии mouse out с элемента списка оставляет его выделенным
- нажатие кнопки Enter активирует выделенный элемент
- Символьный ввод с клавиатуры произвоит выделение элемента со значением совпадающим по первым введённым символам
Ещё добавлю, что в идеале Page Up и Page Down прокручивают ровно на один экран внутри большого списка.
Всё это умеют редкие JS-библиотеки. Поэтому я рекомендую на серьёзных проектах использовать максимум такой метод habr.ru/post/95510/ или его производные.
Хороший список. Добавлю, что должно корректно работать любое взаимодействие селекта с JavaScript (в частности, навешивание callback-ов и установка значения). А ширина селекта должна изменяться в зависимости от содержимого, но с учетом min-width и max-width.
А еще у таких плагинов часто проблемы с отображением выпадающего списка. То они съезжают внутри блока с position: relative, то часть блока не видно из-за того, что он ушел за границу страницы.
А еще у таких плагинов часто проблемы с отображением выпадающего списка. То они съезжают внутри блока с position: relative, то часть блока не видно из-за того, что он ушел за границу страницы.
Да и при этом, если не считать действия по кнопкам Home/End/PageUp/PageDown, всё остальное приведённое про Select в этой ветке, является минимумом, без которого неприятно/неудобно его использование.
Ещё посмотрел и заметил, что раскрытый список не прокручивается, если взаимодействовать с клавиатуры (кнопки up и down).
Ещё посмотрел и заметил, что раскрытый список не прокручивается, если взаимодействовать с клавиатуры (кнопки up и down).
Не очень удачный вариант делать подсказку к текстовому полю через значение (value=«Как Вас зовут?»), хочется чтобы он исчезал при фокусе, в том числе и при отключенном JS, а то поле всегда будет проходить валидацию на обязательность и часть ваших пользователей будут звать «Как Вас зовут?».
1. открываем нижний селект, потом верхний — нижний при этом не закрывается
2. При клике на лейбл у селекта — он не становится активным
3. Табом навигация не выделяет активный элемент
Ну и просто 2 насущных вопроса
1. Как оно работает на тачскринах
2. Как оно работает с эвентами — т.е. могу ли я на эти элементы форм навешивать onclick / onchange и.т.д.
2. При клике на лейбл у селекта — он не становится активным
3. Табом навигация не выделяет активный элемент
Ну и просто 2 насущных вопроса
1. Как оно работает на тачскринах
2. Как оно работает с эвентами — т.е. могу ли я на эти элементы форм навешивать onclick / onchange и.т.д.
У меня с jNice была проблема. Несколько сложно отследить события на select. Как обстоят дела в jClever?
live, как я понял, не реализован.
fileinput, как наиболее геморройный элемент, тоже.
fileinput, как наиболее геморройный элемент, тоже.
File-input конечно нужен хоть с минимум функционала. Для сложных кастомизаций File-input уже есть библиотеки гиганты, типа Plupload.com.
Plupload реализует свой file-input с домино и библиотекаршами. Я же говорю о простой кроссбраузерной стилизации input[type=file]. Это не так сложно, как кажется, однако здесь не реализовано.
>live, как я понял, не реализован.
не понял
не понял
Если форма добавляется на страницу через ajax, ваш js её не обработает.
Для этого нужно вызвать jQuery(selector).jClever() на коллбеке.
Или я чего-то не понял?
Или я чего-то не понял?
Инициализация простейшая, всего лишь необходимо добавить класс jClever к форме
Было бы логично, если через ajax пришла форма с классом jClever и ваш JS её сразу обработал. Замените бинды на live или delegate, чтобы jQuery обрабатывал такую ситуацию.
Тут произошла досадная ошибочка. Плагин изначально инициализируется по .jClever()
В посте была неточность. Прошу прощения.
В посте была неточность. Прошу прощения.
И всё-таки, формы пришедшие через ajax с соответствующим классом будут обработаны? Или нужно отслеживать ajaxSuccess и обрабатывать их вручную?
Вручную
Ну тогда ваш плагин вообще ничем «не цепляет». В чем преимущества перед существующими решениями?
Как я вижу такой плагин: я скачал js (и css) и подключил к себе на сайт, где-нибудь в своем скрипте написал
Как я вижу такой плагин: я скачал js (и css) и подключил к себе на сайт, где-нибудь в своем скрипте написал
$('form').jClever(); и больше вообще не парюсь по поводу оформления форм и уверен, что все формы, аяксом они попали на страницу, сгенерированы на JS или сразу на ней были, будут оформлены в едином стиле.Ну, спорить не буду.
Основные преимущества в наличии api. Это то, ради чего все и затевалось. Иначе бы использовал jNice и дальше + просто хотелось сделать своими руками.
Хотя, стоит отметить, что ваша идея заманчива. Нужно обдумать.
Основные преимущества в наличии api. Это то, ради чего все и затевалось. Иначе бы использовал jNice и дальше + просто хотелось сделать своими руками.
Хотя, стоит отметить, что ваша идея заманчива. Нужно обдумать.
Основные преимущества в наличии api
Простите, но вы изобрели велосипед.
Пользователь не должен работать с вашим API, он должен изменять состояние нативных элементов. Если нужно изменить значение элемента select, я буду менять select, а не пользоваться API. А уже ваш JS должен понять, что select изменился и отрендерить его «красиво». Тот же uniform с этой задачей справляется.
Вы не подумайте, что я придираюсь. Возможно мои мысли помогут вам сделать «серебряную пулю» стилизации форм.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
jClever — умный jNice с плюшками. Стилизация HTML-форм