كيف يمكنني بناء مجموعة HTML5 المهينة بشكل أرائم؟

Question

أود استخدام <input type='range' /> من HTML5 للمتصفحات التي تدعمها وتتحلل <select /> ان لم. أنا أستخدم Ruby-on-on-on-on-on-on-on-on-facting. هذه على جانب الخادم.

أفضل أن يكون لديك شيء أكثر مضادا بفكرة التعزيز التدريجي الذي قام به عبر 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') نهج، سيحصل ذلك على غرابة إذا كان لديك أنواع أخرى من ضوابط الإدخال مع تلك السمات الثانية.