jqueryUI
jQuery UI是以jQuery爲基礎的代碼庫。包含底層用戶交互、動畫、特效、和可更換主題的可視控件。咱們能夠直接用它來構建具備很好交互性的web應用程序。
jQueryUI網址：http://jqueryui.com
1、jQuery UI主要分爲3個部分：交互、小部件和效果庫。
一、交互
交互部件是一些與鼠標交互相關的內容，包括Draggable、Droppable、Resizable、Selectable和Sortable等css
二、小部件
主要是一些界面的擴展，包括AutoComplete、ColorPicker、Dialog、Slider、Tabs、ProgressBar、Spinner等html
三、效果
用於提供豐富的動畫效果，包括Add Class、Color Animation、Toggle等jquery
1.一、經常使用的jqueryUI插件：Draggable
用法：$("selector").draggable();web
一、設置數值的滑動條ide
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>
二、自定義滾動條flex
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
1.二、droppable方法
用法：$("selector").droppable();動畫
下面代碼是：把一個div框放進另外一個框中ui
$("#drop1").droppable();
$("#drop1").on("drop",function(ev,ui){
$(this).text("放置進來了");
});
$("#drop1").on("dropout",function(ev,ui){ $(this).text("出去了");})selectable
1.三、selectable方法
用法：$("selector").selectable();this
下面代碼是：一個選擇題，選對以後會彈框spa
$(function(){
$("#selectable").selectable();
$("#btn").on("click",function(){
if($("#right").hasClass("ui-selected")){
alert("恭喜你答對了！");
}
})
})
1.四、resizable()尺寸方法
用法：$("selector").resizable();
下面代碼是：拖動會變大
$("#resize").resizable();
1.五、sortable()方法
用法：$("selector").sortable();
下面代碼是：拖動會更變位置
$("#sort").sortable();
1.六、accordion()方法
用法：$("selector").accordion();
下面代碼是：拖動會更變位置
$("#accordion").accordion();
html代碼：
<div class="accordion" id="accordion">
<h3>選項1</h3>
<div>
<p>交互部件是一些與鼠標交互相關的內容，包括Draggable、Droppable、Resizable、Selectable和Sortable等二、小部件</p>
</div>
<h3>選項2</h3>
<div>
<p>交互部件是一些與鼠標交互相關的內容，包括Draggable、Droppable、Resizable、Selectable和Sortable等二、小部件</p>
</div>
<h3>選項3</h3>
<div>
<p>交互部件是一些與鼠標交互相關的內容，包括Draggable、Droppable、Resizable、Selectable和Sortable等二、小部件</p>
</div>
<h3>選項4</h3>
<div>
<p>交互部件是一些與鼠標交互相關的內容</p>
</div>
</div>
2.一、autocomplete()方法
用法：$("selector").autocomplete();
下面代碼是：拖動會更變位置
$("#autocomplete").autocomplete({});
2.二、slider()方法
用法：$("selector").slider();
下面代碼是：每次拖動滑塊，值都會改變
2.三、Dialog()方法
用法：$("selector").dialog();
下面代碼是：對話框
<div class="pop" id="dialog">
<p class="message">用戶名不能爲空</p>
<a id="btn" class="btn">朕知道了</a>
</div>
<button class="confirm">點擊彈框</button>
2.四、Progressbar()方法
用法：$("selector").progressbar();
下面代碼是：進度條
<div id="progress"></div>
<p class="load">Loading...</p>
2.五、menu()方法
用法：$("selector").menu();
下面代碼是：菜單
<ul id="menu">
<li><a href="">首頁</a></li>
<li>
<a href="">新聞動態</a>
<ul>
<li>娛樂新聞</li>
<li>財經新聞</li>
<li>科技新聞</li>
</ul>
</li>
<li><a href="">新聞標題</a></li>
<li><a href="">新聞標題</a></li>
<li><a href="">新聞標題</a></li>
</ul>
2.六、日期控件DatePicker()方法
用法：$("selector").datepicker();
下面代碼是：日期控件
<div>
<label for="date">日期</label>
<input type="text" id="date">
</div>
$(function(){
$("#date").datepicker();
})
2.六、spinner()方法
用法：$("selector").spinner();
下面代碼是：輸入框+-
$("#input").spinner();
2.七、tabs()方法
用法：$("selector").tabs();
下面代碼是：選項卡
$("#tab").tabs();
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
