1

最小値が 0、最大値が 100、制約値が 35 の jQuery Mobile スライダーがあります。スライダーが 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 に答える