Как мне создать изящно ухудшающий диапазон HTML5? - PullRequest
Новая
       6

Как мне создать изящно ухудшающий диапазон HTML5?

7 голосов
/ 11 февраля 2010

Я бы хотел использовать <input type='range' /> из HTML5 для браузеров, которые его поддерживают, и понизить до <select />, если нет. Я использую Ruby-on-Rails, поэтому, если ничего не получится, я мог бы сделать что-то вроде this на стороне сервера.

Я предпочел бы, однако, иметь что-то более подходящее к идее постепенного улучшения, сделанного с помощью Javascript. Бонусные баллы, если это JQuery.

Ответы [ 2 ]

5 голосов
/ 12 февраля 2010

Проверьте Modernizr , он скажет вам, если диапазон поддерживается. Я полагаю, что техника состоит в том, чтобы создать ввод диапазона и проверить его тип - если он все еще «диапазон», то он поддерживается. В противном случае он должен сообщать «текст», который является запасным вариантом в других браузерах.

1 голос
/ 11 февраля 2010

Сначала определите, может ли браузер обрабатывать HTML 5, затем используйте что-то вроде этого: 

   $('input').each(function (i, item) {
        if ($(item).attr('min') !== undefined && $(item).attr('max') !== undefined) {
            var select = document.createElement("SELECT");
            $(select).attr('name', $(item).attr('name'));
            $(select).attr('id', $(item).attr('id'));
            $(select).attr('disabled', $(item).attr('disabled'));
            var step = 1;
            if ($(item).attr('step') !== undefined) {
                step = parseFloat($(item).attr('step'));
            }

            var min = parseFloat($(item).attr('min'));
            var max = parseFloat($(item).attr('max'));
            var selectedValue = $(item).attr('value');
            for (var x = min; x <= max; x = x + step) {
                var option = document.createElement("OPTION");
                $(option).text(x).val(x);
                if (x == selectedValue) { $(option).attr('selected', 'selected'); }
                $(select).append(option);
            };
            $(item).after(select);
            $(item).remove();
        }
    });

Поскольку вы не можете использовать селектор input[type=range], который я должен был использовать с подходом $(item).attr('min') && $(item).attr('min'), это будет немного странным, если у вас есть другие типы элементов управления вводом с этими двумя атрибутами.

...