どのように私は優雅に分解HTML5範囲を構築するのですか？

Question

私はそれをサポートするブラウザ用のHTML5から<input type='range' />を使用していない場合は<select />まで劣化したいと思います。私は私がhref="http://gist.github.com/301697" rel="nofollow noreferrer">これは上を

私はJavascriptを介して行わプログレッシブ・エンハンスメントのアイデアでより多くのインライン何かを持っている、しかし、好むだろう。ボーナスポイント、それはjQueryの場合ます。

Answer 1

範囲がサポートされている場合は、

Modernizr にチェックし、それはあなたを教えてくれます。それはそれはサポートされている「範囲」はまだであれば - 私は技術がレンジ入力を作成し、それの種類を確認することであると信じています。それ以外の場合は、他のブラウザでフォールバックである「テキスト」を報告しなければなりません。

Answer 2

ブラウザが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')セレクタを使用することはできませんので、あなたがそれらの二つの属性を持つ入力コントロールの他の種類を持っている場合は、

、これは少し奇妙な取得します。