1

我有一个 jQuery Mobile 滑块，最小值为 0，最大值为 100，约束值为 35。如果滑块从 0 开始并且用户开始滑动滑块，我如何让滑块在 35 处停止?

4

1 回答 1

2

以下脚本在值为 35 处停止滑块：

$(document).on('change', '#slider-fill', function(e){
    if($("#slider-fill").val() > 35){
       $("#slider-fill").val(35);
       $("#slider-fill").next(".ui-slider").find("div").css("width","35%");
       $("#slider-fill").next(".ui-slider").find("a.ui-slider-handle").css("left","35%");
    }
});

您可以在下面找到一个工作示例：

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Slider Stop</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
        <script>
            $(document).on('change', '#slider-fill', function(e){
                if($("#slider-fill").val() > 35){
                   $("#slider-fill").val(35);
                   $("#slider-fill").next(".ui-slider").find("div").css("width","35%");
                   $("#slider-fill").next(".ui-slider").find("a.ui-slider-handle").css("left","35%");
                }
            });
        </script>
    </head> 

    <body>
        <!-- /page -->
        <div data-role="page">
            <!-- /header -->
            <div data-role="header" data-theme="b">
                <h1>Slider stop</h1>
            </div>
            <!-- /content -->
            <div data-role="content">
                <label for="slider-fill">Input slider:</label>
                <input type="range" name="slider-fill" id="slider-fill" value="0" min="0" max="100" data-highlight="true" />
            </div>
        </div>
    </body>
</html>

我希望这有帮助。

于 2012-09-16T04:50:18.733 回答