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

Полезные комментарии (10)
Комментарии (2 583)
  1. 1
    Евгений

    Добрый день! Большое спасибо за плагин! А планируется ли реализация поддержки браузеров на мобильных телефонах, либо есть ли какой то способ включить поддержку мобильных устройств? Дело в том, что я хотел бы использовать ваш благин в мобильной версии сайта. Особенно мне нравится функция поиска по списку в селектах. У меня есть один селект где порядка 75 пунктов, и поиск по этим пунктам очень удобная функция, но она к сожалению работает только через браузер компьютера, при заходе через браузер мобильного, например через Safari на iOS, селект работает как стандартный селект, а именно jq-selectbox__dropdown не отображается, а открывается стандартный способ выбора пункта селекта как если бы плагин не был использован.

    • 2

      Не нужно обобщать мобильные устройства, потому что такая ситуация только в iOS.

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

      Если найду решение, то конечно же сделаю, как положено.

  2. 3

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

  3. 11

    Здравствуйте.

    Решил попробовать поработать с Вашим плагином. Все отлично. За исключением одного момента. У меня на сайте два селекта (к примеру). Делаею выбор в первом, аяксом посылаю запрос, получаю ответ и вставляю внутрь второго селекта. Т.е. формирую для второго селекта динамически.

    После получения ответа и вставки во строй селект использую триггер refresh:

    				success: function(json) {
    					jQuery('#s2').html(json);
    					setTimeout(function() {
    						jQuery('#s2').trigger('refresh'); 
    					}, 100) 					
    				},
    
    

    Но почему то обновляет значение только один раз. Второй уже не отрабатывает. НЕ подскажете в какую сторону копать?

    Спасибо.

  4. 14

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

  5. 20

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

  6. 21
    serzhei

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

  7. 22

    Здравствуйте. Спасибо за отличный скрипт. Когда при развернутом списке нажимаешь кнопки вверх или вниз, он не прокручивается. В вашем примере это видно: http://dimox.github.io/jQueryFormStyler/demo/#select — «Селект с группировкой пунктов» (воспроизводится в FF23, Chrome, IE8). Также, если у селекта есть поиск, эти клавиши нефункциональны, потому что фокус всегда стоит на поле поиска.

  8. 26
    Александр
    @

    Здравствуйте!
    Отличный плагин! Но есть вопрос: как использовать 2 селекта на одной странице с разным стилями?

  9. 28

    Кстати, можно еще стилизовать ползунок в селекте, а то что-то в разных браузерах он разный, в вин вообще не очень с скроллом((
    на будущее, подумай)

  10. 30

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

  11. 31
    Александр

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

    <form id="frm1" action="" method="post">
     <select>
    					<option>-- Выбрать --</option>
    					<option>Опция 1</option>
    					<option>Опция 2</option>
    				</select>
    <input class="styler" type="submit" name="btn" value="Отправить" />
    </form>

    После того, как форма отправлена и получен результат ошибка или успех, пропадает обертка от select. Т.е. пропадает стилизация списка. Пытался использовать refresh , но результата не добился. Если не трудно, подскажите как с этим бороться.

  12. 34
    Гость

    Столкнулся с такой проблемой, если селект находится на скрытой форме, то он (div.jq-selectbox__dropdown) не имеет ограничения по высоте, что крайне не удобно при количестве элементов 150+
    Можно это как то исправить?

  13. 39
    Дмитрий

    Возникает проблема когда в select options с одинаковыми названиями. Он перестает реагировать на change

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

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

    <ul class="options">
    <li><input type="radio" name="option" value="" /></li>
    <li><input type="radio" name="option" value="" /></li>
    <li><input type="radio" name="option" value="" /></li>
    </ul>

    После стилизации они работают каждая по себе, а не в группе.
    Не в курсе как это исправить?

  15. 48
    Олег

    http://cdn.joxi.ru/uploads/prod/2014/06/16/f2a/b6d/7a6e395d652b89461d9b0d8c92ff5f27dfa8f7b4.jpg

    При таком раскладе не хватает места для строки. Скрол перекрывает последние буквы

  16. 51
    Oleg

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

  17. 53
    Олег

    if (selCloneWidth == selectbox.width()) {
    //divText.width(liWidth2);
    liWidth1 += selectbox.find(‘div.jq-selectbox__trigger’).width();
    }
    Стоит убрать из скрипта эту непонятную конструкцию которая лишь портит ширину селекта магическим образом.

    • 54

      Нельзя, селект по умолчанию должен иметь ширину самого широкого пункта. На странице примеров на втором селекте (Селект без заданной ширины, имеющий пункт с длинным текстом) можно увидеть разницу при отключении этой строки.

      • 55
        Олег

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

      • 57
        Олег

        Нашел в чем баг с этим параметром!
        Когда у нас название опшена меньше чем ширина селекта у нас прописывается фиксированная ширина класса (jq-selectbox__select-text) по самому длинному названию.
        Далее если выберешь самое длинное название(Категория прайса) в списке и обновишь страницу (делать нужно в ФФ, он запоминает выбранный элемент из прошлого запроса) то ты увидишь что фиксированная ширина не установилась и наш селект ведет себя как должен, всегда подстраивается под самое длинное название.

        Если мы хотим от этого уйти то нам лишь необходимо задать размер селекта
        .jq-selectbox.(class-select) {width: 100px}

        То есть убрав //divText.width(liWidth2); мы добиваемся большей гибкости чем с ней. Наш селект всегда будет подстраиваться под длинное название, если это не нужно, то задаем ширину и наслаждаемся

  18. 59
    Alex

    Замечательный плагин — но если элемент select использовать в модальном окне(jq dialog) — то «умная компоновка» выпадающего списка не работает(т.к. расчет координат ведется не от модального, а от основного окна). Подскажите пожалуйста решение.

  19. 60

    Здравствуйте.

    Ерунда какая-то. Последняя версия плагина, на страницу приходят аяксом radio

    Прописал:

    success: function(json) {
    	jQuery('#type').html(json);
    	setTimeout(function() { 
    		jQuery('.ch2').trigger('refresh'); 
    		jQuery('.ch2').css({'border':'1px solid #FF0000'}); 
    	}, 2000) 
    },
    

    Тишина, ничего не происходит. jQuery(‘.ch2’).css({‘border’:’1px solid #FF0000′}); добавлен специально чтобы посмотреть отрабатывает ли таймаут. Ставил 1,5,1 — то же самое.

  20. 65
    Роман

    Доброго дня! Помогите пожалуйста чайнику… никак не могу разобрать. Virtuemart 2.6 + Joomla 2.5.20.

    http://stroyprom.by/myshop/front-page/otdelochnye-materialy/gipsokarton-profilja.html

    Пытаюсь стилизовать select модуля Virtuemart 2 Multiple Customfields Filter 2 и привести его к общему знаменателю с выпадающим списком «Название товара +/-» (над товарами категории).

    перед тегом добавил:

    <script src="jqueryformstyler/jquery.formstyler.min.js"></script>
    <script src="jqueryformstyler/jquery.formstyler.min.js"></script>
    <script> 
    (function($) { 
    $(function() { 
     
     $('input, select').styler(); 
     
    }) 
    })(jQuery) 
    </script>
    <script>
    (function($) { 
    $(function() { 
     
     $('button').click(function(e) { 
     e.preventDefault(); 
     /* делаем чекбокс неактивным */ 
     $('input:checkbox').attr('disabled', true) 
     /* обновляем состояние псевдочекбокса */ 
     .trigger('refresh'); 
     }) 
     
    }) 
    })(jQuery)
    </script>

    не работает. что-то нужно еще сделать? нашел файл, который отвечает за генерацию формы:

    <?php
    defined('_JEXEC') or die('Restricted access');
    /**
    * Param Filter: Virtuemart 2 search module
    * Version: 2.0.6 (2013.08.13)
    * Author: Usov Dima
    * Copyright: Copyright (C) 2012-2013 usovdm
    * License GNU/GPLv3 http://www.gnu.org/licenses/gpl-3.0.html
    * http://myext.eu
    **/
    
    $custom_class = isset($custom_params['af']) &amp;&amp; (int)$custom_params['af'] ? ' custom_child custom_child-'.(int)$custom_params['af'] : '';
    $custom_pid = isset($custom_params['af']) &amp;&amp; (int)$custom_params['af'] ? ' data-pid="'.(int)$custom_params['af'].'"' : '';
    $custom_pval = isset($custom_params['av']) &amp;&amp; is_array($custom_params['av']) &amp;&amp; count($custom_params['av']) > 0 ? ' data-pval="'.implode(';',$custom_params['av']).'"' : '';
    
    $html .= '<div class="custom_params custom_params-'.$type->virtuemart_custom_id.'">';
    $tip = !empty($type->custom_tip) ? ' <span class="mcf_tip hasTip" title="'.$type->custom_tip.'">[?]</span>' : '';
    $selected_values = JRequest::getVar('cv'.$type->virtuemart_custom_id, array());
    $selected_values = array_diff($selected_values,array(''));
    $reset = !empty($selected_values) ? '<a class="reset" href="#">[x]</a>' : '';
    $html .= '<div class="heading">'.JText::_($custom_params['n']).$tip.$reset.'</div>';
    if(!empty($customfield_value)){
    	$html .= '<div class="values cv-'.$type->virtuemart_custom_id.$custom_class.'" data-id="'.$type->virtuemart_custom_id.'"'.$custom_pid.$custom_pval.'>';
    	$html .= '<select name="cv'.$type->virtuemart_custom_id.'[]" rel="'.$type->virtuemart_custom_id.'">';
    	$html .= '<option value="">'.$mcf_customfields_select_heading.'</option>';
    	foreach($customfield_value as $v){
    		$vid = $custom_params['ft'] == 'int' ? $v : $v->id;
    		$value = $custom_params['ft'] == 'int' ? $v : $v->value;
    		$counts = $custom_params['ft'] == 'int' ? $custom_int_count : $custom_text_count;
    		$selected = !$param_search_ids_clear &amp;&amp; isset($selected_values) &amp;&amp; in_array($vid,$selected_values)? ' selected="selected"' : '';
    		/* ----- + Count calculate ----- */
    		$count = calcCount($counts,$vid);
    		$count_sum += $count;
    		$count_txt = $count_show ? ' ['.$count.']' : '';
    		$count_show ? ' ['.$count.']' : '';
    		$disabled = $count == 0 ? $count_zero_show_txt : '';
    		$disable_css = $count == 0 ? ' '.$count_zero_show : '';
    		/* ----- - Count calculate ----- */
    		if($count_zero_show != 'hidden' || $count > 0){
    			$html .= '<option value="'.$vid.'"'.$selected.$disabled.'>'.$value.$count_txt.'</option>';
    		}
    	}
    	$html .= '</select>';
    	$html .= '</div>';
    }
    $html .= '</div>';

    подскажите что нужно еще сделать плз. Спасибо.

  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');
    	}
    });
    
Ваш комментарий