jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

2614 комментариев

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)

Дарья
7 лет 4 месяца назад
Добрый день!
Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?
Проблема в том, в select’е не работает аттрибут data-placeholder.
Пробовала по-разному:
— c data-placholder и пустым первым option (последний ответ Zack Jordan)
— только с data-placeholder (как в доках)
Оба варианта не работают.
В первом случае (с пустым option) при загрузке страницы вместо подсказки — пустое поле, и оно отображается в выпадающем списке (при этом текст внутри div. jq-selectbox__select-text пустой и класс placeholder к этому div’у не применился).
Во втором — вместо подсказки выводится первый элемент из options select’а (он же внутри div. jq-selectbox__select-text, и класс placeholder тоже не применился).
Вот пример использования:
```
<select data-placeholder="Выберите регион" class="..." id='location' name="{{ form.location.html_name }}">
   <option></option>     
   {% for id, name in form.location.field.choices %}
       <option value="{{ id }}"{% if form.location==id" %} selected{% endif %}>{{ name }}</option>
   {% endfor %}
</select>
```
Интересно что, для самого простого примера, без тегов джанги, также не работает.
- Dimox
  7 лет 4 месяца назад / ответ на коммент Дарья
  
  На странице примеров все работает, значит причина где-то у вас. И непонятно, при чем здесь плагин chosen, ссылки на который вы даете.
  Возник такой вопрос — есть ли какие-то ограничения при использовании с Django templates (django==1.4.11)?
  Не знаю, я не знаком с Django.
Слава
7 лет 4 месяца назад

Возникла трудность с плагином, в селектах не работает поиск. Консоль пустая, даже не знаю в какую сторону копать. Возможно, есть какие-то распостраненные ошибки по этому поводу?
- Dimox
  7 лет 4 месяца назад / ответ на коммент Слава
  
  У меня работает. Не припоминаю никаких ошибок.
  - Слава
    7 лет 4 месяца назад / ответ на коммент Dimox
    
    Спасибо за оперативный ответ :) Уже нашел в чем причина. Менял в стилях стиль списка с опциями. Додавил float: none !important; и display: block !important; и потому не работало. Как только убрал все работает.
    - Слава
      7 лет 4 месяца назад / ответ на коммент Слава
      
      Менял стиль именно тега li
shaman
7 лет 4 месяца назад

проблемка такая:
есть страничка с кодом

Выбрать 111 222 333
111 222
На новой html страничке все работает, а вот как с вашим плагином получить доступ к (option value="1″) чтобы установить ему атрибут ('selected','selected')"
Заранее благодарен)
shaman
7 лет 4 месяца назад

