拖曳插件—— draggable
拖曳插件 draggable 的功能是拖動(dòng)被綁定的元素昼牛，當(dāng)這個(gè) jQuery UI 插件與元素綁定后隘弊，可以通過(guò)調(diào)用draggable()方法，實(shí)現(xiàn)各種拖曳元素的效果摔握，調(diào)用格式如下：
$(selector). draggable({options})
options 參數(shù)為方法調(diào)用時(shí)的配置對(duì)象盖彭，根據(jù)該對(duì)象可以設(shè)置各種拖曳效果不见，如"containment"屬性指定拖曳區(qū)域葱跋，"axis"屬性設(shè)置拖曳時(shí)的坐標(biāo)方向持寄。
例如，在頁(yè)面中的<div>元素中添加兩個(gè)子類<div>娱俺，通過(guò)與拖曳插件綁定稍味，這兩個(gè)子類<div>元素只能在外層的父<div>元素中任意拖曳，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出荠卷，由于使用 jQuery UI 插件 draggable 綁定了兩個(gè)子類<div>元素模庐，并將配置對(duì)象的"containment"屬性值設(shè)為"parent"，因此僵朗，這兩個(gè)子類<div>元素只能在外層的父框中實(shí)現(xiàn)任意拖曳赖欣。
<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>
放置插件—— droppable
除使用 draggable 插件拖曳任意元素外，還可以調(diào)用 droppable UI 插件將拖曳后的任意元素放置在指定區(qū)域中验庙，類似購(gòu)物車效果顶吮，調(diào)用格式如下：
$(selector).droppable({options})
selector 參數(shù)為接收拖曳元素，options 為方法的配置對(duì)象粪薛，在對(duì)象中悴了，drop 函數(shù)表示當(dāng)被接收的拖曳元素完全進(jìn)入接收元素的容器時(shí)，觸發(fā)該函數(shù)的調(diào)用违寿。
例如湃交，在頁(yè)面中，通過(guò)調(diào)用 droppable 插件將"產(chǎn)品區(qū)"中的元素拖曳至"購(gòu)物車"中藤巢，同時(shí)改變"購(gòu)物車"的背景色和數(shù)量值搞莺，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，先調(diào)用 draggable 插件任意拖曳"產(chǎn)品區(qū)"的元素掂咒，然后才沧，調(diào)用 droppable 插件綁定"購(gòu)物車"中接收元素，當(dāng)"產(chǎn)品區(qū)"元素完全拖曳至"購(gòu)物車"時(shí)绍刮，觸發(fā)定義的 drop 函數(shù)温圆，改變"購(gòu)物車"中背景色和總數(shù)量值。
拖曳排序插件—— sortable
拖曳排序插件的功能是將序列元素（例如<option>孩革、<li>）按任意位置進(jìn)行拖曳從而形成一個(gè)新的元素序列岁歉，實(shí)現(xiàn)拖曳排序的功能，它的調(diào)用格式為：
$(selector).sortable({options});
selector 參數(shù)為進(jìn)行拖曳排序的元素膝蜈，options 為調(diào)用方法時(shí)的配置對(duì)象
例如锅移，在頁(yè)面中，通過(guò)加載 sortable 插件將<ul>元素中的各個(gè)<li>表項(xiàng)實(shí)現(xiàn)拖曳排序的功能彬檀，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出帆啃，由于使用 sortable 插件綁定了<ul>元素，并設(shè)置了拖曳時(shí)的透明度窍帝，因此努潘，<ul>中的各個(gè)<li>元素則能指定的透明度進(jìn)行任意的拖曳排序。
面板折疊插件—— accordion
面板折疊插件可以實(shí)現(xiàn)頁(yè)面中指定區(qū)域類似"手風(fēng)琴"的折疊效果坤学，即點(diǎn)擊標(biāo)題時(shí)展開(kāi)內(nèi)容疯坤，再點(diǎn)另一標(biāo)題時(shí)，關(guān)閉已展開(kāi)的內(nèi)容深浮，基本的 HTML 標(biāo)記是一系列的標(biāo)題（H3 標(biāo)簽）和內(nèi)容 div压怠，因此內(nèi)容不用通過(guò) JavaScript 即可用。調(diào)用格式如下：
$(selector).accordion({options});
其中飞苇，參數(shù)selector為整個(gè)面板元素菌瘫，options 參數(shù)為方法對(duì)應(yīng)的配置對(duì)象蜗顽。
例如，通過(guò) accordion 插件展示幾個(gè)相同區(qū)域面板的折疊效果雨让，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出雇盖，由于綁定了折疊面板插件，默認(rèn)為第一個(gè)面板的內(nèi)容為展示狀態(tài)栖忠，點(diǎn)擊第二個(gè)面板主題時(shí)崔挖，展示主題對(duì)應(yīng)內(nèi)容，同時(shí)關(guān)閉上一個(gè)面板內(nèi)容庵寞。
選項(xiàng)卡插件—— tabs
使用選項(xiàng)卡插件可以將<ul>中的<li>選項(xiàng)定義為選項(xiàng)標(biāo)題狸相，在標(biāo)題中，再使用<a>元素的"href"屬性設(shè)置選項(xiàng)標(biāo)題對(duì)應(yīng)的內(nèi)容捐川，它的調(diào)用格式如下：
$(selector).tabs({options});
selector 參數(shù)為選項(xiàng)卡整體外圍元素脓鹃，該元素包含選項(xiàng)卡標(biāo)題與內(nèi)容将谊，options 參數(shù)為tabs()方法的配置對(duì)象，通過(guò)該對(duì)象還能以 ajax 方式加載選項(xiàng)卡的內(nèi)容。
例如，在頁(yè)面中，添加選項(xiàng)卡的標(biāo)題和內(nèi)容元素卦绣，并綁定 tabs 插件山叮，當(dāng)點(diǎn)擊標(biāo)題時(shí)，以選項(xiàng)卡的方式切內(nèi)容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出疟呐，在tabs()方法的配置對(duì)象中鲁冯，通過(guò)"fx"屬性設(shè)置了選項(xiàng)卡切換時(shí)的效果拷沸，"event"屬性設(shè)置鼠標(biāo)也可以切換選項(xiàng)卡，因此薯演，當(dāng)鼠標(biāo)在移動(dòng)至兩個(gè)選項(xiàng)卡標(biāo)題時(shí)撞芍，對(duì)應(yīng)內(nèi)容以動(dòng)畫(huà)的效果自動(dòng)切換。
對(duì)話框插件—— dialog
對(duì)話框插件可以用動(dòng)畫(huà)的效果彈出多種類型的對(duì)話框跨扮，實(shí)現(xiàn) JavaScript 代碼中alert()和confirm()函數(shù)的功能序无，它的調(diào)用格式為：
$(selector).dialog({options});
selector 參數(shù)為顯示彈出對(duì)話框的元素，通常為<div>衡创，options 參數(shù)為方法的配置對(duì)象愉镰，在對(duì)象中可以設(shè)置對(duì)話框類型、"確定"钧汹、"取消"按鈕執(zhí)行的代碼等丈探。
例如，當(dāng)點(diǎn)擊"提交"按鈕時(shí)拔莱，如果文本框中的內(nèi)容為空碗降，則通過(guò) dialog 插件彈出提示框隘竭，提示輸入內(nèi)容不能為空，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出讼渊，當(dāng)文本框的內(nèi)容為空時(shí)动看，調(diào)用自定義的 sys_Alert 函數(shù)，在該函數(shù)中再調(diào)用 dialog 插件的dialog()方法爪幻，彈出帶模式的顯示信息對(duì)話框菱皆。
菜單工具插件—— menu
菜單工具插件可以通過(guò)<ul>創(chuàng)建多級(jí)內(nèi)聯(lián)或彈出式菜單，支持通過(guò)鍵盤方向鍵控制菜單滑動(dòng)挨稿，允許為菜單的各個(gè)選項(xiàng)添加圖標(biāo)仇轻，調(diào)用格式如下：
$(selector).menu({options});
selector 參數(shù)為菜單列表中最外層<ul>元素，options 為menu()方法的配置對(duì)象奶甘。
例如篷店，在頁(yè)面中，通過(guò)<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單臭家，并將最外層<ul>元素通過(guò)menu()方法綁定插件疲陕，實(shí)現(xiàn)導(dǎo)航菜單的功能，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出钉赁，通過(guò)<ul>內(nèi)嵌的方式蹄殃，構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單，將<li>元素的 class 屬性值設(shè)為"ui-state-disabled"你踩，可將菜單選項(xiàng)置為不可用狀態(tài)窃爷。
微調(diào)按鈕插件—— spinner
微調(diào)按鈕插件不僅能在文本框中直接輸入數(shù)值，還可以通過(guò)點(diǎn)擊輸入框右側(cè)的上下按鈕修改輸入框的值姓蜂，還支持鍵盤的上下方向鍵改變輸入值按厘，調(diào)用格式如下：
$(selector).spinner({options});
selector 參數(shù)為文本輸入框元素，可選項(xiàng) options 參數(shù)為spinner()方法的配置對(duì)象钱慢，在該對(duì)象中逮京，可以設(shè)置輸入的最大、最小值束莫，獲取改變值和設(shè)置對(duì)應(yīng)事件懒棉。
例如，將頁(yè)面中的三個(gè)輸入文本框都與微調(diào)插件相綁定览绿，當(dāng)改變?nèi)齻€(gè)文本框值時(shí)策严，對(duì)應(yīng)的<div>元素的背景色也將隨之發(fā)生變化，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出饿敲，由于三個(gè)文本框輸入元素都綁定微調(diào)插件妻导，因此，無(wú)論是點(diǎn)擊右側(cè)的上下按鈕，還是直接在文本框中輸入值倔韭，都可以改變<div>元素的背景色术浪。
工具提示插件—— tooltip
工具提示插件可以定制元素的提示外觀，提示內(nèi)容支持變量寿酌、Ajax 遠(yuǎn)程獲取胰苏，還可以自定義提示內(nèi)容顯示的位置，它的調(diào)用格式如下：
$(selector).tooltip({options});
其中 selector 為需要顯示提示信息的元素醇疼，可選項(xiàng)參數(shù) options 為 tooltip()方法的配置對(duì)象硕并，在該對(duì)象中，可以設(shè)置提示信息的彈出秧荆、隱藏時(shí)的效果和所在位置倔毙。
例如，將三個(gè)<a>元素與工具提示插件相綁定辰如，當(dāng)把鼠標(biāo)移動(dòng)在<a>元素內(nèi)容時(shí)，以動(dòng)畫(huà)效果彈出對(duì)應(yīng)的提示圖片贵试，移出時(shí)琉兜，圖片自動(dòng)隱藏，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出毙玻，由于各個(gè)<a>元素都綁定了工具提示插件豌蟋，因此，將在指定的位置并以動(dòng)畫(huà)效果展示各個(gè)<a>元素中 title 屬性所對(duì)應(yīng)的內(nèi)容桑滩。
