JQuery UI——滑动条组件

在底层元素上调用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>

JQuery UI——滑动条组件_第1张图片

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



    
"slider">
/**截图效果不明显,小伙伴们可自行演示*/
/**创建范围选择器*/

<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>

JQuery UI——滑动条组件_第2张图片
当input数字变化时,处理函数就会自动执行

三.滑动条组件事件

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

你可能感兴趣的:(jQuery技术)