Главная 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. Не силен в javascript… Подождем создателя плагина, он вообще, то оперативно реагирует, вчера видимо просто пропустил Ваш вопрос. А по вашим записям правильней все же наверное сказать открывается список, нужный пункт выбирается просто во второй и последующие разы не происходит никаких событий. Грубо говоря обработчик почему-то не реагирует на событие выбора option у селекта.

  3. Имею схожую проблему, как у Игоря, объясняю: Мои селекты изначально скрыты, при нажатии на кнопку «Добавить», они показываются поочередно (посредством иного скрипта), выбор из селекта работает чудесно, но если снова скрыть селект и опять его показать («Добавить»), мой селектр становится неактивным. То, что дело в вашем скрипте, убедился с помощью его отключения. Заранее благодарю за ответ!

  4. Приветствую!
    У меня список уходит за границу элемента, как исправить эту проблему?
    http://dl91.internetrange.com/signup.png

  5. При обновлении страницы, данные, что были выбраны в прошлый раз — остаются. Как этого можно избежать?

  6. Здравствуйте. Столкнулся с проблемой. Есть сайт в фильтром товаров. Чеки и радио стилизованы Вашим скриптом.

    Отказывается работать функционал обновления состояния input. В двух словах. Я выбираю стоимость товара 1500. Ниже расположены чеки с цветом. Должны остаться только те, которые есть у товаров со стоимостью 1500. Остальным добавляется disabled.

    Ваш скрипт подключен:

    (function($) {
    $(function() {
    
      $('.attribute_box input, .instock input').styler();
    
    })
    })(jQuery)
    
    

    Так как идет обновление состояния input, в скрипте фильтра добавлено:

            setTimeout(function() {
                jQuery('.attribute_box input, .instock input').trigger('refresh');
            }, 1000)
    

    Также пример с кодом:

           
    jQuery(".option_value").each(function (j, k) {
                var f = jQuery(this);
                var l = f.attr("id").match(/option_value_(d+)/);
                if (jQuery.inArray(l[1], e) < 0) {
                    f.attr("disabled", "disabled");
                    if (this.tagName == "OPTION") {
                        f.text(jQuery("#o_" + l[1]).val());
                        f.attr("selected", false)
                    } else {
                        jQuery('label[for="option_value_' + l[1] + '"]').text(jQuery("#o_" + l[1]).val());
                        f.attr("checked", false)
                    }
                }
            });
            setTimeout(function() {
                jQuery('.attribute_box input, .instock input').trigger('refresh');
            }, 1000)
    

    Т. е. сначала идет функция, отвечающая за обновление состояния input, затем я запускаю триггер. Но не получается…

  7. Есть проблемка с чекбоксом если он внутри тега label.

    Если в лейбле разместить ссылку то перейти по ней нельзя.
    Решил проблему модификаций кода плагина:

    							el.closest('label').add('label[for="' + el.attr('id') + '"]').click(function(e) {
    								var target = $( e.target );
    								if (!target.is("a")) {
    									checkbox.click();
    									e.preventDefault();
    								}
    							});
  8. Внезапно возникла необходимость в помощи :)
    Юзаю ваш стайлер, и надо было еще прикрутить зависимые списки. попробовал этот вариант.
    Блин, работает либо один, либо другой. Оба не хотят.
    Пробовал всяко, вот так

    $("#series").chained("#mark").styler();

    styler работает вообще интересно :)

    Дим, помогите совместить эти две не совместимые вещи, или может у вас есть на примете вариант с зависимыми списками работающий с вашим стайлером.

  9. А можно стилизовать полосу прокрутки в выпадающем списке?

  10. В стилизованном select`e на скрытой форме не выпадает список, все стили стандартные

  11. Доброго времени суток!
    Подскажите пожалуйста как выбирать\отменять все чекбоксы в блоке?
    как пример — есть три блока:

    <div class="firstbox">
         <span>Выбрать всеОтменить все</span>
         <ul>
              <li><input type="checkbox"  />Text 1</li>
              <li><input type="checkbox"  />Text 2</li>
              <li><input type="checkbox"  />Text 3</li>
         </ul>
    </div><!--.firstbox-->
    
    <div class="secondbox">
         <span>Выбрать всеОтменить все</span>
         <ul>
              <li><input type="checkbox"  />Text 1</li>
              <li><input type="checkbox"  />Text 2</li>
              <li><input type="checkbox"  />Text 3</li>
         </ul>
    </div><!--.secondbox-->
    
    <div class="thirdbox">
         <span>Выбрать всеОтменить все</span>
         <ul>
              <li><input type="checkbox"  />Text 1</li>
              <li><input type="checkbox"  />Text 2</li>
              <li><input type="checkbox"  />Text 3</li>
         </ul>
    </div><!--.thirdbox-->
    

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

  12. Подскажите, можно ли сделать так, что бы при нажатии на select сразу можно было писать (что бы не нужно было ставить курсор в строку поиска)?

  13. Здравствуйте!
    Решил использовать скрипт на сайте.
    Использую select и checkbox.
    Визуально все работает.
    Но при отправке формы не приходят данные из выбранного селекта. Получается что в option не присваивается атрибут selected.
    Подскажите что можно сделать чтобы выбранное значение селекта передавалось?

  14. Хотелось бы какой-нибудь селектор, который бы не применял плагин для определенных элементов формы. Т. е. по умолчанию на весь сайт плагин работает. Но есть отдельные элементы, где это не нужно.

  15. Здравствуйте, не так давно стал пользоваться вашим плагином, все замечательно, кроме одного момента. Суть такая, при стилизации select, если он находится в блоке у которого присутствует overflow: hidden; скрывается раскрывающийся список, но если select не стилизовать отображается все нормально.
    код следующий:

    <ul><li>
    		<div class="form_left">
    			<span>Какой пункт правил нарушен?:</span>
    		</div>
    		<div class="form_right">
    			<select name="rules">
    			<option value="">Выберите:</option>
    			<option value="1">1.1</option>
    			<option value="2">1.2</option>
    			<option value="3">1.3</option>
    			</select>
    		</div>
    </li></ul>
    
    form ul {
    	list-style-type: none;
    	display: block;
    	padding: 15px;
    	margin: 3px;
    	border-radius: 8px;
    	background-color: #FFFFFF;
    }
    form ul li {
    	list-style-type: none;
    	display: block;
    	padding: 0px;
    	margin: 0px;
    	overflow: hidden;
    }
    form ul li .form_left {
        width: 30%;
        float: left;
        padding: 5px 0px;
    }
    form ul li .form_right {
    	width: 68%;
    	float: right;
    	padding: 5px;
    	margin: 0px;
    }
    form ul li .form_left, .form ul li .form_right {
        padding: 0px;
        margin: 0px;
        display: block;
        text-align: left;
    }
    

    overflow: hidden убрать не представляется возможным
    какое может быть решение этой проблемы?

  16. Дружище, за плагин спасибо, просьба сделать некоторые правки.
    В выпадающих списках не добавляй «display: block; white-space: nowrap;» для каждого li, оно не существенно на небольших списках, на на списке 4000 записей тормоза появляются нереальные. Можешь не спрашивать зачем нам 4k записей, заказчик упёрся рогом, что все опции должны быть в одном выпадающем списке, ну такого его желание. Не суть. Я тебе могу сказать, затык происходит в браузере в момент. trigger ('refresh'), т. е. получение ajax-данных, загрузка в массив, загрузка в нестилизованный выпадающий список — мгновенно, с стилизацией — браузер встает колом, анимация загрузки останавливается на время обработки. trigger ('refresh'). И если liClass='', не надо в li прописывать class='', вроде мелочь, но на больших объемах очень сильно чувствуется. Еще раз спасибо за плагин!

  17. Возникла небольшая проблема с плагином.
    Нужно сделать связанные списки (страны, города), при замене всех option у select’a перезапускаю плагин с помощью trigger ('refresh'), и там где много option’ov (около тысячи) браузер начинает жутко тормозить, а firefox и вовсе вылетает, конечно тысяча option’ov это много, но все-таки.

  18. В js не силен. не понял принцип написания триггера refresh при динамическом обновлении контента.
    По сути: на странице есть один селект, при выборе элемента из списка которого, ajax’ом подгружается второй селект. как сделать чтоб стайлер его тоже подхватывал?

  19. Здравствуйте. Заметил, что в ие9 под вин7 селект без заданной ширины «глючит и колбасит» :) даже на вашей странице с примерами: видеозапись

  20. Выложил новую версию — 1.6.1.

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