我相当擅长javascript和jquery。我正试图在我的网页上添加一个滑块。这是一个基本的滑块,任何人都可以在其中选择0-100之间的值。我不知道如何在在中间标记一些间隔。
这是我到目前为止的代码
<script>
$(function() {
var temp = 0;
$( "#slider" ).slider({
animate: true,
value:temp,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val(ui.value );
},
stop: function(event, ui) {
temp = ui.value;
//Do something
}
});
$( "#amount" ).val($( "#slider" ).slider( "value" ) );
});
</script>
它运行正常。我想做的是在0.25、50、75和100处添加间隔标记。
我已经讨论了一些关于SO的问题,但不确定如何进行实施。非常感谢您的帮助。
我尝试过这种实现:http://jsbin.com/iwime但这并不是我想要做的,因为我只是希望tick以这些规则的间隔出现,但用户必须能够选择其他值。
谢谢干杯
我猜你想要这样的东西:http://jsbin.com/iwime/116
因此,您不使用滑块的max
选项中的刻度数,而是使用想要提供的任何最大单位,例如100。然后在refershTicks()
中,更新算法以切换类。
滑块设置:
var slider = $("#slider").slider({
...
max: 100, // the only change
...
});
和refreshTicks()
方法:
function refreshTicks() {
var s = slider
, lo = s.slider("values", 0), hi = s.slider("values", 1);
var max = s.slider('option', 'max');
s.find(".tick").each(function(i) {
var i = (i + 1) * (max/ticks.length) - (max/ticks.length)/2; // the updated algorithm
var inRange = (i >= lo && i < hi);
$(this)
[(inRange ? 'add' : 'remove') + 'Class']("ui-widget-header")
[(inRange ? 'remove' : 'add') + 'Class']("ui-widget-content");
});
}
类似于这个SO问题:Bijan的答案可能会有所帮助。
他建议的jQuery UI滑块的实现可能会帮助您找到解决方案:http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/