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

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

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

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

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

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

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

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

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

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

    Спасибо.

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

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

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

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

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

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

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

  11. Извиняюсь за немного нуюовский вопрос, но не могу решить задачку.
    Имеется форма отправляемая по технологии 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. Столкнулся с такой проблемой, если селект находится на скрытой форме, то он (div.jq-selectbox__dropdown) не имеет ограничения по высоте, что крайне не удобно при количестве элементов 150+
    Можно это как-то исправить?

    • Высота выпадающего списка рассчитывается лишь тогда, когда псевдоселект видим. Поэтому, чтобы это работало, нельзя его скрывать через display: none. Найдите другой способ скрытия селекта, например, поместите в div в с нулевой высотой и overflow: hidden, либо что-нибудь подобное. Хотя я не уверен, что при этом все будет в порядке.

      • Dimox, интересный момент.
        Можно стилизовать, а потом скрыть, наподобие:

        (function($) {
        	$(function() {
        		$('.styler').styler();
        		$('#hide-me').hide();
        	})
        })(jQuery)
        

        И тогда обычный код с переключением блоков с стилизованными input’ами работает нормально.

    • Задайте вашему начальному селекту id.
      Пример

      <select id="primer"></select>

      После обработки вашего селекта плагином на выходе id обертки селекта будет primer-styler.
      После этого можно принудительно задать нужную высоту средствами css исключительно для этого списка.

      #primer-styler ul {height:200px;}
  13. Возникает проблема когда в select options с одинаковыми названиями. Он перестает реагировать на change

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

    <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. cdn.joxi.ru/uploads/prod/2014/06/16/f2a/b6d/7a6e395d652b89461d9b0d8c92ff5f27dfa8f7b4.jpg

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

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

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

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

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

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

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

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

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

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

    Ерунда какая-то. Последняя версия плагина, на страницу приходят аяксом 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. Доброго дня! Помогите пожалуйста чайнику… никак не могу разобрать. Virtuemart 2.6 + Joomla 2.5.20.

    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>';

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

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