jqueryUI - 爱码网

jQuery UI是以jQuery为基础的代码库。包含底层用户交互、动画、特效、和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。

jQueryUI网址：http://jqueryui.com

一、jQuery UI主要分为3个部分：交互、小部件和效果库。

1、交互

交互部件是一些与鼠标交互相关的内容，包括Draggable、Droppable、Resizable、Selectable和Sortable等

2、小部件

主要是一些界面的扩展，包括AutoComplete、ColorPicker、Dialog、Slider、Tabs、ProgressBar、Spinner等

3、效果

用于提供丰富的动画效果，包括Add Class、Color Animation、Toggle等

1.1、常用的jqueryUI插件：Draggable

用法：$("selector").draggable();

1、设置数值的滑动条

jqueryUI

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQueryUI</title>
 6     <style>
 7         .box{
 8             display: flex;
 9         }
10         .slide_con{
11             width:610px;
12             height:40px;
13             border:1px solid #ccc;
14             margin:20px 10px 0 300px;
15             position: relative;
16         }
17         .dragbar{
18             width:40px;
19             height:40px;
20             background: gold;
21             cursor: pointer;
22         }
23         .progress{
24             height:40px;
25             background:#f7f7f7;
26             position:absolute;
27             left:0;
28             top:0;
29         }
30         .slide_count{
31             width:40px;
32             height:40px;
33             margin:20px 10px;
34             display: inline-block;
35             text-align: center;
36             line-height: 40px;
37             border:1px solid #ccc;
38         }
39     </style>
40     <script src="../js/jquery-1.12.4.min.js"></script>
41     <script src="../js/jquery-ui.min.js"></script>
42     <script>
43         $(function () {
44             $(".dragbar").draggable({
45                 //约束元素只能在x轴向拖动
46                 axis:"x",
47                 //约束元素只能在父级内拖动
48                 containment:"parent",
49                 opacity:0.6,
50                 drag:function(ev,ui){
51                     console.log(ui.position.left);
52                     var nowleft = ui.position.left;
53                     $(".progress").css({width:nowleft});
54                     $(".slide_count").val(parseInt(nowleft*100/570))
55                 }
56             })
57         })
58     </script>
59 </head>
60 <body>
61 <div class="box">
62     <div class="slide_con">
63         <div class="dragbar"></div>
64         <div class="progress"></div>
65     </div>
66     <input type="text" class="slide_count" value="0">
67 </div>
68 </body>
69 </html>

带数值的滑动条