Главная 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. Выложил новую версию плагина. Изменения.

  2. Какая лицензия у этого плагина?
    Например, если я захочу использовать его как часть коммерческого продукта?

  3. Если в хроме на маке начать переключать селект через клавиатуру, то появляется родной http://s2.ipicture.ru/uploads/20 130 127/XlhCrX2r.png

  4. Немного лень разбираться с кодом… и задам вопрос)
    Надо привязать к выпадающему списку ID с префиксом.

    Чтоб можно было осуществить перехват и сделать доп. подгрузку в другой select
    Иль есть спец функция для этих целей?

    • ID назначьте оригинальному селекту и уже с ним и работайте.

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

  5. нужна помощь, код

    $(function() {
                $('input').styler();
                
                $("#check_all").change(function() {
                    if ($(this).is(':checked')) {
                        $('.mess_checked input').attr('checked', true);
                    } else {
                        $('.mess_checked input').attr('checked', false);
                    }
                    $('.mess_checked input').trigger('refresh');
                });
            });

    срабатывает только 2 раза, в чем причина

  6. решил вопрос по другому

    $("#check_all").change(function() {
                    if ($(this).is(':checked')) {
                        $('.mess_checked input').attr('checked', true);
                        $('.mess_checked span').addClass('checked');
                    } else {
                        $('.mess_checked input').attr('checked', false);
                        $('.mess_checked span').removeClass('checked');
                    }
                });
  7. и тригер не понадобился…

  8. Интересует как у вас работает border-radius в IE.
    Сделал себе. Всё перепроверил, все стили перепроверил… а в IE не хочет закругляться

  9. Хочу при нажатие кнопки что бы произошел сбросить все input=radio (что бы ни один не был веделен)
    $('input:radio').removeAttr («checked»).trigger ('refresh');
    $('input:radio').prop ('checked', false).trigger ('refresh');

    Не происходит почемуто ((, как исправить?

    • Это моя недоработка. В ближайшие дни выложу исправленную версию. Спасибо, что сообщили!

      Исправляется следующим образом. Заменить:

      if (el.is(':checked')) {
      	$('input[name="' + el.attr('name') + '"]').next().removeClass('checked');
      	radio.addClass('checked');
      }
      

      на:

      if (el.is(':checked')) {
      	$('input[name="' + el.attr('name') + '"]').next().removeClass('checked');
      	radio.addClass('checked');
      } else {
      	radio.removeClass('checked');
      }
      
  10. Добрый день!
    В начале хотел бы поблагодарить автора за отличный плагин!
    Подскажите пожалуйста, по такому вопросу.
    У меня имеется структура:

    <label><input type="checkbox"> Text </label>

    Хочу, чтобы при выборе инпута, также подсвечивался и текст в лейбле другим цветом.
    Т. е. по сути, при выборе инпута, лейблу тоже надо присвоить класс checked.
    Что необходимо подправить в плагине?

    P. S. Пытался решить вопрос с помощью css, но видимо не хватает знаний :(не вышло…

    Спасибо.

  11. Добрый день, начал пользоваться вашим плагином, но столкнулся с проблемой.
    Мне нужно чтобы при клике на ссылку выбор в селекте менялся. Сделал так:

    				<script>
    					(function($) {
    					$(function() {
    
    					  $('.mybutton').click(function(e) {
    						e.preventDefault();
    						$('#myselect #go').attr('selected', true).trigger('refresh');
    					  })
    
    					})
    					})(jQuery)
    				</script>
    

    Но проблема в том что выбранный до этого пункт не сбрасывается, они выбираются оба. Собственно вопрос:
    Как это дело можно реализовать?

  12. Привет.

    Спасибо за скрипт. У меня вопрос по нему.

    Я формирую пункты считывая их из xml. Потом вызываю styler () и получаю кукиш))
    В html есть, а списке. dropdown ul пусто, нет ни одного пункта.

    Буду благодарен за помощь.

  13. Есть проблема, на сайте к боди прописан direction: rtl; и не работает селект, т. е. кликаю и он открываются как в новым окне. если снимаю direction: rtl; то то работает, можно как-то исправить?

  14. Спасибо за просто фантастический стилизатор! Мне очень понравился!

    У меня есть вопрос к автору:

    Как у Одиночного селекта с группировкой пунктов optgroup при выборе элемента, возвращать как выбранный элемент не только сам элемент списка, но и его группу.

    Например при выборе Группа 2
    2.1. Пункт 1
    2.2. Пункт 2
    2.3. Пункт 3

    Как сделать так, чтобы в selected появилось например Группа 2 / 2.2. Пункт 2.

    Я не смог найти доступ к Группе. Но понятно, что нужно добавить группу через вот эту строчку

    divText.text(option.filter(':selected').text());

    Я пробывал селестор. closest (), но что-то не получилось:

    divText.text('Выбрано:  ' + option.filter(':selected').closest('.optgroup').text() + option.filter(':selected').text());

    Подскажите пожалуйста, должно быть просто?!

    Спасибо!

  15. <input class="styler" type="number" value="0" size="6" />

    В интернет эксплорере не показывается как в других. Как-то можно пофиксить до идентичности?

  16. А как задать размер обычного

    <select>

    ?

  17. Обновил jQ до v.1.9.1 и массовый выбор чекбоксов перестал работать…
    До этого Вот Ваш пример отлично работал. Я так понял, какие-то изменения с тригером произвели, по ходу… В общем, после загрузки страницы по 1 разу выбираются/отменяются всех чекбоксы, потом только строки подсвечиваются…

    Помогите починить, пожалуйста? :)

  18. Почитал несколько предыдущих страниц, и возник вопрос: Никто не пробовал сделать смену подсветки текста при переключении выбора одиночного выбора?

    <input type="radio" id="poll" /><label for="poll">1 вариант</label>
    <input type="radio" id="poll2" /><label for="poll2">2 вариант</label>

    Это удобно при создании опросов, например… ;)

  19. Привет. Спасибо за плагин. Но у меня траблы есть.

    У меня список выглядит так:

    <select onchange="javascript: window.location = DIR_WEB_ROOT +'/people/city/' + this.value">
    			<option value="0">Укажите ваш город</option>
    		{foreach from=$aCityList item=oCity}
    			 <option value="{$oCity->getId()}">{$oCity->getName()|escape:'html'}</option>
    		{/foreach}
    	</select>

    oCity — это город. так вот на выходе с вашим плагином список пуст. Вот что вижу
    СКРИНШОТ

    Где поправить чтобы работало?

  20. Подскажите пожалуйста подключил ваш плагин. Работает везде кроме ИЕ7−9. В чем может быть ошибка. Я сам jquery еще не понимаю.

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