2011-06-08 128 views
3

我一直在嘗試讓滑塊在控件旁邊顯示其當前值。本教程http://www.ryancoughlin.com/demos/interactive-slider/解釋瞭如何輕鬆和無痛。JQueryUI滑塊不能在IE上工作

現在我試圖設置3個連續的滑塊並且工作正常,但IE爲所有三個控件設置了默認值(0到100,步驟1,動畫假...)的選項。儘管在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 />  

回答

3

而Firefox和Chrome妥善處理它們,Internet Explorer不喜歡的對象,參數列表trailing commas

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