jqueryUI_ZenDei技術網路在線

jQuery UI是以jQuery為基礎的代碼庫。包含底層用戶交互、動畫、特效、和可更換主題的可視控制項。我們可以直接用它來構建具有很好交互性的web應用程式。 jQueryUI網址：http://jqueryui.com 常用的jqueryUI插件：Draggable 1、設置數值的滑動條 1 <! ...

jQuery UI是以jQuery為基礎的代碼庫。包含底層用戶交互、動畫、特效、和可更換主題的可視控制項。我們可以直接用它來構建具有很好交互性的web應用程式。

jQueryUI網址：http://jqueryui.com

常用的jqueryUI插件：Draggable

1、設置數值的滑動條

 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>

帶數值的滑動條

2、自定義滾動條

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jQueryUI</title>
 6     <style>
 7         /*自定義滾動條*/
 8         .scroll_con{
 9             width:370px;
10             height:488px;
11             border:1px solid #ccc;
12             margin:10px auto 0;
13             text-indent: 2em;
14             position:relative;
15             overflow: hidden;
16         }
17         .paragraph{
18             width:330px;
19             position:absolute;
20             left:0;
21             top:0;
22             line-height:32px;
23             padding:15px;
24         }
25         .scroll_bar_con{
26             width:10px;
27             height:490px;
28             position: absolute;
29             right:5px;
30             top:5px;
31         }
32         .scroll_bar{
33             width:10px;
34             height:200px;
35             background: #ccc;
36             position:absolute;
37             left:0;
38             top:0;
39             cursor: pointer;
40             border-radius: 5px;
41         }
42     </style>
43     <script src="../js/jquery-1.12.4.min.js"></script>
44     <script src="../js/jquery-ui.min.js"></script>
45     <script>
46         $(function () {
47             var h =$(".paragraph").outerHeight();
48             console.log(h);
49             var hide = h-500;
50             $(".scroll_bar").draggable({
51                 axis:'y',
52                 containment:'parent',
53                 opacity:0.6,
54                 drag:function(ev,ui){
55                     var nowTop = ui.position.top;
56                     var nowscroll = parseInt(nowTop/290*hide);
57                     $(".paragraph").css({top:-nowscroll});
58                 }
59             })
60         })
61     </script>
62 </head>
63 <body>
64 <div class="scroll_con">
65    <div>
66        <div class="paragraph">
67        人生有很多個路口，我們會遇到很多人，有時候，以為某個人就是我們的終點，其實不然，或許我們也只是萍水相逢的過客而已，在彼此的生命長河中泛起點點漣漪，最後又悄然離去，走向不同的遠方，遇見未知的人和事。
68         世間，有許許多多的關係是言不明卻又真真切切存在的；也有許多關係是不互相需要的，即是單方面的，會更偏重於其中一方。譬如魚和水，天空和飛鳥，魚離開了水會不能存活，而水離開了魚或許少了幾分生氣但也會多了幾分澄澈；天空也不會因為飛鳥的存在與否有很大的改變，它是天空，還會是天空。我們不是互相需要的，所以偶然的我們相遇了，有了一段美好的可以懷念的記憶，然後走著走著我們就散了。
69           有人說過，每一次的遇見都是最美麗的意外。確實，每一次無論是好是壞，是會使我們興奮地去擁抱還是猶豫和遲疑，我們不妨把它當一次美麗的意外欣然接受，人生總是會有這樣或那樣的小插曲，真是因為這些，我們生活才有了美麗的色彩，才有了不同的情緒感受，閑時、愁時拿出來細細品，會別有一番風味的。
70        既然說生活有插曲，那麼必定也有主調，所以在調節人生插曲的時候一定不能忘了人生的前行目標。若不是終點，請微笑向前。一定要相信，陽光那麼美好，花兒那麼燦爛，人生必定是風雨同行的，但是風雨只是伴奏，溫暖的陽光會始終陪伴著我們的漫漫人生路。有時我們總是會把生命中的一個小小站臺當做人生終點站，但當有一天，他們微微笑，揮揮手離開，不帶走一片雲彩，卻帶走了你和他的所有的故事和美好的時光，此刻我們默默站在原地，原來，這隻是夢一場。夢醒了，所以該離開了，放不下，也無法迴首，那就讓他留在風中吧。“同一個地方，離開的已然離開，到來的人也正在到來。”
71        遇到過一個人，彼此喜歡，愛慕，一如電視中年少輕狂的少年少女一樣，會因為對方的一個笑容，一句話語開心好半天。“那時的天總是很藍，日子過得很慢，你總說畢業遙遙無期，轉眼就各奔東西……”美好的日子里我們打打鬧鬧，想著就這樣，一輩子，從未想過有一天我們會彼此遠離，奔向不同的地方，牽起另外一個人的手，許她一世無殤。事情的開始是如此的美好，變化總是出乎我們預料，後來的後來，我們走丟了，不再活在彼此的生活中，原以為的永遠竟然是那麼不堪一擊，原來我們只是過客不是歸人。
72        畢竟是真的喜歡，那種純粹的愛戀回憶起來竟是如此的令我難忘，也是在這個時候，真真切切地體會到“思念”的深層含義，那種感覺痛徹心扉，欲罷不能，好想回過頭，給他一個深深的擁抱，告訴他，我好想他，不要走，可是，我不能，愛是自私和排他的，但既然喜歡他就要讓他感到開心和幸福，他的快樂就是我的快樂，我的思念是以他為圓心的記憶，我可以對別人自私，可對他，我不能自私，我應該給他追求他自己幸福的權利，儘管我不想他離開。
73       他說，秋風颯爽，思念遠航，想用腳步去丈量，美好的回憶只適合珍藏，心在遠方，就不會在同一個地方停留太長時光，用回憶串起過往，帶著他們去流浪，天涯海角，是否存在不一樣的風光。
74         既然決定遠航，就不要戀戀不忘過往。我只是一個歸人，來自不同的地方；我只是一個過客，找不一樣的樂趣欣賞。
75         既然不是終點，那就請微笑向前。
76   </div>
77         <div class="scroll_bar_con">
78             <div class="scroll_bar"></div>
79         </div>
80     </div>
81 </div>
82 </body>
83 </html

自定義滾動條