我使用下面的代码来使用一个时间滑块,它允许div在1小时的插槽中从上午9点滑动到晚上8点。
我需要编辑代码,使时间滑块在30分钟(半小时)插槽上升。
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
jQuery('#callback_selected').html("9 am");
var select = jQuery( "#callback" );
var slider = jQuery( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 12,
range: "min",
value: 1,
slide: function( event, ui ) {
select[ 0 ].selectedIndex = ui.value - 1;
$time_int = parseInt(ui.value);
if (ui.value < 5) {
$time_int = $time_int + 8;
$time_selected = $time_int + " am";
}
else {
$time_int = $time_int - 4;
$time_selected = $time_int + " pm";
}
jQuery('#callback_selected').html($time_selected);
}
});
});
</script>
添加step选项
,
min: 1,
max: 12,
range: "min",
value: 1,
step: .5,
下面是一个jsFiddle示例,它展示了如何使用步进并处理":30"时间更改