Извиняюсь, пока разбирался, как добавить код странички, он уже добавился. Но сам код так и не видно (
- Dimox
  7 лет 4 месяца назад / ответ на коммент shaman
  Как-то так:
```
$('select option[value="1"]').prop('selected', true);
$('select').trigger('refresh');
```
Александр
7 лет 4 месяца назад

Здравствуйте, при динамическом select’е когда подгружается зависимый select изменяется его ширина, становится равная самому длинному пункту.
Указываю $(«#subcategory»).css ({'min-width':'337px', 'max-width':'337px'}) не работает.
- Dimox
  7 лет 4 месяца назад / ответ на коммент Александр
  
  Можно задать только фиксированную ширину.
  - Александр
    7 лет 4 месяца назад / ответ на коммент Dimox
    
    мне это и нужно, но как это сделать? через css тоже не работает
    - Dimox
      7 лет 4 месяца назад / ответ на коммент Александр
      
      Просто указать ширину нативному селекту. В примерах это есть.
      - Александр
        7 лет 4 месяца назад / ответ на коммент Dimox
        
        Я это нашел, но это работает со статическим селектом, с динамическим не работает.
Дмитрий
7 лет 4 месяца назад

У меня селект в Хедере, соответственно распространяется влияние на селекты на страницах. Как защитить другие селекты от изменений?
- Dimox
  7 лет 4 месяца назад / ответ на коммент Дмитрий
  
  Добавьте нужному селекту class или id, прицепите плагин через него.
Kenny
7 лет 4 месяца назад

С версией жиквери 3.1.1 селект изначально открывается вверх. Пробовал версию 2.1.1 — все норм. Как исправить?
- Dimox
  7 лет 4 месяца назад / ответ на коммент Kenny
  
  Только что проверил версию 3.1.1 на странице примеров — у меня открывает, как и положено.
- Yunus
  7 лет 4 месяца назад / ответ на коммент Kenny
  
  Исправлено https://github.com/Dimox/jQueryFormStyler/pull/116.
Вячеслав
7 лет 4 месяца назад

Можно ли запретить обработку отдельных элементов этим плагином? Например, добавив класс jq-disable?
- Dimox
  7 лет 4 месяца назад / ответ на коммент Вячеслав
  
  Отвечал про это пару комментов выше.
Александр
7 лет 4 месяца назад

Мобильные устройства не поддерживаются?
- Dimox
  7 лет 4 месяца назад / ответ на коммент Александр
  
  Поддерживаются.
Slava
7 лет 4 месяца назад

Возникла небольшая проблема с селектами. Когда подключаю плагин, то selected значение не передается в POST-запрос. Если пинговать селект alert’ом при событии onchange то значение показывается правильно. Если же убрать кастомизацию селекта, то значения в POST передаются нормально.
Подскажите, пожалуйста, в какую сторону копать, второй день уже борюсь с этим багом.
- Still
  7 лет 2 месяца назад / ответ на коммент Slava
  
  Тоже пришел из-за этой проблемы. Но разобрался в своей проблеме сам — у меня форма обьявлялась в первой ячейке таблицы, в последующих были текстовые и селекты, в последней форма закрывалась. Было всё 1 в 1 по вашему описанию. Это, насколько я понял, не корректное пересечение моделей DOM. Вынес обьявление формы «уровнем выше» — все заработало.

Александр

7 лет 4 месяца назад

Здравствуйте люди добрые! Нужна помощь! Не могу разобраться как подключить плагин к связанным динамическим селектам. Прочитал все комменты от корки до корки испробовал все советы, но видимо делаю что-то не так. Есть три селекта. При загрузке страницы плагин подключается и работает. но при изменении первого второй селект принимает стиль по умолчанию. Пробовал вставить в скрипт вот это jQuery. ajaxSetup ({complete: function (){jQuery («select»).styler (); }}); но срабатывает только при повторном нажатии на первый селект.
Вот пример моего кривого кода.
Sect.php

  <script language="javascript">
var request;
var dest;
 
function processStateChange(){
  if (request.readyState == 4){
    contentDiv = document.getElementById(dest);
    if (request.status == 200){
response = request.responseText;
contentDiv.innerHTML = response;
    } else {
contentDiv.innerHTML = "Error: Status "+request.status;
    }
  }
}
 
function loadHTML(URL, destination){
  dest = destination;
 
  if (window.XMLHttpRequest){
    request = new XMLHttpRequest();
    request.onreadystatechange = processStateChange;
    request.open("GET", URL, true);
    request.send(null);
  } else if (window.ActiveXObject){
    request = new ActiveXObject("Microsoft.XMLHTTP");
    if (request) {
request.onreadystatechange = processStateChange;
request.open("GET", URL, true);
request.send();
    }
  }
}

</script>
<script>
(function($) {
$(function() {

  $('input, select').styler();

});
})(jQuery);
</script>

<? CModule::IncludeModule("iblock");
 
  $IBLOCK_ID=8;
  $str = "";
  $str .= "<select  class="sort-list-select1" name="SECTION_ID" id="q1" onchange="loadHTML('/structura/ajax.php?id='+this.options[this.selectedIndex].value,'label');" >";
  $str .="<option>Выбор марки</option>";
 
  $arFilter = Array('IBLOCK_ID'=>$IBLOCK_ID, "DEPTH_LEVEL" => 1, 'GLOBAL_ACTIVE'=>'Y');
  $db_list = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter, true);
    while($ar_result = $db_list->GetNext())
    {
      $str .= "<option value="".$ar_result['ID'] ."">".$ar_result['NAME']."</option>";    
    }
?>
<div class="sort-form">

<form>
  <table class="sort-list-table">
    <tbody><tr>
      <td>Выберите мотоцикл</td>
      <td><?=$str?></td>
      <td>
      <div id="label">
      <select id="q2" class="sort-list-select2" name="element">
      <option value="empty">Выбор объёма</option>
      </select><div>
      </div></div></td>
      <td>
      <div id="label3">
      <select id="q3" class="sort-list-select3" name="element3">
      <option value="empty3">Выбор модели</option>
      </select>
      <div>
      </div></div></td>
    </tr>
    
  </tbody></table>
</form>

</div><br>

Файл ajax. php

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>




 <? CModule::IncludeModule("iblock");?>
<?
$IBLOCK_ID=8;

  $arSelect = Array("ID", "NAME","IBLOCK_SECTION_ID");
  $arFilter = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 2, "ACTIVE_DATE"=>"Y",  "SECTION_ID"=>$_GET["id"]);
  $res = CIBlockSection::GetList(Array("sort" => "asc"), $arFilter,  true);
       
  $arResult = "<select class="sort-list-select1" name="element"  id="q2"  onchange="loadHTML('/structura/ajax1.php?id='+this.options[this.selectedIndex].value,'label3');" >";
  $arResult .="<option value="empty">Выбрать объём</option>";
  
 
  while($ob = $res->GetNextElement())
    {
     $arFields = $ob->GetFields();
     $arResult .= "<option value=".$arFields ['ID'].">".$arFields ['NAME']."</option>";                    
    }
    $arResult .="</select>";  

