拖曳插件—— draggable
拖曳插件 draggable 的功能是拖動(dòng)被綁定的元素，當(dāng)這個(gè) jQuery UI 插件與元素綁定后，可以通過調(diào)用draggable()方法，實(shí)現(xiàn)各種拖曳元素的效果，調(diào)用格式如下：
$(selector). draggable({options})
options 參數(shù)為方法調(diào)用時(shí)的配置對象，根據(jù)該對象可以設(shè)置各種拖曳效果，如"containment"屬性指定拖曳區(qū)域，"axis"屬性設(shè)置拖曳時(shí)的坐標(biāo)方向。
例如，在頁面中的<div>元素中添加兩個(gè)子類<div>，通過與拖曳插件綁定，這兩個(gè)子類<div>元素只能在外層的父<div>元素中任意拖曳，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用 jQuery UI 插件 draggable 綁定了兩個(gè)子類<div>元素，并將配置對象的"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ū)域中，類似購物車效果，調(diào)用格式如下：
$(selector).droppable({options})
selector 參數(shù)為接收拖曳元素，options 為方法的配置對象，在對象中，drop 函數(shù)表示當(dāng)被接收的拖曳元素完全進(jìn)入接收元素的容器時(shí)，觸發(fā)該函數(shù)的調(diào)用。
例如，在頁面中，通過調(diào)用 droppable 插件將"產(chǎn)品區(qū)"中的元素拖曳至"購物車"中，同時(shí)改變"購物車"的背景色和數(shù)量值，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，先調(diào)用 draggable 插件任意拖曳"產(chǎn)品區(qū)"的元素，然后，調(diào)用 droppable 插件綁定"購物車"中接收元素，當(dāng)"產(chǎn)品區(qū)"元素完全拖曳至"購物車"時(shí)，觸發(fā)定義的 drop 函數(shù)，改變"購物車"中背景色和總數(shù)量值。
拖曳排序插件—— sortable
拖曳排序插件的功能是將序列元素（例如<option>、<li>）按任意位置進(jìn)行拖曳從而形成一個(gè)新的元素序列，實(shí)現(xiàn)拖曳排序的功能，它的調(diào)用格式為：
$(selector).sortable({options});
selector 參數(shù)為進(jìn)行拖曳排序的元素，options 為調(diào)用方法時(shí)的配置對象
例如，在頁面中，通過加載 sortable 插件將<ul>元素中的各個(gè)<li>表項(xiàng)實(shí)現(xiàn)拖曳排序的功能，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于使用 sortable 插件綁定了<ul>元素，并設(shè)置了拖曳時(shí)的透明度，因此，<ul>中的各個(gè)<li>元素則能指定的透明度進(jìn)行任意的拖曳排序。
面板折疊插件—— accordion
面板折疊插件可以實(shí)現(xiàn)頁面中指定區(qū)域類似"手風(fēng)琴"的折疊效果，即點(diǎn)擊標(biāo)題時(shí)展開內(nèi)容，再點(diǎn)另一標(biāo)題時(shí)，關(guān)閉已展開的內(nèi)容，基本的 HTML 標(biāo)記是一系列的標(biāo)題（H3 標(biāo)簽）和內(nèi)容 div，因此內(nèi)容不用通過 JavaScript 即可用。調(diào)用格式如下：
$(selector).accordion({options});
其中，參數(shù)selector為整個(gè)面板元素，options 參數(shù)為方法對應(yīng)的配置對象。
例如，通過 accordion 插件展示幾個(gè)相同區(qū)域面板的折疊效果，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于綁定了折疊面板插件，默認(rèn)為第一個(gè)面板的內(nèi)容為展示狀態(tài)，點(diǎn)擊第二個(gè)面板主題時(shí)，展示主題對應(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)題對應(yīng)的內(nèi)容，它的調(diào)用格式如下：
$(selector).tabs({options});
selector 參數(shù)為選項(xiàng)卡整體外圍元素，該元素包含選項(xiàng)卡標(biāo)題與內(nèi)容，options 參數(shù)為tabs()方法的配置對象，通過該對象還能以 ajax 方式加載選項(xiàng)卡的內(nèi)容。
例如，在頁面中，添加選項(xiàng)卡的標(biāo)題和內(nèi)容元素，并綁定 tabs 插件，當(dāng)點(diǎn)擊標(biāo)題時(shí)，以選項(xiàng)卡的方式切內(nèi)容，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，在tabs()方法的配置對象中，通過"fx"屬性設(shè)置了選項(xiàng)卡切換時(shí)的效果，"event"屬性設(shè)置鼠標(biāo)也可以切換選項(xiàng)卡，因此，當(dāng)鼠標(biāo)在移動(dòng)至兩個(gè)選項(xiàng)卡標(biāo)題時(shí)，對應(yīng)內(nèi)容以動(dòng)畫的效果自動(dòng)切換。
對話框插件—— dialog
對話框插件可以用動(dòng)畫的效果彈出多種類型的對話框，實(shí)現(xiàn) JavaScript 代碼中alert()和confirm()函數(shù)的功能，它的調(diào)用格式為：
$(selector).dialog({options});
selector 參數(shù)為顯示彈出對話框的元素，通常為<div>，options 參數(shù)為方法的配置對象，在對象中可以設(shè)置對話框類型、"確定"、"取消"按鈕執(zhí)行的代碼等。
例如，當(dāng)點(diǎn)擊"提交"按鈕時(shí)，如果文本框中的內(nèi)容為空，則通過 dialog 插件彈出提示框，提示輸入內(nèi)容不能為空，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，當(dāng)文本框的內(nèi)容為空時(shí)，調(diào)用自定義的 sys_Alert 函數(shù)，在該函數(shù)中再調(diào)用 dialog 插件的dialog()方法，彈出帶模式的顯示信息對話框。
菜單工具插件—— menu
菜單工具插件可以通過<ul>創(chuàng)建多級內(nèi)聯(lián)或彈出式菜單，支持通過鍵盤方向鍵控制菜單滑動(dòng)，允許為菜單的各個(gè)選項(xiàng)添加圖標(biāo)，調(diào)用格式如下：
$(selector).menu({options});
selector 參數(shù)為菜單列表中最外層<ul>元素，options 為menu()方法的配置對象。
例如，在頁面中，通過<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單，并將最外層<ul>元素通過menu()方法綁定插件，實(shí)現(xiàn)導(dǎo)航菜單的功能，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，通過<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ù)值，還可以通過點(diǎn)擊輸入框右側(cè)的上下按鈕修改輸入框的值，還支持鍵盤的上下方向鍵改變輸入值，調(diào)用格式如下：
$(selector).spinner({options});
selector 參數(shù)為文本輸入框元素，可選項(xiàng) options 參數(shù)為spinner()方法的配置對象，在該對象中，可以設(shè)置輸入的最大、最小值，獲取改變值和設(shè)置對應(yīng)事件。
例如，將頁面中的三個(gè)輸入文本框都與微調(diào)插件相綁定，當(dāng)改變?nèi)齻€(gè)文本框值時(shí)，對應(yīng)的<div>元素的背景色也將隨之發(fā)生變化，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于三個(gè)文本框輸入元素都綁定微調(diào)插件，因此，無論是點(diǎn)擊右側(cè)的上下按鈕，還是直接在文本框中輸入值，都可以改變<div>元素的背景色。
工具提示插件—— tooltip
工具提示插件可以定制元素的提示外觀，提示內(nèi)容支持變量、Ajax 遠(yuǎn)程獲取，還可以自定義提示內(nèi)容顯示的位置，它的調(diào)用格式如下：
$(selector).tooltip({options});
其中 selector 為需要顯示提示信息的元素，可選項(xiàng)參數(shù) options 為 tooltip()方法的配置對象，在該對象中，可以設(shè)置提示信息的彈出、隱藏時(shí)的效果和所在位置。
例如，將三個(gè)<a>元素與工具提示插件相綁定，當(dāng)把鼠標(biāo)移動(dòng)在<a>元素內(nèi)容時(shí)，以動(dòng)畫效果彈出對應(yīng)的提示圖片，移出時(shí)，圖片自動(dòng)隱藏，如下圖所示：
在瀏覽器中顯示的效果：
從圖中可以看出，由于各個(gè)<a>元素都綁定了工具提示插件，因此，將在指定的位置并以動(dòng)畫效果展示各個(gè)<a>元素中 title 屬性所對應(yīng)的內(nèi)容。
