Wie baue ich eine graziös abbau HTML5-Strecke?

Question

Ich mag die <input type='range' /> von HTML5 für Browser verwenden, die sie und degradiert zu einem <select /> unterstützen, wenn nicht. Ich bin mit Ruby-on-Rails, so alles andere versagt, ich könnte etwas tun, wie dieser auf die Server-Seite.

Ich würde es vorziehen, haben aber etwas mehr inline mit der Idee der progressiven Erweiterung via Javascript getan. Bonuspunkte, wenn es die JQuery.

Answer 1

Siehe Modernizr , wird es Ihnen sagen, wenn Bereich unterstützt wird. Ich glaube, die Technik ist einen Bereichseingang zu erstellen und die Art überprüfen - wenn es noch „Bereich“ ist es dann unterstützt wird. Ansonsten sollte es „Text“ berichten, die der Rückfall in anderen Browsern ist.

Answer 2

Zuerst erkennen, ob der Browser HTML 5 verarbeiten kann dann etwas verwenden, wie folgt aus:

   $('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();
        }
    });

Da Sie den input[type=range] Selektor kann ich mit dem $(item).attr('min') && $(item).attr('min') Ansatz gehen musste, wird dies ein wenig seltsam, wenn man andere Arten von Eingabesteuerungen haben mit diesen beiden Attributen.