JQuery之UI插件
1、拖曳插件之traggable
拖曳插件draggable的功能是拖動被綁定的元素，當(dāng)這個jQuery UI插件與元素綁定后，可以通過調(diào)用draggable()方法，實(shí)現(xiàn)各種拖曳元素的效果，調(diào)用格式如下：
$(selector). draggable({options})
options參數(shù)為方法調(diào)用時的配置對象，根據(jù)該對象可以設(shè)置各種拖曳效果，如“containment”屬性指定拖曳區(qū)域，“axis”屬性設(shè)置拖曳時的坐標(biāo)方向。
例如，在頁面中的<div>元素中添加兩個子類<div>，通過與拖曳插件綁定，這兩個子類<div>元素只能在外層的父<div>元素中任意拖曳，
?
<head><title>拖曳插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div id="x" class="drag">沿x軸拖拽</div><div id="y" class="drag">沿y軸拖拽</div></div><script type="text/javascript">$(function () {$("#x").draggable({containment:"parent",axis:"x"});$("#y").draggable({containment:"parent",axis:"y"});});</script></body>
2、放置插件之droppable
?
除使用draggable插件拖曳任意元素外，還可以調(diào)用droppable UI插件將拖曳后的任意元素放置在指定區(qū)域中，類似購物車效果，調(diào)用格式如下：
$(selector).droppable({options})
selector參數(shù)為接收拖曳元素，options為方法的配置對象，在對象中，drop函數(shù)表示當(dāng)被接收的拖曳元素完全進(jìn)入接收元素的容器時，觸發(fā)該函數(shù)的調(diào)用。
例如，在頁面中，通過調(diào)用droppable插件將“產(chǎn)品區(qū)”中的元素拖曳至“購物車”中，同時改變“購物車”的背景色和數(shù)量值，
?
<head><title>放置插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="box"><div class="title">產(chǎn)品區(qū)</div><div class="drag"><div>蘋果</div></div></div><div class="box"><div class="title">回收站</div><div class="cart"><div id="tip">還沒有產(chǎn)品</div></div></div></div><script type="text/javascript">$(function () {$(".drag").draggable();$(".cart").droppable({drop: function () {num++;$(this).addClass('focus'); //改變css類$('#tip').html('');$('.title span').html(num); }})});</script></body>3、拖曳排序插件sortabe
拖曳排序插件的功能是將序列元素（例如<option>、<li>）按任意位置進(jìn)行拖曳從而形成一個新的元素序列，實(shí)現(xiàn)拖曳排序的功能，它的調(diào)用格式為：
$(selector).sortable({options});
selector參數(shù)為進(jìn)行拖曳排序的元素，options為調(diào)用方法時的配置對象，
例如，在頁面中，通過加載sortable插件將<ul>元素中的各個<li>表項實(shí)現(xiàn)拖曳排序的功能，
?
<head><title>拖曳排序插件</title><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title"><span class="fl">我最喜歡的運(yùn)動</span></div><div class="content"><ul><li>1)足球</li><li>2)散步</li><li>3)籃球</li><li>4)乒乓球</li><li>5)騎自行車</li></ul></div></div><script type="text/javascript">$(function () {$("ul").sortable({delay:2,opacity:0.45})});</script></body>
4、面板折疊插件accordion
?
面板折疊插件可以實(shí)現(xiàn)頁面中指定區(qū)域類似“手風(fēng)琴”的折疊效果，即點(diǎn)擊標(biāo)題時展開內(nèi)容，再點(diǎn)另一標(biāo)題時，關(guān)閉已展開的內(nèi)容，調(diào)用格式如下：
$(selector).accordion({options});
其中，參數(shù)selector為整個面板元素，options參數(shù)為方法對應(yīng)的配置對象。
例如，通過accordion插件展示幾個相同區(qū)域面板的折疊效果，
?
<head><title>面板折疊插件</title><link href="Css/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div id="accordion"><h3><a href="#">白富美</a></h3><ul><li>咱們結(jié)婚吧!</li><li>sdsdsaa</li></ul><h3><a href="#">土豪族</a></h3><p>咱們交個朋友吧!</p></div></div><script type="text/javascript">$(function () {$("#accordion").accordion();});</script></body>
5、選項卡插件tabs
?
使用選項卡插件可以將<ul>中的<li>選項定義為選項標(biāo)題，在標(biāo)題中，再使用<a>元素的“href”屬性設(shè)置選項標(biāo)題對應(yīng)的內(nèi)容，它的調(diào)用格式如下：
$(selector).tabs({options});
selector參數(shù)為選項卡整體外圍元素，該元素包含選項卡標(biāo)題與內(nèi)容，options參數(shù)為tabs()方法的配置對象，通過該對象還能以ajax方式加載選項卡的內(nèi)容。
?
例如，在頁面中，添加選項卡的標(biāo)題和內(nèi)容元素，并綁定tabs插件，當(dāng)點(diǎn)擊標(biāo)題時，以選項卡的方式切內(nèi)容，
?
<head><title>選項卡插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div id="tabs"><ul><li><a href="#tabs-1">最愛吃的水果</a></li><li><a href="#tabs-2">最喜歡的運(yùn)動</a></li></ul><div id="tabs-1"><p>橘子</p><p>香蕉</p><p>葡萄</p><p>蘋果</p><p>西瓜</p></div><div id="tabs-2"><p>足球</p><p>散步</p><p>籃球</p><p>乒乓球</p><p>騎自行車</p></div></div></div><script type="text/javascript">$(function () {$("#tabs").tabs({//設(shè)置各選項卡在切換時的動畫效果fx: { opacity: "toggle", height: "toggle" },event: "mousemove" //通過移動鼠標(biāo)事件切換選項卡})});</script></body>
6、對話框插件dialog
?
對話框插件可以用動畫的效果彈出多種類型的對話框，實(shí)現(xiàn)JavaScript代碼中alert()和confirm()函數(shù)的功能，它的調(diào)用格式為：
$(selector).dialog({options});
selector參數(shù)為顯示彈出對話框的元素，通常為<div>，options參數(shù)為方法的配置對象，在對象中可以設(shè)置對話框類型、“確定”、“取消”按鈕執(zhí)行的代碼等。
例如，當(dāng)點(diǎn)擊“提交”按鈕時，如果文本框中的內(nèi)容為空，則通過dialog插件彈出提示框，提示輸入內(nèi)容不能為空，
?
<head><title>對話框插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="content"><span id="spnName" class="fl">張三</span><input id="btnDelete" type="button" value="刪除" class="fr"/></div><div id='dialog-modal'></div></div><script type="text/javascript">$(function () {$("#btnDelete").bind("click", function () { //詢問按鈕事件if ($("#spnName").html() != null) { //如果對象不為空sys_Confirm("您真的要刪除該條記錄嗎？");return false;}});});function sys_Confirm(content) { //彈出詢問信息窗口$("#dialog-modal").dialog({height: 140,modal: true,title: '系統(tǒng)提示',hide: 'slide',buttons: {'確定': function () {$("#spnName").remove();$(this).dialog("close");},'取消': function () {$(this).dialog("close");}},open: function (event, ui) {$(this).html("");$(this).append("<p>" + content + "</p>");}});}</script></body>
7、菜單工具插件menu
?
菜單工具插件可以通過<ul>創(chuàng)建多級內(nèi)聯(lián)或彈出式菜單，支持通過鍵盤方向鍵控制菜單滑動，允許為菜單的各個選項添加圖標(biāo)，調(diào)用格式如下：
$(selector).menu({options});
selector參數(shù)為菜單列表中最外層<ul>元素，options為menu()方法的配置對象。
例如，在頁面中，通過<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個三層結(jié)構(gòu)的導(dǎo)航菜單，并將最外層<ul>元素通過menu()方法綁定插件，實(shí)現(xiàn)導(dǎo)航菜單的功能，
?
<head><title>菜單工具插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><ul id="menu"><li><a href="#">小明一中</a><ul><li><a href="#">高中部</a><ul><li><a href="#">高一(1)班</a></li><li><a href="#">高一(2)班</a></li><li><a href="#">高一(3)班</a><ul><li><a href="#">小胡</a></li><li><a href="#">小李</a></li><li><a href="#">小陳</a></li></ul></li></ul></li><li><a href="#">初中部</a><ul><li><a href="#">初一(1)班</a></li><li><a href="#">初一(2)班</a></li><li><a href="#">初一(3)班</a></li></ul></li><li><a href="#">教研部</a></li></ul></li><li class="ui-state-disabled"><a href="#">大明二中</a></li></ul><script type="text/javascript">$(function () {$("#menu").menu();});</script></body>
8、微調(diào)按鈕插件spinner
?
微調(diào)按鈕插件不僅能在文本框中直接輸入數(shù)值，還可以通過點(diǎn)擊輸入框右側(cè)的上下按鈕修改輸入框的值，還支持鍵盤的上下方向鍵改變輸入值，調(diào)用格式如下：
$(selector).spinner({options});
selector參數(shù)為文本輸入框元素，可選項options參數(shù)為spinner()方法的配置對象，在該對象中，可以設(shè)置輸入的最大、最小值，獲取改變值和設(shè)置對應(yīng)事件。
例如，將頁面中的三個輸入文本框都與微調(diào)插件相綁定，當(dāng)改變?nèi)齻€文本框值時，對應(yīng)的<div>元素的背景色也將隨之發(fā)生變化，
?
<head><title>微調(diào)按鈕插件</title><link href="http://www.imooc.com/data/jquery-ui.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script><script src="http://www.imooc.com/data/jquery-ui-1.9.2.min.js" type="text/javascript"></script></head><body><div id="divtest"><div class="title">選擇顏色值</div><div class="content"><span id="spnColor" class="input fl"><input /></span><span id="spnPrev" class="prev fr"></span></div></div><script type="text/javascript">$(function () {//定義變量var intR = 0, intG = 0, intB = 0, strColor;$("input").spinner({//初始化插件max: 10,min: 0,//設(shè)置微調(diào)按鈕遞增/遞減事件spin: function (event, ui) {if (ui.value == 8)spnPrev.style.backgroundColor = "red";elsespnPrev.style.backgroundColor = "green";},//設(shè)置微調(diào)按鈕值改變事件change: function (event, ui) {var intTmp = $(this).spinner("value");if (intTmp < 0) $(this).spinner("value", 0);if (intTmp > 10) $(this).spinner("value", 10);if (intTmp == 8)spnPrev.style.backgroundColor = "red";elsespnPrev.style.backgroundColor = "green";}});});</script></body>
9、工具提示插件tooltip
?
工具提示插件可以定制元素的提示外觀，提示內(nèi)容支持變量、Ajax遠(yuǎn)程獲取，還可以自定義提示內(nèi)容顯示的位置，它的調(diào)用格式如下：
$(selector).tooltip({options});
其selector為需要顯示提示信息的元素，可選項參數(shù)options為tooltip()方法的配置對象，在該對象中，可以設(shè)置提示信息的彈出、隱藏時的效果和所在位置。
例如，將三個<a>元素與工具提示插件相綁定，當(dāng)把鼠標(biāo)移動在<a>元素內(nèi)容時，以動畫效果彈出對應(yīng)的提示圖片，移出時，圖片自動隱藏，
?
<body><div id="divtest"><div class="title">工具提示插件</div><div class="content"><div><label for="name">姓名</label><input id="name" name="name" title="我是土豪，歡迎與我做朋友" /></div></div></div><script type="text/javascript">$(function () {$("input").tooltip({show: {effect: "slideDown",delay: 350},hide: {effect: "explode",delay: 350},position: {my: "left top",at: "left bottom"}});});</script></body>?
?
最近在整理一些資源工具，放在網(wǎng)站分享?http://tools.maqway.com
歡迎關(guān)注公眾號：麻雀唯伊 ， 不定時更新資源文章，生活優(yōu)惠，或許有你想看的
?
?
?
總結(jié)
以上是生活随笔為你收集整理的JQuery之UI插件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 微信公众号开发之获取地理位置接口
- 下一篇： 英语四六级及考研语法（学习方法）