echo $arResult;


?>



<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

файл ajax1. php

<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");?>



<?CModule::IncludeModule("iblock");?>
<?
$IBLOCK_ID=8;

  $arSelect3 = Array("ID", "NAME","IBLOCK_SECTION_ID");
  $arFilter3 = Array("IBLOCK_ID"=>$IBLOCK_ID, "DEPTH_LEVEL" => 3, "ACTIVE_DATE"=>"Y", "ACTIVE"=>"Y", "SECTION_ID"=>$_GET["id"]);
  $res3 = CIBlockSection::GetList(Array("NAME"=>"ASC"), $arFilter3,  true);
        
  $arResult3 = "<select class="sort-list-select1" name="element3"  onchange="window.location.href=this.options[this.selectedIndex].value">";
  $arResult3 .="<option value="empty3">Выбрать модель</option>";
   
  while($ob3 = $res3->GetNextElement())
    {
     $arFields3 = $ob3->GetFields();
	 
     $arResult3 .= "<option value=".$arFields3 ['SECTION_PAGE_URL'].">".$arFields3 ['NAME']."</option>";                    
    }
    $arResult3 .="</select>";  

echo $arResult3;

?>






<?require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/epilog_after.php");?>

Геворг
7 лет 4 месяца назад

Привет. Спасибо за плагин, пользуюсь давно и очень доволен.
Недавно написал модуль для друпала, который позволяет подключать твой плагин к любому сайту на этой CMS. Вот ссылка на него https://www.drupal.org/project/form_styler при установке модуля, плагин скачивается с твоего репозитория. Можешь в описании добавить ссылку на модуль. Настройки опций плагина из админки Drupal-а в работе. Выгружу как завершу и протестирую. Еще раз спасибо за плагин и свободную лицензию =)
Андрей
7 лет 3 месяца назад

