Come faccio a costruire una grazia-degradanti HTML5 Gamma?

Question

Mi piacerebbe usare il <input type='range' /> da HTML5 per i browser che lo supportano e degradare ad un <select /> in caso contrario. Sto utilizzando Ruby-on-Rails, quindi in mancanza di tutto il resto, avrei potuto fare qualcosa di simile questo su il lato server.

Io preferirei, però, di avere qualcosa di più in linea con l'idea di progressive enhancement fatto tramite Javascript. I punti di bonus se si tratta di JQuery.

Answer 1

Modernizr , vi dirà se gamma è supportato. Credo che la tecnica è quella di creare un ingresso gamma e verificare il suo tipo - se è ancora "range", allora è supportato. Altrimenti dovrebbe riferire "testo", che è il ripiego in altri browser.

Answer 2

In primo luogo rilevare se il browser in grado di gestire HTML 5 quindi utilizzare qualcosa di simile a questo:

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

Dal momento che non è possibile utilizzare il selettore input[type=range] ho dovuto andare con l'approccio $(item).attr('min') && $(item).attr('min'), questo otterrà un po 'strano, se si dispone di altri tipi di controlli di input con questi due attributi.