一、jQuery UI簡介

jQuery UI 是建立在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。無論您是創建高度交互的 Web 應用程序還是僅僅向窗體控件添加一個日期選擇器，jQuery UI 都是一個完美的選擇。

jQuery UI包含了許多維持狀態的小部件（Widget），因此，它與典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您學會使用其中一個，您就知道如何使用其他的小部件（Widget）。

二、jQuery UI組件構成

jQuery UI 主要分為3個部分：交互、微件和效果庫。

1、交互（Interactions）

交互部件是一些與鼠標交互相關的內容，包括縮放（Resizable）?,?拖動（Draggable）?,?放置（Droppable）?,?選擇（Selectable）?,?排序（Sortable）等。

2、小部件（Widgets）

主要是一些界面的擴展，包括折疊面板（Accordion）?,?自動完成（Autocomplete）?,?按鈕（Button）?,?日期選擇器（Datepicker）?,?對話框（Dialog）?,?菜單（Menu）?,?進度條（Progressbar）?,?滑塊（Slider）?,?旋轉器（Spinner）?,?標簽頁（Tabs）?,?工具提示框（Tooltip）等，新版本的UI將包含更多的微件。

3、效果庫（Effects）

用于提供豐富的動畫效果，讓動畫不再局限于jQuery的animate()方法。包括特效（Effect）?,?顯示（Show）?,?隱藏（Hide）?,?切換（Toggle）?,?添加 Class（Add Class）?,?移除 Class（Remove Class）?,?切換 Class（Toggle Class）?,?轉換 Class（Switch Class）?,?顏色動畫（Color Animation）等。

三、jQuery UI下載

jqueryui官網?：https://jqueryui.com/

中文API文檔：

• https://www.html.cn/jquery-ui-api/
• https://www.runoob.com/jqueryui/jqueryui-tutorial.html

一旦您對 jQuery UI 有了基本了解，您就可以親自嘗試一下。請從 jQuery UI 網站上的?Download Builder（下載生成器）?頁面下載 jQuery UI 的副本。

四、jQuery UI 使用

一旦您下載了 jQuery UI，您將得到一個 zip 壓縮包，包含下列文件：

• /css/
• /development-bundle/
• /js/
• index.html

在文本編輯器中打開?index.html，您將看到引用了一些外部文件：主題、jQuery 和 jQuery UI。通常情況下，您需要在頁面中引用這三個文件，以便使用 jQuery UI 的窗體小部件和交互部件：

<link  href="css/themename/jquery-ui.custom.css"   />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.custom.min.js"></script>

一旦您引用了這些必要的文件，您就能向您的頁面添加一些 jQuery 小部件。比如，要制作一個日期選擇器（datepicker）小部件，您需要向頁面添加一個文本輸入框，然后再調用?.datepicker()，如下所示：

HTML:

<input type="text" name="date" id="date" />

JavaScript:

$( "#date" ).datepicker();