Comment puis-je construire une gamme HTML5 grâce dégradant?

Question

Je voudrais utiliser le HTML5 pour <input type='range' /> de navigateurs qui prennent en charge et se dégrader à un <select /> sinon. J'utilise Ruby-on-Rails, donc ne pas tout, je pouvais faire quelque chose comme cette sur le côté serveur.

Je préférerais, cependant, d'avoir quelque chose de plus en ligne avec l'idée d'une amélioration progressive fait via Javascript. Les points de bonus si c'est JQuery.

Answer 1

Consultez Modernizr , il vous dira si gamme est pris en charge. Je crois que la technique est de créer une entrée de gamme et vérifier son type - si elle est encore « plage », puis il est pris en charge. Dans le cas contraire, il devrait faire rapport « texte » qui est le repli dans d'autres navigateurs.

Answer 2

Tout d'abord détecter si le navigateur peut gérer HTML 5 puis utiliser quelque chose comme ceci:

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

Puisque vous ne pouvez pas utiliser le sélecteur de input[type=range] je devais aller à l'approche de $(item).attr('min') && $(item).attr('min'), cela obtenir un peu bizarre si vous avez d'autres types de contrôles d'entrée avec ces deux attributs.