![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)
Здравствуйте! Спасибо за плагин и пояснения!
Подскажите, пожалуйста, в Хроме 27… и 28… версии радио и чекбоксы не отображаются, т. е текст Radio и текст Checkbox виден, а кнопок нет. Куда мне копать?
Не знаю. У себя такой проблемы не наблюдаю.
Спасибо за быстрый отзыв. Буду все еще раз внимательно перепроверять.
Добрый день, отличный плагин, но столкнулся с небольшим вопросом:
Есть селект, нужно отслеживать изменение состояния, если ли какая-то функция предусмотренная в плагине?
Поскольку отслеживать только клик нельзя (поскольку можно ч/з таб и стрелочки выбрть вариант), а по интервалу проверять изменение текста мне кажется слишком загружено для страницы.
Спасибо.
Такой функции нет. Вы можете проверять изменение через функцию change на оригинальном элементе.
Просто старая версия плагина, там оригинальный элемент не меняется если не ошибаюсь, в принципе уже решил проблему, но все равно интересно было узнать, спасибо.
Когда работаешь с селектом с планшета с хрома, например, не срабатывает «умное позиционирование» для открытия вверх. Можно ли определённому из селектов задать принудительное открытие вверх?
Нет такой возможности.
Только что проверил на Android 4.2.2, Chrome 28.0.1500.64 — всё прекрасно работает.
Есть конфликт с validationEngine (https://github.com/posabsolute/jQuery-Validation-Engine)
Даже если чекбокс отмечен, валидация выдает предупреждение.
Есть варианты решения проблемы?
Не знаю. Я не могу заведомо обеспечить совместимость с различными плагинами.
Заглянул в код того плагина. Нашел там такую строку:
Она говорит о том, что плагин проверяет (непонятно зачем), не скрыт ли элемент. В моем же плагине как раз все оригинальные элементы скрыты. Вот поэтому у вас и не работает.
Спасибо за оперативный ответ.
Жаль, оба плагина очень нравятся :(
Но видимо прийдется искать альтернативный плагин валидации.
Плагин отличный уже попробовал и использовал его. Есть небольшое замечание в ИЕ 7 и 8 не скругляются углы, это можно поправить.
И вопрос по ходу: Как вы тестируете версткру в разных браузерах, если например ИЕ7 даже портативный не открывается если на компьютере есть более поздняя версия браузера ИЕ.
А вообще ее раз спасибо за отличную работу, добавил вас в закладки и скоро сделаю пост о вашем плагине. Ура!
Пожалуйста.
Тестирую следующим образом. Использую самую последнюю версию IE, в которой нажимаю F12 и использую это меню — s2.hostingkartinok.com/uploads/images/2013/07/31f69c86319073a8c01db1d2bffca962.png
Да тоже так делаю, но наверное я не правильно задал вопрос. Как вы тестируете если у клиента требования под разные браузеры ИЕ 7, ИЕ8 и ИЕ9. Когда нужно проверить как выводиться сайт в разных браузерах.
Так и тестирую.
Хорошо спасибо буду еще и так пробовать. Еще один вопрос немного не по теме, но можт быть темой для нового поста.
Интересно еще вот какой момент у MAC есть размытие шрифтов, как решать эту проблему. На MAC шрифты получаются шире и иногда на сайтах вместо одной строки получается две, тоже столкнулся при html верстке текущего сайта.
Спасибо огромное за оперативные ответы на мои комментарии, вы супер.
Не могу ответить, я не пользователь Мака. В Интернете ответ наверняка есть.
на safari 6 под обычной макосью — если в стилизованном селекте перемещаться клавиатурными стрелками, то в левой часи экрана появляется стандартный селект, и не тригается каждый ивент нажатия
Использую скрипт для выделения всех чекбоксов:
$(function () {
$(«#selall»).click (function () {
if (!$(«#selall»).is (":checked")){
$(«.checkbox»).removeAttr ("checked");
}
else{
$(«.checkbox»).attr ("checked","checked");
}
});
});
Но при включении Вашего плагина, выделения не происходит. Пробовал добавлять trigger, но безрезультатно. Подскажите, пожалуйста, как можна исправить.
Сделал пример. Вместо ссылки можете использовать любой тег.
Спасибо, большое, может подскажите, как второй скрипт переделать
Вот код html:
Показать скрытый блок
Ничего не показывать
Тут содержимое блока который показываем при выборе «радиобатона»
и скрипт показа скрытого div в зависимости от радокнопки тоже не работает (при включении плагина):
function Show (a) {
obj=document.getElementById («mydiv»);
if (a) obj.style.display="block";
else obj.style.display="none";
}
Баги:
При вызове списка с клавиатуры d.pr/i/25BG, связанно с выносом настоящего селекта влево d.pr/i/yshK
На iOS при выборе в селекте, не скрывается выпадающий список, и зум при фокусе влево экрана.
Если уж делать стилизацию форм, то нужно повторить все возможные нативные контролы и полностью повторить поведение нативных элементов форм.
Я уже не раз отвечал про это в комментариях, да и в статье про это написано — у меня нет возможности протестировать в данной операционной системе.
Старался сделать, насколько это возможно.
Нельзя задать ширину селекта. Величины в хтмл не работают, в цсс то же
Всё можно. Что-то не то делаете.
Мое мнение что в вашем показанном примере
не верна логика указания ширины. Я тупой пользователь, я не хочу разбираться что и как устроено в вашем скрипте, я может быть даже ява скрипт не знаю что бы разобраться, я хочу на селект повесить свой класс, либо задать стилевой атрибут и в нем указать ширину.
Этот вариант будет гораздо удобнее для рядовых пользователей. если я не прав поправь меня. Но мне пришлось отказаться от твоего плагина именно по этой причине. Лишний раз придется объяснять контент менеджеру что ширина селекта задается по твоему примеру, нежели по наитию.
Возможно ли задать цвет для disabled пункта select-а?
Конечно. В статье указаны все используемые классы.
Не в выпадающем списке (по .jq-selectbox li. disabled), а в самом select, чтобы можно было визуально отличить select-ы с выбранными уже значениями от других, которые пользователь ещё не «обработал».
Например:
Select your sex:
Male
Female
забыл вставить код в тег, но думаю суть ясна
Такой возможности нет, т.к. в стандартном селекте это поведение тоже отсутствует.
Добрый день.
Предлагаю добавить установку класса выбранного элемента списка на элемент с классом jq-selectbox__select-text, сейчас нарисованные элементы списка наследуют классы повешенные на нативный элемент. Но не передают их при выборе. Если реализовать такой функционал, это позволит добавлять иконки не только элементам списка, но и выбранному элементу.
Постараюсь реализовать в следующей версии.
Селекты действительно закрываются, но остается класс opened.
Вероятное решение:
341 строка:
заменить на:
Аналогичная ситуация на 385 строке:
Но баг не проявляется, в связи с багом чуть ниже, на 423 строке:
Поиск родительских элементов идет по старому классу, сейчас же используется jq-selectbox, из-за этого бага выпадающий список закрывается даже если клик был произведен внутри него.
Спасибо, что сообщили.
Вопрос: Если функция которая отключает\включения formstyler для 1-го какого-нибудь объекта формы?
Нет. А для чего это может понадобиться?
Просто у меня select формировался с помощью javascript в зависимости от выбранного перед этим значения в другом select.
Спасибо уже сам разобрался
Подскажите, плз. Связанные селекты — после обновления (через ajax) данных в зависимом селекте как сделать чтобы обновились данные в соответствующем ему псевдоселекте???
Глючный плагин, зря время на него потратил.
Поскажите, возможно ли использовать фото вместе с названием для селектов?
Вопрос непонятен.
в выпадающем списке — иконка и текст
Что-то подскажите?
Я не понял, что вы хотите.
Вот для примера скрин с авто сайта — http://imglink.ru/show-image.php?id=3daf105f0396f4512533c57f91797b08.
На странице с примерами показан аналогичный вариант с флагами.
Спасибо.
Прежде всего: большое спасибо разработчику!
Превосходный и удобный плагин! То, что давно искал. Код ровный, с комментариями.
Подскажите пожалуйста, как реализовать в списке выбор нескольких элементов посредством простого клика, не прибегая к клавише «CTRL».
Спасибо!
Это нестандартная задача, на которую требуется время. Ничем не могу помочь.
Думал для вас это не составит труда. Несколько разочарован. В общем-то все довольно просто, решение найдено. Еще раз спасибо за плагин!