Question

我正在尝试创建一个像这个例子的滑块。请任何人帮助我。 http://devsandbox.nfshost.com/js/jquery-ui/development-bundle/demos/slider/constraints.html

<link type="text/css" href="ui.all.css" rel="stylesheet" /> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript" src="jquery.ui.core.js"></script> 
<script type="text/javascript" src="jquery.ui.slider.js"></script> 
<link type="text/css" href="demos.css" rel="stylesheet" /> 
<link type="text/css" href="jquery-ui.css" rel="stylesheet" />
<style type="text/css"> 
    #demo-frame > div.demo { padding: 10px !important; };
</style> 
<script type="text/javascript"> 
var updateTime = function() {
    var time = $("#slider-constraints").slider("value");
    var minutes = Math.floor(time / 60);
    var seconds = time % 60;
    var secondsStr = (seconds < 10 ? "0" : "") + Math.round(seconds);
    $("#amount").val(minutes+":"+secondsStr);
}
$(function() {
    $("#slider-constraints").slider({
        max: 253,
        value: 10,
        minConstraint: 10,
        maxConstraint: 10,
        enforceConstraints: false,
        slide: updateTime 
    });
    updateTime();
    var maxConstraint = 10;
    window.setInterval(function() {
        maxConstraint += 1;
        $('#slider-constraints').slider("constraints", [10, maxConstraint]);
    }, 300);
    window.setInterval(function() {
        $('#slider-constraints').slider("value", $('#slider-constraints').slider("value")+1);
        updateTime();
    }, 1000);
});
</script>

问题：

我想删除进度条。
用其他颜色填充手柄覆盖位置

格塔。

Answer 1

我不确定你的意思是＃2，但要远程进度条，将所有代码缩短到这个：

$("#slider-constraints").slider({
    max: 253,
    value: 10,
    minConstraint: 10,
    maxConstraint: 253,
    enforceConstraints: false
});

让你的maxConstraint与max匹配，以填充光标后的栏。将minConstraint选项调整为您想要的位置，value将成为滑块处理程序的初始位置，在此示例代码中，它匹配。

如果＃2表示您希望随后填充该部分，只需更新minConstraint以匹配当前值（滑块所在的位置），如下所示：

$("#slider-constraints").slider({
    max: 253,
    value: 10,
    minConstraint: 10,
    maxConstraint: 253,
    enforceConstraints: false,
    slide: function(event, ui) {
      $("#slider-constraints").slider("constraints", [ui.value, 253]);
    }
});

具有默认功能的滑块

1 个答案: