一、jQuery UI簡介

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

jQuery UI包含了許多維持狀態(tài)的小部件（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 rel="stylesheet" href="css/themename/jquery-ui.custom.css" rel="external nofollow"  />
<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();

到此這篇關于jQuery UI組件的文章就介紹到這了。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論