jQuery-ui weiget第三部分——slider、spinner、tabs

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>窗口小部件</title>
    <script src="resource/jquery-3.3.1.js"></script>
    <script src="resource/jquery-ui.min.js"></script>
    <script src="widget3.js"></script>
    <link rel="stylesheet" type="text/css" href="resource/jquery-ui.min.css">
</head>
<body>
       <span id="spanId">0</span>
       <div id="slider"></div>
       <!--手动进度条-->

       <P>
           <input id="spinner">
           <button id="btnId">获取输入框</button>
       </P>
       <!--数值输入框-->

       <div id="table">
           <ul>
               <li><a href="#1">德鲁伊</a></li>
               <li><a href="#2">法师</a></li>
               <li><a href="#3">圣骑士</a></li>
           </ul>
           <div id="1">
               好玩
               好玩
               真好玩
           </div>
           <div id="2">
               有趣
               有趣
               真有趣
           </div>
           <div id="3">
               有意思
               有意思
               真有意思
           </div>
           <!--这些id必须指向，连接的href的值-->
       </div>
</body>
</html>

JS代码：

var valueSlider,slider;

$(document).ready(function () {
    slider = $("#slider");
    valueSlider = $("#spanId");
    
    slider.slider({
        slide:function (event,ui) {
            valueSlider.text(slider.slider("option","value"));
            //option代表设置多个参数，这里可以去掉，slide表示滑动，数值一直变化，change只看末尾值，slider设置手动的进度条   
        }
    });
    //设置手动进度条，并显示进度值
    
    $("#spinner").spinner();
    $("#spinner").spinner("value","10");
    //上面一个不能省略，先加载后设置属性  spinner：纺纱机  
    $("#btnId").on("click",function () {
        alert($("#spinner").spinner("value")) 
    });
    //设置数值输入框
    
    $("#table").tabs();
    //表格
});

效果：

jQuery-ui weiget第三部分——slider、spinner、tabs

猜你喜欢