JQuery UI——滑动条组件

最新推荐文章于 2023-05-08 08:36:43 发布

wxaURmine

最新推荐文章于 2023-05-08 08:36:43 发布

阅读量1.8k

点赞数

分类专栏： jQuery技术文章标签：滑动条 ui JQuery jquery-ui

本文链接：https://blog.csdn.net/wxaURmine/article/details/46848039

版权

jQuery技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在底层元素上调用slider方法可以生成滑动条组件

一.配置滑动条
滑动条组件的选项：

animate：若设为true，用户点击滑块会跳动
disable：禁用滑块
max：滑动条最大值，默认100
min：滑动条最小值，默认0
orientation：滑动条方向
range：和values选项一起生成具有多个滑块的滑动条
step：定义从max到min的最小间距
value：滑动条表示的值
values：和range一起创建多个滑块的滑动条

/**orientation改变滑动方向*/

<html>
<head>
    <title></title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css">
    #hslider,#vslider{margin:10px}
</style>
<script type="text/javascript">
    $(function(){
        $("#hslider").slider({
            value:35
        });

        $("#vslider").slider({
            orientation:"vertical",
            value:35
        });
    });
</script>
<body>
    <div id="hslider"></div>
    <div id="vslider"></div>
</body>
</html>

这里写图片描述

/**给滑动条增加动画效果*/

<script type="text/javascript">
    $(function(){
        $("#slider").slider({
            animate:"fast"
        });
    });
</script>
<body>
    <div id="slider"></div>

/**截图效果不明显，小伙伴们可自行演示*/

/**创建范围选择器*/

<script type="text/javascript">
    $(function(){
        $("#slider").slider({
           value:[35,65],
           range:true,
           create:displaySliderValues,
           slide:displaySliderValues
        });

        function displaySliderValues(){
            $("#lower").text($("#slider").slider("values",0));
            $("#upper").text($("#slider").slider("values",1));
        }
    });
</script>
<body>
    <div id="slider"></div>
    <div>Lower Value:<span id="lower"></span>
        Upper Value:<span id="upper"></span></div>
</body>

/**为了得到范围选择器，需要把range选项设置位true，并把values选项设置为一个包含最低和最高边界的数组（创建普通滑块条使用value选项，而范围选择器使用values），在例子中create和slide事件绑定了处理函数，其中$("#lower").text($("#slider").slider("values",0));滑块的顺序号从0开始计算，即取得第一个滑块的值显示在div中*/

这里写图片描述

二.滑动条组件方法

destory：让底层化快恢复原始状态
disable：禁用滑块
enable：启用滑块
option：改变滑块条组件选项
“value”,value：得到或者设置值
“values”,[values]：得到或者设置范围选择器的值

/**滑动条控制实例*/

<html>
<head>
    <title></title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css">
    #slider,#rangeslider,*.inputDiv{margin:10px}
    label{width:80px;display: :inline-block;margin:4px;}
</style>
<script type="text/javascript">
    $(function(){
        $("#slider").slider({
           value:50,
           create:function(){
            $("#slideVal").val($("#slider").slider("value"));
           }
        });

        $("#rangeslider").slider({
            values:[35,65],
            range:true,
            create:function(){
                $("#rangeMin").val($("#rangeslider").slider("values",0));
                $("#rangeMax").val($("#rangeslider").slider("values",1));
            }
        });

        $("input").change(function(e){
            switch (this.id){
                case "rangeMin":
                case "rangeMax":
                    var index = (this.id == "rangeMax")?1:0;
                    $("#rangeslider").slider("values",index,$(this).val())
                    break;
                case "slideVal":
                    $("#slider").slider("value",$(this).val())
                    break;
            }
        });
    });
</script>
<body>
    <div id="rangeslider"></div>
    <div class="inputDiv">
        <label for="rangeMin">Range Min:</label><input id="rangeMin" />
        <label for="rangeMax">Range Max:</label><input id="rangeMax" />
    </div>
    <div id="slider"> 

    </div>
    <div class="inputDiv">
        <label for="slideVal">Slide Val:</label><input id="slideVal" />
    </div>

</body>
</html>

这里写图片描述
当input数字变化时，处理函数就会自动执行

三.滑动条组件事件

create：当滑动条创建完成时触发
start：用户开始滑动滑块时触发
slide：滑动滑块过程中，鼠标每一次移动都会触发
change：当用户停止滑块或者使用脚本改变滑动条组件值时触发
stop：用户停止滑块时触发

wxaURmine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery UI——滑动条组件

在底层元素上调用slider方法可以生成滑动条组件一.配置滑动条滑动条组件的选项：animate：若设为true，用户点击滑块会跳动disable：禁用滑块max：滑动条最大值，默认100min：滑动条最小值，默认0orientation：滑动条方向range：和values选项一起生成具有多个滑块的滑动条step：定义从max到min的最小间距value：滑动条表示的值val
复制链接

扫一扫