JQueryUI滑块不适用于IE [英] JQueryUI sliders not working on IE

问题描述

我一直试图让滑块显示控件旁边的当前值。本教程 http://www.ryancoughlin.com/demos/interactive-slider/ 解释了如何轻松无痛。

I've been trying to get a slider to display its current value next to the control. This tutorial http://www.ryancoughlin.com/demos/interactive-slider/ explains how easy and painlessly.

现在我试图设置3个连续的滑块并且工作正常但IE正在将选项设置为默认值（0到100，步骤1，动画假...）所有三个控件。在FF和Chrome中可以正常工作。

Now I am trying to set 3 consecutive sliders and works fine but IE is setting options to default values ( 0 to 100, step 1, animate false...) for all three controls. Works fine in FF and Chrome though.

我缺少什么？谢谢。

下面是代码：

        $('#slider-alpha').slider({
            range : false,
            value : 5,
            step: 1,
            animate: "true",
            min: 1,
            max : 10,


        });

    $('#slider-gamma').slider({
            range : false,
            value : 50,
            step: 10,
            animate: "true",
            min: 1,
            max : 200,

        });

    $('#slider-beta').slider({
            range : false,
            values : 50,
            step: 10,
            animate: "true",
            min: 1,
            max : 300,

        });




<script>
$(function() {

//alpha
var slide_int_alpha = null;
var slide_int_beta = null;
var slide_int_gamma = null;

function update_slider_alpha(){
    var value = $('#slider-alpha').slider('option', 'value');
        $('#alpha-value').text('No. of alpha: '+value);
        $('#alpha-value').fadeIn();
}

function update_slider_beta(){
    var valuet = $('#slider-beta').slider('option', 'value');
        $('#beta-value').text('No. of beta: '+valuet);
        $('#beta-value').fadeIn();
}

function update_slider_gamma(){
    var valuep = $('#slider-gamma').slider('option', 'value');
        $('#gamma-value').text('No. of gamma: '+valuep);
        $('#gamma-value').fadeIn();
}

$( "#slider-alpha" ).slider({
    start: function(event, ui){
    $('#alpha-value').empty();
        slide_int_alpha = setInterval(update_slider_alpha, 10); 
    },
    slide: function(event, ui) 
    { 
        setTimeout(update_slider_alpha, 10); 
    },
    stop: function(event, ui){
        clearInterval(slide_int_alpha);
        slide_int_alpha = null;
    }
});

$( "#slider-beta" ).slider({
    start: function(event, ui){
        $('#beta-value').empty();
            slide_int_beta = setInterval(update_slider_beta, 10);
        },
    slide: function(event, ui) 
        { 
            setTimeout(update_slider_beta, 10); 
        },
    stop: function(event, ui){
        clearInterval(slide_int_beta);
        slide_int_beta = null;
    }
});

$( "#slider-gamma" ).slider({
    start: function(event, ui){
        $('#gamma-value').empty();
            slide_int_gamma = setInterval(update_slider_gamma, 10);
        },
    slide: function(event, ui) 
        { 
            setTimeout(update_slider_gamma, 10); 
        },
    stop: function(event, ui){
        clearInterval(slide_int_gamma);
        slide_int_gamma = null;
    }
});


});

</script>





    <div id="alpha-value">No. of alpha: 5</div>
    <div id="slider-alpha" style="width: 90%;text-align: center;"></div>
    <br />

    <div id="beta-value">No. of beta: 20</div>
    <div id="slider-beta" style="width: 90%;text-align: center;"></div>
    <br />

    <div id="gamma-value">No. of gamma: 20</div>
    <div id="slider-gamma" style="width: 90%;text-align: center;"></div>
    <br />      

推荐答案

虽然Firefox和Chrome可以优雅地处理它们，但Internet Explorer却没有不喜欢对象，参数列表等中的尾随逗号。

While Firefox and Chrome handle them gracefully, Internet Explorer doesn't like trailing commas in objects, argument lists, etc.

$('#slider-alpha').slider({
        range : false,
        value : 5,
        step: 1,
        animate: "true",
        min: 1,
        max : 10
    });

$('#slider-gamma').slider({
        range : false,
        value : 50,
        step: 10,
        animate: "true",
        min: 1,
        max : 200
    });

$('#slider-beta').slider({
        range : false,
        values : 50,
        step: 10,
        animate: "true",
        min: 1,
        max : 300
    });

这篇关于JQueryUI滑块不适用于IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！