Question

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

Answer 1

以下脚本停止滑块的值为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>

我希望这会有所帮助。

在约束值处停止jQuery Mobile滑块

1 个答案: