![jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)](https://dimox.name/wp-content/themes/dimox.name/cache/ae/82a1275cea527ae_150x100.png)
Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Завершаю серию статей по стилизации элементов html-форм с помощью jQuery и CSS. В этот раз это плагин ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Как и обещал ранее, делюсь своим очередным jQuery-скриптом в виде плагина. Он предназначен для свободного оформления ...
Внимание! Дальнейшее развитие и поддержка плагина остановлены в связи с тем, что теперь он является частью другого плагина. * * * Одна из самых неприятных (и я бы даже сказал ужасных) вещей в веб-разработке — это верстка html-форм. К сожалению, ...
Для того, чтобы оформить чекбоксы и радиокнопки, как того требует дизайн, сегодня не обязательно использовать JavaScript-решения (типа моего плагина jQuery Form Styler), т.к. для этого можно задействовать только CSS, причем с обратной совместимостью ...
Комментарии (2 614)
Было бы замечательно сделать опцию для select’a, чтобы он работал как autocomplete на jquery. Только без всяких фичей типа подгрузка аяксоми т. д. Просто из статических option’ов.
+100. Мне тоже не хватает функции autocomplete. Но аякс все же нужен, без него будет сырой автокомплит.
Набор красивый и приятный. Автор, спасибо, очень классная работа!
А как с помощью jQuery изменить состояние checkbox-а?
Дмитрий, а как на счет стилизации скролл-бара у textarea? Так и не нашел достойного решения в Интернете.
Считаю, что это ни к чему.
При использовании jquery версии 1.8.2 присутствует баг в селектах. После того как выбираешь селект, удаляется класс родительского контейнера, соответственно стили слетают
Да, уже сам столкнулся с этим. Буду разбираться.
Здравствуйте!
Последний раз пользовался старой версией скрипта (1.3.5, кажется). Вижу, что поменялась логика указания ширины селекта. Видимо, этот пункт изменений:
.
Я пробовал разные варианты задания ширины в CSS. Частично работает только задание ширины для нестилизованного селекта, но ширина .jq-selectbox__select при этом не меняется, из-за чего стрелочка вылазит за пределы стилизованного селекта.
Корректно работает только задание ширины через JS, но это неудобно (нужно от общей требуемой ширины селекта отнять паддинги .jq-selectbox__select и толщину границ, если они присутствуют).
Можете указать правильные шаги для задания жесткой ширины селекта?
Ширину нужно задавать для тега
select. В пункте изменений ведь так и написано:либо так:
Да, моя ошибка. Указывал ширину не оригинальному селекту, а стилизованному.
Может, стоит это указать и в описании плагина? А то в истори изменений есть, а в общем описании только
Спасибо за плагин!
Да, тоже об этом подумал. Укажу.
Пожалуйста!
Стоит еще указать красным и большими буквами что указав ширину в процентах у нестилизованного селекта он берет размер непонятно от какого родителя и расползается на весь экран.
Мне кажется если ширина указана в процентах то и в элемент стайл стоит засовывать ее в процентах, а не в пикселях.
Забираю слова обратно, понятно от какого родителя
el.after (selectbox).css ({position: 'absolute', left: -9999});
в коде до этой строки стоит в переменную засунуть значение ширины селекта.
var selectWidth = el. css ('width');
попадет естественно в пикселях, так как в ряде браузеров перестала корректно работать функция getComputedStyle.
Идей по поводу процентов пока нет
В последней версии плагина я уже устранил эту проблему.
Как удалось спарсить значение ширины в процентах и в таком же виде ее подставить? Кстати неплохо было бы еще подставлять и значения внешних маргинов к селекту взяв их от нестилизованной формы. Добавляется так же парой строк кода. Выкладывать я думаю нет смысла
Берется ширина, посчитанная в пикселях, и применяется к псевдоселекту.
Их можно прописать через CSS к псевдоэлементам. Не вижу смысла мудрить с этим.
Ширина посчитанная в пикселах не подходит для резины.
Реализовал поддержку резины. Смотрите новую версию.
Выложил новую версию плагина. Исправил один баг.
Создаю select, по умолчанию ему присваивает Ваш плагин значение:
element.style {display: inline-block;
position: relative;
z-index: 100;
}
Соответственно, если я хочу чтобы select’ы, блочными мне нужно в css писать:
.region__item__select {display: block! important;
}
Тоже самое с классом jq-selectbox__select, ему по умолчанию присваивается:
element.style {width: 70px;
}
Не пойму зачем, может я не до разобрался? Т. е если я меняю ширину в css, мне приходится также !important писать.
Для ширины
!importantписать не нужно.Все выше написанное также касается классов (стилизация поля для выбора файлов):
.jq-file,.jq-file__browse, .jq-file__name
Там присваивается:
element.style {float: left;
}
Например, у меня сейчас дизайн и в нем кнопка обзор находится не слева, а справа.
а если width: auto?
В этом случае ширину вообще не нужно указывать. Она определяется автоматически, исходя из самого широкого пункта. Смотрите примеры, там показаны разные варианты.
Во первых, спасибо за замечательный плагин!1.3.5. Скажите, в новой это исправлено? А то нет возможности сейчас проверить.
Сегодня заметил глюк. В MacOS при стилизации input file кнопка обзор некорректно работает. Срабатывает только если кликнуть в то место где нет текста «Обзор…». Правда это пробовал на версии
У меня нет MacOS.
Воспользовался Вашим плагином, интересная вещь)
Потребовалась более точная настройка type="file", кнопку следовало перенести на лево, пришлось править js 146 строка float: right; ну и добавить «Файл не выбран!»
было бы прикольно если предусмотрите такие настройки в плагине, так как мне легко его изменить и модифицировать, но вот пользователям не знакомым с js будет тяжелее.
А за плагин большое спасибо, аккуратный. Попозже добавлю к нему jScrollPane (для тестов)
Столкнулся с вашим плагином в вёрстке (верстак заюзал).
Довольно удобно и минимум ненужных атрибутов, правда хорошо что нашёл доки по нему, а то аяксом час пытался манипулировать значениями селектов, вроде пашет — а не видно)))
Но всё же спасибо за плагин, очень удобный.
Dimox, спасибо за плагин.
Почему-то не переключались состояния скрытых чекбоксов, которые собственно и должны отсылаться формой.Т. е. у div-a с классом «jq-checkbox» добавляется класс «checked» а у скрытого изначального чекбокса атрибут «checked» не добавляется. Чтобы работало нужно подправить немного анонимную функцию на событии click для checkbox-a. (checkbox.click). Проверь плиз. (версия плагина v1.3.8.2 за 6 сентября)
Атрибут не добавляется, но данные передаются, как положено. Ничего править не нужно.
Dimox, благодарю за плагин!
Скажите пожалуйста, будет ли поддержка readonly в input и не только, возникла проектная необходимость, но как я понимаю, этого аттрибута нет.
Какое отношение к оформлению имеет этот атрибут?
Извиняюсь за оффтоп, разобрался.
Ширина дропдауна у селекта в любом случае подбирается автоматически? Хочу ограничить ее. Пробовал ставить width для .jq-selectbox__dropdown, но свойство переопределяется скриптом.
Что можно сделать, кроме $('#select .jq-selectbox__dropdown).css ('width', 'xxx')?
Что-то не то значит делаете. В скрипте для этого селектора ширина не задается, что укажете в CSS, то и будет. Если вы подключили файл jquery.formstyler.css, то ширина прописана в нем.
Пока не понятно. Первоначально я удалял
.jq-selectbox__dropdown {
width: 100%;
}
, чтобы ширина подбиралась автоматически. Но теперь попались элементы с очень длинным текстом (913px). Именно эта ширина и выставляется для дропдауна, переопределяя значение в css.
Я думаю, может быть проблема в том, что в моем случае селектор наполняется динамически
$('#select').append ('' + options[id] + '').trigger ('refresh');
и уже не обращает внимания на css?
В css работает только если использовать с! important.
Так используйте! important, раз это работает.
Не люблю! important :)
Думал есть стандартные возможности плагина.
Спасибо за ответы.
Есть у вашего плагина Api? очень бы не помешало.
Нет. Какое тут может быть API и для чего оно нужно? Я не разбираюсь в этом вопросе.
Как сделать чекбокс, который отключал и включал бы все чекбоксы, не переключал, а именно включал и выключал? Вот пример на скрине f3.s.qip.ru/I0Rre5Xw.png
Пример — http://jsfiddle.net/Dimox/KgeSA/
Спасибо за решение!
В описании написано, что передаются data-* атрибуты… Как это сделать для селекта? Мне нужно чтобы у каждого options был data-url в котором я передаю ссылку на картинку. Подскажите пожалуйста.
Вот так будет правильнее jsfiddle.net/paffffff/xLhvG/
Не ну это понятно… для обычного селекта все работает, но мне же надо его стилизировать. После подключения этого плагина, дата атрибут не передается, а должен вроде.
От тега
optionэтот параметр не передается.Очень жаль (
Сделаю тогда в будущей версии.
По скорее бы)
Выложил новую версию. Обновляйтесь =)
Очень оперативно) Огромное СПАСИБО!!!
Добавил себе класс для селекта если он «умный» и открылся вверх вместо того чтобы открыться вниз. Других способов определить как открыт селект не нашел.
Не поняла, как выбрать несколько пунктов в мультиселекте?
по-моему должны быть галочки… (как фильтры на lamoda.ru например)
Используйте Ctrl или Shift.
Галочки — это чекбоксы, а не мультиселекты. Почитайте информацию о том, как устроены веб-формы, тогда не будет таких вопросов.
При использовании плагина есть проблема с валидацией формы. как можно решить эту проблему?
Пока никак.
(а я уже обрадовался… думал нашел идеальный плагин.
Напишите хоть, каким способом проверяете валидность, буду что-нибудь придумывать.
работаю с плагином jquery validation. поля не подсвечиваются
Ок, в свободное время посмотрю, что к чему.
Спасибо
дополню, проблема в том, что ваш плагин не передает динамически значение класса.
Посмотрел. Сложно мне пока с этим разобраться.
Здравствуйте.
Можно ли сделать так, чтобы в новые checkbox’ы, которые создаются плагином, передавались события из оригинального input’a?
События следующие: click (уже передается), change, keydown, focus, blur, refresh.
Это нужно для «умного фильтра» CMS 1С-Битрикс, а именно, когда пользователь, например, выбирает определенных производителей техники, то слева от фильтра появляется блок «Выбрано: 5 Показать», как на Яндекс маркете.
Чем вас не устраивают эти события на оригинальном чекбоксе?
Потому что пользователь кликает по диву, а не по инпуту и поэтому события инпута не срабатывают.
Тогда вешайте события на див, а не на инпут.