7

<input type='range' />HTML5 をサポートしているブラウザでは HTML5を使用し、そうでない場合は に劣化させたいと思います<select />。私はRuby-on-Railsを使用しているので、他のすべてに失敗した場合、サーバー側でこのようなことができます.

ただし、Javascript を介して行われるプログレッシブ エンハンスメントのアイデアと、より一致するものを用意したいと思います。JQueryの場合はボーナスポイント。

4

2 に答える 2

5

Modernizrをチェックしてください。範囲がサポートされているかどうかがわかります。範囲入力を作成し、そのタイプを確認するのがテクニックだと思います — それがまだ「範囲」であれば、それはサポートされています。それ以外の場合は、他のブラウザーのフォールバックである「テキスト」を報告する必要があります。

于 2010-02-11T22:11:58.133 に答える
1

最初にブラウザーが 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')これら2つの属性を持つ他のタイプの入力コントロールがある場合、これは少し奇妙になります。

于 2010-02-11T19:44:45.630 に答える