3

コントロールの横に現在の値を表示するスライダーを取得しようとしています。このチュートリアルhttp://www.ryancoughlin.com/demos/interactive-slider/は、いかに簡単で痛みを伴わないかを説明しています。

現在、3つの連続するスライダーを設定しようとしていますが、IEは、3つのコントロールすべてのオプションをデフォルト値（0から100、ステップ1、アニメーションfalse ...）に設定しています。ただし、FFとChromeでは正常に動作します。

私は何が欠けていますか？ありがとうございました。

コードは次のとおりです。

        $('#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 />
4

1 に答える 1

3

FirefoxとChromeはそれらを適切に処理しますが、Internet Explorerは、オブジェクトや引数リストなどの末尾のコンマを好みません。

$('#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
    });
于 2011-11-08T19:53:46.967 に答える