Главная 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. Если select находится близко к правому краю экрана, для разворачивания его влево, а не вправо нужно в jquery.formstyler.js (строка 440)
    if (liWidth1 > selectbox. width ()) {
    dropdown. width (liWidth1);
    }
    изменить на if (liWidth1 > selectbox. width ()) {
    if (liWidth1 + selectbox. position ().left + selectbox. width () > screen. width) {
    dropdown. css («left», selectbox. width ()-liWidth1+'px');
    }
    dropdown.width (liWidth1);
    }

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

  4. пробовал
    ставил там 9 999 999 999
    нет эффекта

  5. Делаю так:

    <input type="radio" name="radio1" value="1" /> Первый параметр
    <input type="radio" name="radio2" value="2" /> Второй параметр
    <input type="radio" name="radio3" value="3" /> Третий параметр
    

    Кликаешь первую радио кнопку, поток кликаю вторую, но предыдущая не меняет стиль на вкл. Тупо все кнопки выделяются.

    Как лечится?

  6. Плейсхолдер на селекте не работает, что я делаю не так?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    	<title>Document</title>
    	<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    	<script type="text/javascript" src="js/jquery.formstyler.js"></script>
    	<link rel="stylesheet" href="css/form.css" />
    	<script type="text/javascript">
    	$(document).ready(function() {
    		$('select, input').styler();
    	});
    	</script>
    </head>
    <body>
    	<select name="search-form__region" id="search-form__region" data-placeholder="Выберите регион">
    		<option value="0" label=""></option>
    		<option value="1" label="Значение 1">Значение 1</option>
    		<option value="2" label="Значение 2">Значение 2</option>
    		<option value="3" label="Значение 3">Значение 3</option>
    		<option value="4" label="Значение 4">Значение 4</option>
    		<option value="5" label="Значение 5">Значение 5</option>
    	</select>
    </body>
    </html>
    
    
  7. Уважаемый, Dimox. А Вы недостаток с Mac OS решать не будете?)

  8. Здравствуйте. А этот плагин поддерживает выпадающий вводимый список?

    <input list="list_name">
  9. всегда проверяйте обрамлены ли радиокнопки тэгом form если нет, то радио работать не будут) странно конечно)

  10. Как прокинуть клик со стилизованного элемента на его input?

  11. В общем придумал как прокинуть клик вниз на input, использовал калбэк onFormStyled

    $('.jq-radio').each(function () {
    $(this).on('click', function (e) {
    var $this = $(this),
    clicked = $this.data('is_clicked');
    if (!clicked) {
    $this.data('is_clicked', true);
    $this.find('input').click();
    }
    })
    });
    
  12. Проверка на iOS срабатывает и на WP8 смартфонах, немного поправил:

    var iOS = (navigator.userAgent.match (/(iPad|iPhone|iPod)/i) && !navigator.userAgent.match (/(Windows\sPhone)/i))? true: false;

  13. Ну как-то так:

    Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; Nokia; Lumia 620) like iPhone OS 70_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

  14. добрый день!
    подскажите что нужно сделать чтобы начал работать следующий кусок кода, после применения styler?

    $(".coolfilter-item-checkbox input:checkbox, .coolfilter-item-select input:checkbox").click(function(){
    	console.log($(this));
    });
    
  15. Хотелось бы больше колбеков, например
    OnBeforeElementStyled (this = input)
    OnAfterElementStyles (this = input, elem = обертка styler например $(‘.jq-radio') если это радиобатон итд)

    • Поясните, для чего они нужны.

      • OnBeforeElementStyled — пригодится для модификации инпута перед стилизацей пока не знаю зачем может понадобится
        OnAfterElementStyled — 100% must have, например для проброски своих евентов на манипуляции со стализационной оберткой
        тотже код для прокидывания клика на радиобатон будет проще и элегантнее и быстрее работать чем мой код приведенный выше

        OnAfterElementStyled: 
        function($styled) {
          $styled.on('click',function(e){
            e.stopPropagination();
            $(this).trigger('click');
          })
        }
        

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

  16. Добрый день.

    Не выводится в селекте текст по умолчанию. Выводится сразу текст selectPlaceholder’а.

  17. Добрый день!
    Прежде всего хотелось бы вас поблагодарить за проделанную вами работу.
    Постоянно слежу за новыми версиями вашего плагина, но вот при использовании версии 1.6.1 перестал работать некоторый функционал, связанный с элементом select. Замечу, что в предыдущих версиях всё работало отлично.
    Если форма скрытая, то при ее последующем отображении не работают выпадающие списки.
    Начал смотреть код и сравнивать с версией 1.6, оказалось, что если в строчке 429 вместо кода
    l.css ({'display': ''});
    вернуть как было до этого
    l.css ({'display': 'block'});
    то выпадающие списки отображаются.

    trigger ('refresh') использую.

    Подскажите, что делать в данном случае?

  18. Как ограничить добавление полей для выбора файлов, например до 5

  19. Приветствую! Спасибо за плагин.
    Хотелось бы уточнить — в описании есть пункт для селектов:
    *Поддерживает «умное позиционирование», т. е. не уходит за видимую часть страницы при открытии списка.
    На моей тестовой странице селект, с заведомо очень длинным пунктом, просто добавляет горизонтальную прокрутку вместо того, чтоб сменить привязку дропдауна с левой стороны на правую (или по центру селекта). Как добиться умного позиционирования из коробки? Или единственное решение — воспользоваться вариантом предложенным в комментарии Вячеслава (1577)? Спасибо за внимание.

  20. UPD: вот jsfiddle моего случая с нерабочим «умным позиционированием». Что я делаю не так?

    • Поддерживает «умное позиционирование», т. е. не уходит за видимую часть страницы при открытии списка.

      Тут имеется в виду только верх или низ окна браузера.

      В вашем случае достаточно добавить стили:

      .myform .jq-selectbox__dropdown {
          left: auto !important;
          right: 0;
      }
      
      • Спасибо за внимание. Но ведь в таком случае мы безусловно переопределяем вывод с лева на право, а интересует именно переопределение по условию. Алгоритм примерно следующий:

            var parent = $(".parent"); //родитель границы которого "нарушаются"
            var lopt = $(".longest-option-elem"); //самый длинный option
            if (lopt.width() < parent.width() &amp;&amp; ( lopt.offsetLeft() + lopt.width() ) > parent.width() ) {
                toggle_lopt_position(); //сменить привязку на правый край или центр.
           }
        

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