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 />