jqueryUI
jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。
jqueryUI 网址
http://jqueryui.com/
常用jqueryUI插件：
Draggable
1、设置数值的滑动条
2、自定义滚动条
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport"
6 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>jqueryui-draggable</title>
9
10 <style type="text/css">
11
12 .con{
13 width:300px;
14 height:300px;
15 border:1px solid #000;
16 margin:50px auto 0;
17 }
18
19 .box{
20 width:40px;
21 height:40px;
22 background-color:gold;
23 cursor:pointer;
24 }
25
26
27 </style>
28
29 <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
30 <script type="text/javascript" src="../js/jquery-ui.min.js"></script> <!--需引入该库-->
31 <script type="text/javascript">
32 $(function(){
33 $('.box').draggable({
34 // 约束元素在父级内拖动
35 containment:'parent',
36
37 //限制在x轴向拖动
38 axis:'x',
39
40 //拖动是透明度变为0.6
41 opacity:0.6,
42
43 drag:function(ev,ui){
44 console.log(ui);
45 console.log(ui.position.left) //滑动横坐标
46 }
47 })
48 })
49 </script>
50
51 </head>
52 <body>
53
54 <div class="con">
55 <div class="box"></div>
56 </div>
57
58 </body>
59 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>drag滚动条</title>
6 <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
7 <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
8 <script type="text/javascript">
9 $(function(){
10 $('.dragbar').draggable({
11 containment:'parent', // 约束元素在父级内拖动
12 axis:'x', //限制在x轴向拖动
13 opacity:0.6, //拖动是透明度变为0.6
14
15 drag:function(ev,ui){
16 //console.log(ui.position.left)
17 var nowleft=ui.position.left; //滑动横坐标
18 $('.progress').css({width:nowleft}); //滑动改变progress宽度
19 $('.slide_count').val(parseInt(nowleft*100/570)); //滑动改变slide_count框内数字
20 }
21 })
22 })
23 </script>
24 <style type="text/css">
25 .slidebar_con{
26 width:650px;
27 height:32px;
28 margin:50px auto 0;
29 }
30
31 .slidebar{
32 width:600px;
33 height:30px;
34 border:1px solid #ccc;
35 float:left;
36 position:relative;
37 }
38
39 .slidebar .dragbar{
40 width:30px;
41 height:30px;
42 background-color:gold;
43 cursor:pointer;
44 position:absolute;
45 left:0;
46 top:0;
47 }
48
49 .slidebar .progress{
50 width:0px;
51 height:30px;
52 background-color:#f0f0f0;
53 position:absolute;
54 left:0;
55 top:0;
56 }
57
58 .slide_count{
59 padding:0;
60 float:right;
61 width:40px;
62 height:30px;
63 border:1px solid #ccc;
64 text-align:center;
65 font-size:16px;
66 }
67
68 </style>
69 </head>
70 <body>
71 <div class="slidebar_con">
72 <div class="slidebar">
73 <div class="progress"></div>
74 <div class="dragbar"></div>
75 </div>
76 <input type="text" name="" value="0" class="slide_count">
77 </div>
78 </body>
79 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>自定义滚动条</title>
6 <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
7 <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
8 <script type="text/javascript">
9 $(function(){
10 var h=$('.paragraph').outerHeight(); //获取paragraph段落高度；
11 var hide=h-500; //页面隐藏的段落高度
12
13 $('.scroll_bar').draggable({
14 containment:'parent',
15 axis:'y',
16 opacity:0.6,
17
18 drag:function(ev,ui){
19 var nowtop=ui.position.top;
20 var nowscroll=parseInt(nowtop/290*hide);
21 $('.paragraph').css({top:-nowscroll})
22 }
23 })
24 })
25
26 </script>
27 <style type="text/css">
28 .scroll_con{
29 width:400px;
30 height:500px;
31 border:1px solid #ccc;
32 margin:50px auto 0;
33 position:relative;
34 overflow:hidden;
35 }
36
37 .paragraph{
38 width:360px;
39 position:absolute;
40 left:0;
41 top:0;
42 padding:10px 20px;
43 font-size:14px;
44 font-family:'Microsoft Yahei';
45 line-height:32px;
46 text-indent:2em;
47 }
48
49 .scroll_bar_con{
50 width:10px;
51 height:490px;
52 position:absolute;
53 right:5px;
54 top:5px;
55 }
56
57 .scroll_bar{
58 width:10px;
59 height:200px;
60 background-color:#ccc;
61 position:absolute;
62 left:0;
63 top:0;
64 cursor:pointer;
65 border-radius:5px;
66
67 }
68
69 </style>
70 </head>
71 <body>
72 <div class="scroll_con">
73 <div class="paragraph">
74 2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
75 掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
76 学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
77 学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
78 了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
79 了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
80 </div>
81
82 <div class="scroll_bar_con">
83 <div class="scroll_bar">
84 </div>
85
86 </div>
87 </div>
88 </body>
89 </html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
