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>; Содержание: Демонстрация работы плагина Достоинства Недостатки Скачать Подключение плагина Отключение плагина (метод destroy) ...

Полезные комментарии (10)
Комментарии (2 269)
  1. 1
    Игорь

    В общем да, правильней будет сказать, открывается список но не выбирается нужный пункт.

  2. 2
    Дмитрий

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

  3. 7
    Василий

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

  4. 15
    Cript

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

  5. 21
    Василий

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

  6. 23
    Дмитрий

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

    Отказывается работать функционал обновления состояния 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. 28
    Александр

    Есть проблемка с чекбоксом если он внутри тега 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. 29
    Михаил

    Внезапно возникла необходимость в помощи :)
    Юзаю ваш стайлер, и надо было еще прикрутить зависимые списки. попробовал этот вариант .
    Блин, работает либо один, либо другой. Оба не хотят.
    Пробовал всяко, вот так

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

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

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

  9. 32
    Виталий

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

  10. 39
    Geronimo

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

  11. 40
    Сергей

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

    <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. 48
    Роман

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

  13. 53
    Вадим

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

  14. 55
    Александр

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

  15. 57
    Александр

    Здравствуйте, не так давно стал пользоваться вашим плагином, все замечательно, кроме одного момента. Суть такая, при стилизации 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. 61

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

  17. 65
    Иван

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

  18. 68
    Sig

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

  19. 78
    set

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

  20. 91

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

  1. 1
    Роман

    Может кому пригодится, вот решение:

    if (!$(this).html().match(new RegExp('\^' + query, 'i'))) {
  2. 2

    Для тех, у кого обрезается текст в селектах при подключении нестандартных шрифтов, есть вот такое решение с отложенным запуском скрипта:

    setTimeout(function() { 
    	$('input, select').styler(); 
    }, 100)
    

    Буду признателен, если кто-то предложит более красивое решение.

  3. 3

    Можно.

    <select class="myselect">
    .jq-selectbox.myselect { 
     width: 250px; 
    }
    
  4. 4

    В общем, проблема была с angular.

    Имеем: калькулятор на angularjs, данные приходят, но селекты не открываются.
    Решение: Добавить setTimeout примерно как в пятом пункте, чтобы angularjs успел заполнить данными наши селекты :)

  5. 5
    <select class="select1">
    <select class="select2">
    
    .jq-selectbox.select1 {
    	width: 200px;
    }
    .jq-selectbox.select2 {
    	width: 300px;
    }
    
  6. 6
    Денис

    Может кому нибудь пригодится.
    Строка 530

    if (bottomOffset > (minHeight + searchHeight + 20) &amp;&amp; !el.hasClass("top")) {

    Тем селектам которые надо открывать вверх, добавляем класс «top».

  7. 7

    Можно. Вот решение:

    if (window.webkitURL) {
    	$('input[type="file"]').attr('title', ' ');
    } else {
    	$('input[type="file"]').attr('title', '');
    }
    
  8. 8
    Фарит
    		(function($) {
     $(function() {
     var _dropdown;
     var settings = {autoReinitialise: true};
     $('input, select').styler({
     selectSearch: true,
     onFormStyled: function(){
     _dropdown = $('.jq-selectbox__dropdown');
     _dropdown.find('ul').wrap('<div class="scroll-pane" />');
     },
     onSelectOpened: function(){
     var _ul = $(this).find('.jq-selectbox__dropdown ul');
     var height = _ul.height();
     var _srollPane = _dropdown.find('.scroll-pane');
     _srollPane.height(height);
     _ul.css('max-height', 'none');
     _srollPane.jScrollPane(settings);
     }
     });
     });
     })(jQuery);
    	
    .scroll-pane
    {
     width: 100%;
     overflow: auto;
    }
    

    извините за code style, стилезуйте на свой вкус.

  9. 9
    neoxaker

    Более правильным вариантом решения проблемы с подключаемыми шрифтами была бы переинициализация плагина после окончания загрузки шрифта. Отловить загрузку шрифта можно при помощи гугловского скрипта «webfontloader» https://github.com/typekit/webfontloader . При подключенном плагине код переинициализации выглядел бы так:

    (function(){
     if (typeof WebFont != 'undefined') {
     WebFontConfig = {
     custom: {
     families: ['Arimo']
     },
     active: function() {
     $('select, :checkbox, :radio').trigger('refresh');
     }
     };
     WebFont.load(WebFontConfig);
     }
    })();
    

    В данном случае подключалось семейство шрифтов Arimo.

  10. 10

    В плагине это не предусмотрено. Можно сделать следующим образом:

    <label><input type="checkbox" /> Чекбокс</label>
    $('input:checkbox').change(function() {
    	if ($(this).is(':checked')) {
    		$(this).closest('label').addClass('checked');
    	} else {
    		$(this).closest('label').removeClass('checked');
    	}
    });
    
Ваш комментарий