Добрый день, подскажите такой момент по плагину… Если выбирать из выпадающего списка значение, то свойство $(this).val () доступно и не пустое, но если в дропдауне больше 400 значений, естественно хочется воспользоваться поиском. И вот когда в поисковом поле после ввода 3−4 символов остаются нужные значения (например, города), ты кликаешь по нужному пункту и $(this).val () пусто!!! Потому что у в списке нет никаких аттрибутов. Вопрос — как в «поисковом поле» дропдауна при выборе получать не пустое значение. Смысл же select’a в том, чтоб значение куда-то отправить или сохранить, а не для красоты. Спасибо
- Dimox
  7 лет 3 месяца назад / ответ на коммент Андрей
  
  Только что проверил на странице примеров, где вариант с onchange="alert (this.value)". Добавил туда много пунктов, ввожу символы в поиске, после клика на пункт он мне показывает alert. Не знаю, что не так у вас.
  - Андрей
    7 лет 3 месяца назад / ответ на коммент Dimox
    
    Добрый день, оставьте onchange на дропдауне и попробуйте из множества пунктов найти определенный и кликнуть на нем — алерта вообще не будет. А если просто проскролить до нужного и выбрать пункт, то алерт и у меня срабатывает. Интересует почему в поиске пустое значение.
    - Dimox
      7 лет 3 месяца назад / ответ на коммент Андрей
      
      У меня алерт в обоих случаях.
      - Андрей
        7 лет 3 месяца назад / ответ на коммент Dimox
        
        Похоже, вы правы, у меня на локальной машине тоже в обоих, значит фреймворк Yii что-то «портит» или перекрывает ((не срабатывает какое-то событие в фильтрах CGridView! Если кто-то это читает и сталкивался — подскажите, пожалуйста :) спасибо
      - Максим
        7 лет 3 месяца назад / ответ на коммент Dimox
        
        Встретился со схожей проблемой, возможно как-то неправильно используете js, вот пример разбора ошибки:
        <select class="js-calculator__type">
        $(document).ready(function(){ //селектор для select-а var $classSelector = $('.js-calculator__type'); //какой-то произвольный DOM-элемент var $custom = $('.custom-selector'); //событие которое использует $classSelector.val() $custom.on('custom-event', function(){ console.log($classSelector.val()); }); //но в $classSelector 2 элемента //первый - обертка для SELECT-а //второй - сам SELECT //$classSelector.val() - берет value первого элемента из набора //поэтому //или изначально пишем селекторы как-то так $classSelector = $('select.js-calculator__type'); //или $classSelector = $('.js-calculator__type').not('jq-selectbox'); //или проверяем элемент набора перед тем как брать его val() });
Евгений
7 лет 3 месяца назад

Подскажите пожалуйста! Поставил плагин стилизации селектов и в форме регистрации перестал открываться селект с выбором региона, в остальных местах везде работает. Через консоль пишет TypeError: jQuery (…).ready (…) is not a function, как исправить эту проблему?
Anrew
7 лет 3 месяца назад

Подскажите, а как можно повесить раскрытие селекта при клике по ссылке или какому нибудь label?
- Сергей
  7 лет 2 месяца назад / ответ на коммент Anrew
  
  Поддерживаю вопрос. Способы, что не помогли:
  — навешивание классов. addClass ('dropdown').addClass ('opened').addClass ('focused') на .jq-selectbox
  — клики на .jq-selectbox и его потомков + принудительный показ .jq-selectbox__dropdown
Diana
7 лет 2 месяца назад

Здравствуйте, хотела бы узнать, етсь ли поддержк tabindex?
- Dimox
  7 лет 2 месяца назад / ответ на коммент Diana
  
  Есть.
Илья
7 лет 2 месяца назад

Подскажите как сбросить каждый селект по одиночке?, при этом не использовать кнопку reset
- Dimox
  7 лет 2 месяца назад / ответ на коммент Илья
  Если в селекте нет option с атрибутом selected:
```
$('.custom-select').prop('selectedIndex',0).trigger('refresh');
```
  В обратном случае:
```
$('.custom-select').val($('.custom-select option[selected]').val()).trigger('refresh');
```
Денич
7 лет 2 месяца назад

Подскажите, как убрать значение option из выпадающего списка при его выборе?
Т.е например мы имеем выпадающий список:
Значение 1 — выбранное значение
Это открывающийся список:
Значение 1
Значение 2
Значение 3
Значение 4
Чтобы при открытии не было в данном списке Значение 1, а если выбираем Значение 2, то соответсвенно из списка оно исчезает и отображается в выбранном значении и т. д. с другими значениями.
- Dimox
  7 лет 2 месяца назад / ответ на коммент Денич
  
  Никак. Нет такой возможности.
rodigy
7 лет 2 месяца назад
Заметил баг небольшой, если динамически изменять селект: очистить все содержимое селекта и вставить это
```
<option disabled>text</option>
```
, то получим селект без текста.
www.openscreenshot.com/rkhC_Ckdl
rodigy
7 лет 2 месяца назад

Как сделать полностью неактивным селект, чтоб нельзя было нажать на него и не выпадало drop-down меню если есть лишь 1 disabled option ??

jQuery Form Styler - плагин для стилизации селектов, чекбоксов, радиокнопок, файловых и числовых полей

Смотрите также

jQuery-плагин для стилизации input[type="radio"]

jQuery-плагин для стилизации input[type="checkbox"]

jQuery-плагин для стилизации select’ов

Стилизация чекбоксов и радиокнопок на чистом CSS с фолбеком для старых браузеров

Комментарии (2 614)

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