Главная JavaScript

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

jQuery Form Styler — плагин для стилизации элементов HTML-форм (input[type=checkbox], input[type=radio], input[type=file], input[type=number], select)

Данный плагин позволяет стилизовать с помощью CSS следующие HTML-элементы: флажок <input type="checkbox">; переключатель <input type="radio">; поле для выбора файла <input type="file">. поле для ввода чисел <input type="number">. раскрывающийся список <select>; Демонстрация работы плагина Живые примеры можно посмотреть на отдельной странице. Стоит заметить, что при ...

Комментарии (2 614)

  1. Недавно столкнулся с проблемой: часть страницы обновляется через ajax. Обновленные селекты без стилизации.
    Вроде понятно, что нужно вызвать метод. styler () повторно. Но вот как отловить момент обновления элемента. Сам механизм обновления через ajax заложен в CMS. Туда лезть нехорошо.
    В результате нашел довольно таки простое решение — прописать вызов метода в глобальных настройках ajax запросов:

    jQuery.ajaxSetup({complete: function(){jQuery("select").styler(); }}); 

    Может кому пригодится…

    • Спасибо, пригодилось)

      • Спасибо, пригодилось!
        Самое интересное, что пробовал этот код вставлять в конце ajax запроса — не работало, а заработало, если в начале.

        Ну т. е. например:
        1. Так не работало
        onclick='my_function (); jQuery. ajaxSetup ({complete: function (){jQuery («select»).styler (); }}); '

        2. Так заработало
        onclick='jQuery.ajaxSetup ({complete: function (){jQuery («select»).styler (); }}); my_function ();'

        Если в коде, то соответственно, тоже в начале
        function my_function ()
        {
        jQuery.ajaxSetup ({complete: function (){jQuery («select»).styler (); }});

        … далее код

    • Спасибо, это до сих пор работает, правда я другую библиотеку использовала для селектов

  2. Не понятно, для чего ипользовать лишие скрипты, если все это можно сделать в CSS с помощью псевдоэлементов. Правда, в старых браузерах работать не будет.

    • Не спорю все будет красиво и не так грузить браузер, но грошь цена верстке которая сейчас фигово смотрится в ИЕ8, увы, но такие реалии… к примеру Themeforrest уже отказался от поддержки ие8, а вот наши отечественные клиенты по прежнему считают что верстка под ие 8 показатель мастерства верстальщика и студии в целом отчасти с ними согласен. Бывают даже весельчаки которые просят ие 6))

      П.С. Автор спасибо за хороший плагин, очень кстати, все просто и доступно

  3. Чтобы не быть голословным! Я сделал украшения чекбоксов и радио с помощью псевдоэлементов в CSS. Идея не моя, где-то видел, уже не помню. Делается так.
    Заключаем input в div и добавляем label:

     <div class="switch">
    <input/>
    <label></label></div>

    Далее в css прописываем:

    .switch {
        position: relative;
    	display: inline-block;
    	top: -2px;
    	margin-right: 5px;
    }
    
    .switch input[type=checkbox],
    .switch input[type=radio]
     {
        position: absolute;
    	top: 3px;
    	left: -4px;
    	width: 30px;
    	height: 20px;
    	z-index: 100;
    	opacity: 0;
    	cursor: pointer;
    }
    .switch_layered label{
    	
    	width: 16px;
    	height: 16px;
    	border: 1px solid #888;
    	background: #F6F6F6;
    	box-shadow: 0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF;
    	vertical-align: middle;
    	cursor: pointer;
    	display: inline-block;
    }
    
    .switch input:checked ~ label:before {
    	
        display: block;
    	content: "f00c";
    	font-size: 16px;
    	line-height: 18px;
    	color: #30A720;
    	font-family: FontAwesome;
    }

    Я использовал FontAwesome для отмеченных чекбоксов, он работает только с: before

    Вот собственно и все. Стили, конечно, нужно поправить под конкретные нужды.
    Самое главное, нет проблем с обработкой onclick.

    Результат можно посмотреть у меня на сайте: http://pushpizza.ru/24-japan-menu

    PS В старых браузерах не работает, поэтому надо прописать в стилях для них не показывать новые чекбоксы, то есть сделать видимыми нативные.

  4. Использую плагин для стилизации select. При перезагрузке текущей страницы, select сохраняет выбранное ранее состояние. Как сделать чтобы он при перезагрузке страницы выбирал, как и положено, первый?

  5.   <input type="reset" />

    Визуально не сбрасывает настройки формы, хотя должен, юзать Api?

  6. Выложил новую версию плагина. Будет интересна тем, кто хотел поддержку плагинов валидации. Вот живой пример с использованием плагина jQuery Validation.

    В связи с этим в инструкциях по подключению моего плагина добавил новый пункт, прошу обратить на него внимание.

  7. Плагин замечательный, спасибо!
    Только у меня не получается применить его для селектов. Вот фрагмент кода:

    <html>
    	<head>
    		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    		<link rel="stylesheet" href="style.css" type="text/css" />
    		<link rel="stylesheet" href="jquery.formstyler.css" type="text/css" />
    		<script src="jquery-1.10.2.min.js"></script>
    		<script src="jquery.formstyler.min.js"></script>  
    		<script type="text/javascript">
    			(function($) {
    				$(function() {
    				$('input, select').styler();
    				})
    			})(jQuery)
    		</script>
    		<title>title</title>
    	</head>
    	<body>
    <select>
    					<option>-- Выберите --</option>
    					<option>Пункт 1</option>
    					<option>Пункт 2</option>
    					<option disabled>Пункт 3</option>
    					<option>Пункт 4</option>
    					<option>Пункт 5</option>
    				</select>
            </body>
    </html>
    

    С кнопкой, например, все получилось. Что я делаю не так?

  8. Понравился скрипт! Один нюанс. Было бы замечательно если selectbox обладал поиском по содержимому, так же как chosen. Надеюсь вы добавите функцию поиска! =)

  9. Здравствуй, не пойму где засада, сделал чекбокс «Выбрать все», но триггер работает лишь однажды на включение, в остальном только выключает все чекбоксы
    http://jsfiddle.net/57u3K/1/

  10. Выложил новую версию плагина. Добавил поиск в одиночном селекте.

  11. Во валидация заработала) теперь вообще нормуль. Спасибо.

  12. Планируется ли доработка мультиселекта а-ля Bootstrap Multiselect или что-то подобное?

  13. В версии плагина 1.4.6 не работает переключение радиокнопок в группе. После долгих мучений оказалось что если отсутствует обертка form, то кнопки не выключаются. В ранних версиях плагина было все хорошо :)

    • Логично же, что элемент формы должен находиться в теге form.

      • Чаще всего да. Однако допускается использовать любые элементы вне тэга form кроме

        input type=''submint"

        . Иногда это надо, например для пользовательского интерфейса. По крайней мере это требование надо отметить в примечаниях. Еще из пожеланий при неуказанной ширине селекта не учитывается ширина триггера-стрелки.
        А вообще спасибо за плагин очень классный!

        • Любой элемент можно использовать вне формы:

          <form id="data"></form>
          <p><input placeholder="Ваше имя" name="user" form="data"></p>
          <p><input type="submit" value="Отправить форму" form="data"></p>

          Тут уже как посмотреть, но в вашем случаи можно просто допилить скрипт под конкретный сайт:
          после

          selectSmartPositioning: true

          добавить:

          ,radioParent: 'form'

          А

          radio.closest('form')

          заменить на:

          radio.closest(opt.radioParent)

          Ну и при инициализации скрипта указывать нужный селектор

          $.styler({radioParent: '.element'})
        • Еще из пожеланий при неуказанной ширине селекта не учитывается ширина триггера-стрелки.

          Она и не должна влиять на ширину селекта. Такое же поведение и у нестилизованного селекта.

  14. Установил плагин, но почему-то он работает только на поле «input type="file»
    Остальные поля не оформляются. В чём может быть проблема.

  15. Форма:

    <p>* поля обязательные к заполнению</p>
    <div>[[+fi.error.error_message]]</div>
    <form action="[[~[[*id]]]]" method="post"><input type="hidden" name="nospam:blank" value="" />
    <div><label for="name">Имя: </label> <input id="name" type="text" name="name:required" value="[[+fi.name]]" /> <span>[[+fi.error.name]]</span></div>
    <div><label for="name">Email: </label> <input id="email" type="text" name="email:email:required" value="[[+fi.email]]" /> <span>[[+fi.error.email]]</span></div>
    <div><label for="subject">Тема вопроса: </label> <input id="subject" type="text" name="subject:required:stripTags" value="[[+fi.subject]]" /> <span>[[+fi.error.subject]]</span></div>
    <div><label for="contact_attachment">Прикрепить файл: </label><em>(не обязательно)</em><br /> <input type="file" name="contact_attachment" value="[[!+fi.contact_attachment]]" /></div>
    <div><label for="message">Текст вопроса: </label><span>[[+fi.error.message]]</span> <br /> <textarea id="message" name="message:required:stripTags" rows="7" cols="55">[[+fi.message]]</textarea></div>
    <div><input type="submit" name="Submit" value="Отправить вопрос" /></div>
    </form>
    

    Плагин:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="jquery.formstyler.css" rel="stylesheet" />
    <script src=jquery.formstyler.js"></script>
    	<script type="text/javascript">  
    (function($) {  
    $(function() {  
      
      $('input, select, textarea').styler();  
      
    })  
    })(jQuery) 
    
    • Читайте внимательно вначале статьи, что стилизует данный плагин. Из этого списка в вашей форме есть только input[file], все верно стилизовалось.

      А текстовые поля и кнопки стилизуются путем добавления вручную класса .styler. Плагином они не стилизуются, тут чистый CSS.

  16. Подскажите, что нужно подправить, что бы в селекте искать с первой буквы (т.е. если пользователь нажимает M, то показываются только варианты на букву M). Сейчас ищет все вхождения. Спасибо.

  17. А как плагин заставить работать с fancybox?
    Fancybox открывается, а select не стилизуется… Видимо стилизацию надо запускать только после открытия окна?

  18. Имею проблему по ширине select. Она определяется всегда уже по ширине, чем требуется. То есть надпись режется (class jq-selectbox__select-text). Пришлось закоментировать в jquery.formstyler.js строку 376

    selectbox.width(el.outerWidth());

    Ширина определяется почти корректно и есть много глюков. Помогите выйти из тупика. Заранее благодарен.

  19. Подскажите, пожалуйста, как быть.
    В коде файла jquery.formstyler.js — на чекбоксе есть событие onClick, например:
    checkbox. click (function () {
    if (!checkbox.is ('.disabled')) {
    if (el.is (':checked')) {
    el. prop ('checked', false);
    checkbox. removeClass ('checked');
    } else {
    el. prop ('checked', true);
    checkbox. addClass ('checked');
    }

    А у меня в чекбоксе прямо прописано, что на onClick происходит некое событие:

    <input class="checksel" type="checkbox" id="ck_" onClick="SelectOne(this.checked, )" />

    Этот клик не срабатывает.
    Какой можно найти выход из этой ситуации?

  20. В IE8 и ниже, виснет страница с одиночным select. Даже демо-страница «Одиночные селекты» dimox.github.io/jQueryFormStyler/demo/#select. Все остальные элементы работают.

Ваш комментарий