Главная 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. От того, что я поставил новую версию — мне это не помогло (
    В чем может быть проблема?

  3. Может ли быть проблема с refresh?

  4. Вот здесь не выходит:

    <script type="text/javascript">
    <!--
    // Формируем массив городов
    var aHouseValues = new Array(
    "1)988-09-16 2)988-09-17",
    "1)983-18-31 2)983-18-32",
    "1)942-00-29 2)986-47-56",
    "1)987-93-30 2)987-93-50"
    );
    
    // ф-ция, возвращающая массив городов по заданной стране
    function getHouseValuesByStreet(index){
        var sHouseValues = aHouseValues[index];
        return sHouseValues.split(","); // преобразуем строку в массив городов
    }
    
    // ф-ция, выводящая динамически список городов
    function MkHouseValues(index){
        var aCurrHouseValues = getHouseValuesByStreet(index);
        var nCurrHouseValuesCnt = aCurrHouseValues.length;
        var oHouseList = document.forms["simpleForm2_104"].elements["sf2_104_vash_ofis"];
        var oHouseListOptionsCnt = oHouseList.options.length;
        oHouseList.length = 0; // удаляем все элементы из списка городов
        for (i = 0; i < nCurrHouseValuesCnt; i++){
            // далее мы добавляем необходимые города в список
            if (document.createElement){
                var newHouseListOption = document.createElement("OPTION");
                newHouseListOption.text = aCurrHouseValues[i];
                newHouseListOption.value = aCurrHouseValues[i];
                // тут мы используем для добавления элемента либо метод IE, либо DOM
                (oHouseList.options.add) ? oHouseList.options.add(newHouseListOption) : oHouseList.add(newHouseListOption, null);
            }else{
                // для NN3.x-4.x
                oHouseList.options[i] = new Option(aCurrHouseValues[i], aCurrHouseValues[i], false, false);
            }
        }
    }
    
    // инициируем изменение элементов в списке городов, в зависимости от текущей страны
    MkHouseValues(document.forms["address"].elements["street"].selectedIndex);
    //-->
    </script>
  5. <html>
    <body>
    <form name="simpleForm2_104" action="#">
    Страна:
    <select onClick="MkHouseValues(this.selectedIndex)">
    <option value="м. Озерки">м.Озерки</option>
    <option value="м. Приморская">м.Приморская</option>
    <option value="м. Звёздная">м.Звёздная</option>
    <option value="м. Международная">м. Международная</option>
    </select>
    &nbsp;Город:
    <select name="sf2_104_vash_ofis">
    <option select="selected" value="1)988-09-16 2)988-09-17">1)988-09-16 2)988-09-17</option>
    </select>
    </form>
    </body>
    </html>
    
  6. Список должен быть в зависимости от выбора первого select.
    и ничего… помогите пожалуйста!

  7. Добрый вечер! Использую Ваш плагин для стилизации динамически формируемых выпадающих списков «Область-Город». Ситуация. Выбираю в первом селекте область. Появляется второй селект, в option которого подгружаются города, соответствующие данной области. Далее, закрываем браузер. При повторном открытии браузера видим первый селект с областями.

    <select name="oblast" id="oblast" class="style_select">
    	<option id="option_default" value="" selected="selected" disabled="disabled">--Выберите область--</option>
    <?php while($rows_region=mysqli_fetch_assoc($result_region)){?>
    	<option value="<?php echo $rows_region['region'];?>"><?php echo $rows_region['region'];?></option>
    <?php }?>
    </select>
    

    Проблема. Мне необходимо чтобы выбран был не тот option, который был выбран перед закрытием браузера, а с идентификатором option_default. Используя id селекта или этого элемента списка, я не могу средствами Jquery добиться этого результата. Понимаю, что нужно каким то образом воздействовать на span с id oblast-styler, но не знаю как это сделать. Очень бы хотелось получить Вашу помощь. Заранее выражаю благодарность за оказанное содействие

  8. Ладно. попытаюсь попроще. Как сбрасывать значение селекта или как при загрузке страницы сделать так, чтобы выбирался

    <option id="option_default" value="" selected="selected" disabled="disabled">--Выберите область--</option>

    ?

  9. Проблема с iOS устройствами в том, что система берет полностью управление html элемента select, там свои фишки в отрисовке и т. п. И получается глюк, когда заходишь на сайт на айфоне, кликаешь и отображается два меню — формстайлерское и айфоновское.
    Решение такое: в файле jquery.formstyler.js ищем кусок кода:

    // если селект неактивный
    if (el.is (':disabled')) {
    selectbox. addClass ('disabled');
    return false;
    }

    // при клике на псевдоселекте
    divSelect. click (function () {
    el. focus ();

    // умное позиционирование
    if (opt.selectSmartPositioning) {
    var win = $(window);
    var topOffset = selectbox. offset ().top;
    var bottomOffset = win. height () — selectHeight — (topOffset — win. scrollTop ());
    var visible = opt. selectVisibleOptions;
    var minHeight = liHeight * 6;
    var newHeight = liHeight * visible;
    if (visible > 0 && visible 0 && visible < 6) minHeight = newHeight; // раскрытие вверх Просто через агент браузера смотрим и не рисуем дальше, если iOS. Проверено на живом сайте. var isIosFormStyler = navigator.userAgent.match (/(iPad|iPhone|iPod)/g)? true: false; if (isIosFormStyler) return;

    • Блин, не всё скопировалось:) Короче вот как кусок кода должен выглядеть:

      // если селект неактивный
      if (el.is (':disabled')) {
      selectbox. addClass ('disabled');
      return false;
      }

      // при клике на псевдоселекте
      divSelect. click (function () {
      el. focus ();

      var isIosFormStyler = navigator.userAgent.match (/(iPad|iPhone|iPod)/g)? true: false;
      if (isIosFormStyler)
      return;

      // умное позиционирование
      if (opt.selectSmartPositioning) {
      var win = $(window);
      var topOffset = selectbox. offset ().top;
      var bottomOffset = win. height () — selectHeight — (topOffset — win. scrollTop ());
      var visible = opt. selectVisibleOptions;
      var minHeight = liHeight * 6;
      var newHeight = liHeight * visible;
      if (visible > 0 && visible < 6) minHeight = newHeight; // раскрытие вверх

  10. Привет. Использовал ваш скрипт. Все нравиться, все красиво. Но у меня появилась такая проблема, Что моя цмс использует динамические селекты. И вот например выводятся 2 селкта.
    Первый селект выводиться сразу на страницу без либо каких скриптов обработки.
    А второй выводиться уже после обработки скриптами и проверками. Например
    Размер 1 селект размер, а второй цвет.
    я выбираю маленький и проверил скрипт вывел 2 селект с цветом, а и б,
    а выбираю размер большой и второй селект вывел цвет, а, б и с.
    И вот тут как раз проблема в формировании вашего списка. Как мне обновить теперь селекты что бы при втором клике добавился цвет с? В селекте стандартном он есть, но в лишку не подставляться. Рефреш не пнимаю как использовать. Есть возможность обновить?

  11. Не могу понять, как обновить/задействовать клонированный селект:
    Есть таблица в ячейках которой висят стилизованные селекты, по нажатию клавиши — добавить строку последняя в таблице дублируется со всем содержимым, работает только первоначальная строка с селекатами, остальные (клонированные) не раскрываются, не подскажете как быть? Заново вызывать функцию styler тоже не помогает, триггер через .each тоже не дает результата.

  12. Добрый день, у меня тут появилась проблемка, помогите пожалуйста ее решить. вот пример. http://jsfiddle.net/hFLyA/ мне надо чтобы можно было выбирать только один радио, а сейчас можно все их выбрать.

  13. Всем привет. Плагин стабильный и очень стильный) Новую версию пока не тестировал. Простестил плагин на Mac OS и ни каких багов или проблем не обнаружил, у кого были проблемы напишите пожалуйста))

  14. Выложил новую версию с устранением проблемы с селектом в iOS.

  15. Dimox, добрый день.
    Подскажите как сбросить (очистить форму)?
    собственно

    $('#Myform').trigger('reset');

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

  16. Dimox, у вас в примере есть флаги к странам (png). Я разобрался как это сделать — не сложно.
    Но это ручное прописывание. А у меня 250 стран. Было бы весьма грубо каждому стилю прописывать свою флаг.
    Поэтому, не подскажите, как это можно более удобно сделать в рамках вашего плагина?

  17. Здравствуйте, у меня 3 формы, как для них сделать разное оформление на css?

  18. Не могу понять ((
    У меня в первом селекторе при выборе идет активация следующего селектора посредством JavaScript:

    <select id="region" onchange="region(this);">
    	<option value="-">Выбрать</option>
    	<option value="6" >Москва</option>
    	<option value="8" id="id_29">Санкт-Петербург</option>
    </select>

    однако при совершении выбора, поле селекта не скрывается обратно, и второй селектор не активируется. Я так понимаю, что куда-то надо прописать trigger ('refresh')? Но куда?

  19. Выложил новую версию. Добавил поддержку <input type="reset">.

  20. Очень интересный плагин, спасибо.
    Над селектом поставил поле с jquery ui autocomplete.
    Выпадающий список с этого поля выпадает под селект, т. е. селект с вашим плагином всегда остается сверху. Как это лечится?

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