- jQuery UI 教程
- jQuery UI - 首頁
- jQuery UI - 概述
- jQuery UI - 環境設定
- jQuery UI 互動
- jQuery UI - 可拖動元素
- jQuery UI - 可放置元素
- jQuery UI - 可調整大小元素
- jQuery UI - 可選擇元素
- jQuery UI - 可排序元素
- jQuery UI 小部件
- jQuery UI - 手風琴
- jQuery UI - 自動完成
- jQuery UI - 按鈕
- jQuery UI - 日期選擇器
- jQuery UI - 對話方塊
- jQuery UI - 選單
- jQuery UI - 進度條
- jQuery UI - 滑塊
- jQuery UI - 微調器
- jQuery UI - 標籤頁
- jQuery UI - 工具提示
- jQuery UI 效果
- jQuery UI - 新增類
- jQuery UI - 顏色動畫
- jQuery UI - 效果
- jQuery UI - 隱藏
- jQuery UI - 移除類
- jQuery UI - 顯示
- jQuery UI - 切換類
- jQuery UI - 切換
- jQuery UI - 切換類
- jQuery UI 工具
- jQuery UI - 定位
- jQuery UI - 小部件工廠
- jQuery UI 有用資源
- jQuery UI 快速指南
- jQuery UI - 有用資源
- jQuery UI - 討論
jQuery UI 快速指南
jQuery UI - 概述
jQuery UI 是一個強大的基於 jQuery JavaScript 庫構建的 JavaScript 庫。UI 代表使用者介面，它是一組 jQuery 外掛，為 jQuery 核心庫添加了新功能。
jQuery UI 的外掛集包括基於 jQuery JavaScript 庫構建的介面互動、效果、動畫、小部件和主題。
它於 2007 年 9 月釋出，由 John Resig 在 jquery.com 上的部落格文章中宣佈。最新版本 1.10.4 需要 jQuery 1.6 或更高版本。jQuery UI 是一個免費的開源軟體，根據 MIT 許可證授權。
功能
jQuery UI 分為四組：互動、小部件、效果和工具。這些將在後續章節中詳細討論。庫的結構如下圖所示：
互動 - 這些是互動式外掛，例如拖動、放置、調整大小等，它們使使用者能夠與 DOM 元素互動。
小部件 - 使用 jQuery 外掛（即小部件），您可以建立使用者介面元素，例如手風琴、日期選擇器等。
效果 - 這些是基於內部 jQuery 效果構建的。它們包含針對 DOM 元素的完整套件自定義動畫和過渡。
工具 - 這些是 jQuery UI 庫內部使用的一組模組化工具。
jQuery UI 的優勢
以下是 jQuery UI 的一些優勢：
- 一致且連貫的 API。
- 全面的瀏覽器支援。
- 開源且免費使用。
- 良好的文件。
- 強大的主題機制。
- 穩定且易於維護。
jQuery UI - 環境設定
本章將討論 jQuery UI 庫的下載和設定。我們還將簡要研究目錄結構及其內容。jQuery UI 庫可以在您的網頁中透過兩種方式使用：
從其官方網站下載 UI 庫
當您開啟連結 http://jqueryui.com/ 時，您將看到三個下載 jQuery UI 庫的選項：
自定義下載 - 點選此按鈕下載自定義版本的庫。
穩定版 - 點選此按鈕獲取穩定且最新的 jQuery UI 庫版本。
舊版本 - 點選此按鈕獲取 jQuery UI 庫之前的主要版本。
使用下載構建器進行自定義下載
使用下載構建器，您可以建立一個自定義構建，只包含您需要的庫部分。您可以下載此新的自定義版本的 jQuery UI，具體取決於選擇的主題。您將看到以下螢幕（同一頁面分為兩張圖片）：
當您只需要 jQuery UI 庫的特定外掛或功能時，這很有用。此版本的目錄結構如下圖所示：
未壓縮的檔案位於 development-bundle 目錄中。未壓縮的檔案最適合在開發或除錯期間使用；壓縮檔案節省頻寬並提高生產環境中的效能。
穩定版下載
點選“穩定版”按鈕，可以直接連結到包含 jQuery UI 庫最新版本原始碼、示例和文件的 ZIP 檔案。將 ZIP 檔案內容解壓縮到 jqueryui 目錄。
此版本包含所有檔案，包括所有依賴項、大量演示甚至庫的單元測試套件。此版本有助於入門。
舊版本下載
點選“舊版本”按鈕，可以直接連結到 jQuery UI 庫之前主要版本的 ZIP 檔案。此版本還包含所有檔案，包括所有依賴項、大量演示甚至庫的單元測試套件。此版本有助於入門。
從 CDN 下載 UI 庫
CDN 或內容分發網路是一個旨在向用戶提供檔案的伺服器網路。如果您在網頁中使用 CDN 連結，它會將託管檔案的責任從您自己的伺服器轉移到一系列外部伺服器。這還有一個好處，如果您的網頁訪問者已經從同一個 CDN 下載了 jQuery UI 的副本，則無需重新下載。
jQuery 基金會、Google 和 Microsoft 都提供託管 jQuery 核心和 jQuery UI 的 CDN。
由於 CDN 不需要您託管您自己的 jQuery 和 jQuery UI 版本，因此它非常適合演示和實驗。
在本教程中，我們使用的是庫的 CDN 版本。
示例
現在讓我們使用 jQuery UI 編寫一個簡單的示例。讓我們建立一個 HTML 檔案，並將以下內容複製到 <head> 標籤中：
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"> <script src = "https://code.jquery.com/jquery-1.10.2.js"></script> <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
上述程式碼的細節：
第一行透過 CSS 新增 jQuery UI 主題（在本例中為 ui-lightness）。此 CSS 將使我們的 UI 更具樣式。
第二行新增 jQuery 庫，因為 jQuery UI 是基於 jQuery 庫構建的。
第三行新增 jQuery UI 庫。這會在您的頁面中啟用 jQuery UI。
現在讓我們向 <head> 標籤新增一些內容：
<script type = "text/javascript">
$(function () {
$('#dialogMsg').dialog();
});
</script>
在 <body> 中新增以下內容：
<body>
<form id = "form1" runat = "server">
<div id = "dialogMsg" title = "First JqueryUI Example">
Hello this is my first JqueryUI example.
</div>
</form>
</body>
完整的 HTML 程式碼如下所示。將其儲存為 myfirstexample.html
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type = "text/javascript">
$(function () {
$('#dialogMsg').dialog();
});
</script>
</head>
<body>
<form id = "form1" runat = "server">
<div id = "dialogMsg" title = "First JqueryUI Example">
Hello this is my first JqueryUI example.
</div>
</form>
</body>
</html>
在您的瀏覽器中開啟上述頁面。它將生成以下螢幕。
jQuery UI - 可拖動元素
jQuery UI 提供 draggable() 方法來使任何 DOM 元素可拖動。一旦元素可拖動，您就可以透過用滑鼠單擊它並將其拖動到視口內的任何位置來移動該元素。
語法
draggable() 方法可以用兩種形式使用：
$(selector, context).draggable (options) 方法
draggable (options) 方法宣告 HTML 元素可以在 HTML 頁面中移動。options 引數是一個物件，它指定所涉及元素的行為。
語法
$(selector, context).draggable(options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).draggable({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | addClasses
如果此選項設定為 false，則會阻止將 ui-draggable 類新增到所選 DOM 元素列表中。預設值為 true。 |
| 2 | appendTo
指定在拖動時應將可拖動輔助元素附加到的元素。預設值為“parent”。 |
| 3 | axis
此選項將拖動限制為水平 (x) 或垂直 (y) 軸。可能的值：“x”、“y”。 |
| 4 | cancel
您可以使用此選項來阻止從指定的元素開始拖動。預設值為“input,textarea, button,select,option”。 |
| 5 | connectToSortable
您可以使用此選項來指定其元素可互換的列表。在放置結束時，該元素是列表的一部分。預設值為“false”。 |
| 6 | containment
將拖動限制在指定元素或區域的邊界內。預設值為“false”。 |
| 7 | cursor
指定元素移動時的游標 CSS 屬性。它表示滑鼠指標的形狀。預設值為“auto”。 |
| 8 | cursorAt
設定拖動輔助元素相對於滑鼠游標的偏移量。座標可以使用一個或兩個鍵的組合作為雜湊給出：{ top, left, right, bottom }。預設值為“false”。 |
| 9 | delay
滑鼠第一次移動被考慮在內的延遲時間（毫秒）。位移可能在此時間之後開始。預設值為“0”。 |
| 10 | disabled
設定為 true 時，停用移動專案的能力。在啟用此功能（使用 draggable("enable") 指令）之前，無法移動專案。預設值為“false”。 |
| 11 | distance
滑鼠必須移動的畫素數，之後位移才會被考慮在內。預設值為“1”。 |
| 12 | grid
將拖動輔助元素吸附到網格上，每 x 和 y 畫素一個網格點。陣列必須為 [x, y] 格式。預設值為“false”。 |
| 13 | handle
如果指定，則限制拖動開始，除非 mousedown 事件發生在指定的元素上。預設值為“false”。 |
| 14 | helper
允許使用輔助元素進行拖動顯示。預設值為“original”。 |
| 15 | iframeFix
防止 iframe 在拖動過程中捕獲 mousemove 事件。預設值為“false”。 |
| 16 | opacity
移動時元素的不透明度。預設值為“false”。 |
| 17 | refreshPositions
如果設定為 true，則每次滑鼠移動都會重新計算所有可放置元素的位置。預設值為“false”。 |
| 18 | revert
指示元素是否在移動結束時返回其原始位置。預設值為“false”。 |
| 19 | revertDuration
元素返回其原始位置之前的位移持續時間（毫秒）（參見 options.revert）。預設值為“500”。 |
| 20 | scope
用於對可拖動和可放置專案的集合進行分組，以及 droppable 的 accept 選項。預設值為“default”。 |
| 21 | scroll
設定為 true（預設值）時，如果專案移動到視窗的可視區域之外，則顯示內容會滾動。預設值為“true”。 |
| 22 | scrollSensitivity
指示滑鼠必須移出視窗多少畫素才能導致顯示內容滾動。預設值為“20”。 |
| 23 | scrollSpeed
指示顯示內容開始滾動後的滾動速度。預設值為“20”。 |
| 24 | snap
調整被移動專案相對於其他元素（被吸附的元素）的顯示位置。預設值為“false”。 |
| 25 | snapMode
指定應該如何在被移動元素和 options.snap 中指示的元素之間進行調整。預設值為“both”。 |
| 26 | snapTolerance
建立調整所需的所需位置差的最大畫素數。預設值為“20”。 |
| 27 | stack
控制與選擇器匹配的元素集的 z-index，始終將當前拖動的專案置於最前面。在視窗管理器等方面非常有用。預設值為“false”。 |
| 28 | zIndex
拖動過程中輔助元素的 z-index。預設值為“false”。 |
以下部分將向您展示一些可工作的拖動功能示例。
預設功能
以下示例演示了一個簡單的可拖動功能示例，它沒有向 draggable() 方法傳遞任何引數。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; background:#eee;}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</head>
<body>
<div id = "draggable" class = "ui-widget-content">
<p>Drag me !!!</p>
</div>
</body>
</html>
讓我們將以上程式碼儲存在一個名為 dragexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它。您還應該看到以下輸出。現在，您可以試用結果了 -
停用、距離和延遲的使用
以下示例演示了在 JqueryUI 的拖動函式中使用三個重要選項 (a) disabled (b) delay 和 (c) distance。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div1" style = "border:solid 1px;background-color:gainsboro;">
<span>You can't move me!</span><br /><br />
</div>
<div id = "div2" style = "border:solid 1px;background-color:grey;">
<span>
Dragging will start only after you drag me for 50px
</span>
<br /><br />
</div>
<div id = "div3" style = "border:solid 1px;background-color:gainsboro;">
<span>
You have to wait for 500ms for dragging to start!
</span>
<br /><br />
</div>
<script>
$("#div1 span").draggable (
{ disabled: true }
);
$("#div2 span").draggable (
{ distance: 50 }
);
$("#div3 span").draggable (
{ delay: 500 }
);
</script>
</body>
</html>
讓我們將以上程式碼儲存在一個名為 dragexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試用結果了 -
限制移動
以下示例演示瞭如何使用 JqueryUI 拖動函式中的 containment 選項來限制螢幕上元素的移動。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div4" style = "border:solid 1px;background-color:gainsboro;">
<span>You can drag me only within this div.</span><br /><br />
</div>
<div id = "div5" style = "border:solid 1px;background-color:grey;">
<span>You can drag me only along x axis.</span><br /><br />
</div>
<script>
$("#div4 span").draggable ({
containment : "#div4"
});
$("#div5 span").draggable ({
axis : "x"
});
</script>
</body>
</html>
讓我們將以上程式碼儲存在一個支援 javascript 的標準瀏覽器中開啟的 HTML 檔案 dragexample.htm 中。它應該產生以下輸出。現在，您可以試用輸出了 -
這裡，<span> 元素被阻止移到 ID 為 div4 的 <div> 元素之外。您還可以使用值為“x”或“y”的 axis 選項來限制垂直或水平移動，這也已在示例中演示。
透過複製移動內容
以下示例演示瞭如何移動所選元素的克隆項。這是使用值為 clone 的 helper 選項完成的。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div6" style = "border:solid 1px;background:#eee; height:50px;">
<span>You can duplicate me....</span>
</div>
<script>
$("#div6 span").draggable ({
helper : "clone"
});
</script>
</body>
</html>
讓我們將以上程式碼儲存在一個支援 javascript 的標準瀏覽器中開啟的 HTML 檔案 dragexample.htm 中，您還應該看到以下輸出 -
如您所見，當第一個元素被拖動時，只有克隆元素移動，而原始專案保持不動。如果您釋放滑鼠，克隆元素將消失，而原始專案仍然在其原始位置。
獲取當前選項值
以下示例演示瞭如何在指令碼執行期間隨時獲取任何選項的值。在這裡，我們將讀取在執行時設定的 cursor 和 cursorAt 選項的值。您可以用類似的方式獲取任何其他可用選項的值。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "divX" style = "border:solid 1px;background:#eee; height:50px;">
<span>Click anywhere on me to see cursor type...</span>
</div>
<script>
/* First make the item draggable */
$("#divX span").draggable();
$("#divX span").bind('click', function( event ) {
var cursor = $( "#divX span" ).draggable( "option", "cursor" );
var cursorAt = $( "#divX span" ).draggable( "option", "cursorAt" );
alert("Cursor type - " + cursor + ", cursorAt - " + cursorAt);
});
</script>
</body>
</html>
讓我們將以上程式碼儲存在一個支援 javascript 的標準瀏覽器中開啟的 HTML 檔案 dragexample.htm 中，您還應該看到以下輸出 -
$ (selector, context).draggable("action", [params]) 方法
draggable(action, params) 方法可以在可移動元素上執行操作，例如防止位移。action 在第一個引數中指定為字串，並且根據給定的操作，可以選擇提供一個或多個params。
基本上，這裡的操作只不過是以字串形式使用的 jQuery 方法。
語法
$(selector, context).draggable ("action", [params]);
下表列出了此方法的操作 -
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy()
完全移除拖動功能。元素不再可移動。這會將元素返回到其初始化前的狀態。 |
| 2 | disable()
停用拖動功能。在下次呼叫 draggable("enable") 方法之前，無法移動元素。 |
| 3 | enable()
重新啟用拖動管理。元素可以再次移動。 |
| 4 | option(optionName)
獲取當前與指定的 optionName 關聯的值。其中 optionName 是要獲取的選項的名稱，型別為 String。 |
| 5 | option()
獲取一個物件，其中包含表示當前可拖動選項雜湊的鍵/值對。 |
| 6 | option(optionName, value)
設定與指定的 optionName 關聯的可拖動選項的 value。其中 optionName 是要設定的選項的名稱，value 是要為選項設定的值。 |
| 7 | option(options)
為可拖動元素設定一個或多個選項。其中 options 是要設定的選項-值對對映。 |
| 8 | widget()
返回一個包含可拖動元素的 jQuery 物件。 |
示例
現在讓我們看看一個使用上表中操作的示例。以下示例演示了 disable 和 enable 操作的使用。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div7" style = "border:solid 1px;background-color:gainsboro;">
<span>You can't move me. Dragging is disabled.</span><br><br>
</div>
<div id = "div8" style = "border:solid 1px;background-color:grey;">
<span>You can move me. Dragging is enabled.</span><br><br>
</div>
<script>
$("#div7 span").draggable ();
$("#div7 span").draggable ('disable');
$("#div8 span").draggable ();
$("#div8 span").draggable ('enable');
</script>
</body>
</html>
讓我們將以上程式碼儲存在一個支援 javascript 的標準瀏覽器中開啟的 HTML 檔案 dragexample.htm 中，您應該看到以下輸出 -
如您所見，第一個元素被停用，第二個元素的拖動功能已啟用，您可以嘗試拖動它。
移動元素上的事件管理
除了我們在前面部分看到的 draggable(options) 方法外，JqueryUI 還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面 -
| 序號 | 事件方法和描述 |
|---|---|
| 1 | create(event, ui)
建立可拖動元素時觸發。其中 event 型別為 Event，ui 型別為 Object。 |
| 2 | drag(event, ui)
拖動過程中滑鼠移動時觸發。其中 event 型別為 Event，ui 型別為 Object，例如 helper、position、offset。 |
| 3 | start(event, ui)
拖動開始時觸發。其中 event 型別為 Event，ui 型別為 Object，例如 helper、position、offset。 |
| 4 | stop(event, ui)
拖動停止時觸發。其中 event 型別為 Event，ui 型別為 Object，例如 helper、position、offset。 |
示例
以下示例演示了在拖動功能期間使用事件方法。此示例演示了 drag 事件的使用。
<!DOCTYPE html>
<html>
<head>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<div id = "div9" style = "border:solid 1px;background-color:gainsboro;">
<span>Drag me to check the event method firing</span><br /><br />
</div>
<script>
$("#div9 span").draggable ({
cursor: "move",
axis : "x",
drag: function( event, ui ) {
alert("hi..");
}
});
</script>
</body>
</html>
讓我們將以上程式碼儲存在一個支援 javascript 的標準瀏覽器中開啟的 HTML 檔案 dragexample.htm 中，您應該看到以下輸出 -
現在嘗試拖動書寫的內容，您將看到觸發了拖動事件的 start，這將導致顯示一個對話方塊，游標將更改為移動圖示，文字將僅在 X 軸上移動。
jQuery UI - 可放置元素
jQueryUI 提供 droppable() 方法，用於使任何 DOM 元素在指定的目標（可拖動元素的目標）處可放置。
語法
droppable() 方法可以用兩種形式使用 -
$ (selector, context).droppable(options) 方法
droppable(options) 方法宣告一個 HTML 元素可以用作可以將其他元素拖放到其中的元素。options 引數是一個物件，用於指定所涉及元素的行為。
語法
$(selector, context).droppable (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).droppable({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | accept
當您需要控制哪些可拖動元素可以被接受用於放置時，可以使用此選項。其預設值為 *。
|
| 2 | activeClass
此選項是一個字串，表示一個或多個 CSS 類，當被接受的元素（options.accept 中指示的元素之一）正在被拖動時，將新增到可放置元素。其預設值為 false。 |
| 3 | addClasses
此選項設定為 false 時，將阻止將 ui-droppable 類新增到可放置元素。其預設值為 true。 |
| 4 | disabled
如果將此選項設定為true，則停用可放置元素。預設值為false。 |
| 5 | greedy（貪婪模式）
當需要控制哪些可拖動元素可以放置到巢狀的可放置元素中時，使用此選項。預設值為false。如果將此選項設定為true，則任何父可放置元素都不會接收該元素。 |
| 6 | hoverClass（懸停類）
此選項是一個String，表示一個或多個 CSS 類，當被接受的元素（在options.accept中指示的元素）移動到可放置元素中時，將新增到可放置元素。預設值為false。 |
| 7 | scope
此選項用於將可拖動元素的可放置操作限制為僅具有相同options.scope（在可拖動元素 (options) 中定義）的專案。預設值為"default"。 |
| 8 | tolerance（容差）
此選項是一個String，用於指定用於測試可拖動元素是否懸停在可放置元素上的模式。預設值為"intersect"。 |
以下部分將向您展示一些可拖放功能的實際示例。
預設功能
以下示例演示了可拖放功能的簡單示例，未向droppable()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-1 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-1 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-1" ).draggable();
$( "#droppable-1" ).droppable();
});
</script>
</head>
<body>
<div id = "draggable-1" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-1" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為dropexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以試用結果：
addClass、disabled 和 tolerance 的使用
以下示例演示了在 JqueryUI 的 drop 函式中使用三個選項(a) addClass (b) disabled和(c) tolerance。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-2 {
width: 100px; height: 50px; padding: 0.5em;
margin: 0px 5px 10px 0;
}
#droppable-2,#droppable-3, #droppable-4,#droppable-5 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-2" ).draggable();
$( "#droppable-2" ).droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable-3" ).droppable({
disabled : "true",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#droppable-4" ).droppable({
tolerance: 'touch',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped with a touch!" );
}
});
$( "#droppable-5" ).droppable({
tolerance: 'fit',
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped only when fully fit on the me!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-2" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-2" class = "ui-widget-header">
<p>Drop here</p>
</div>
<div id = "droppable-3" class = "ui-widget-header">
<p>I'm disabled, you can't drop here!</p>
</div>
<div id = "droppable-4" class = "ui-widget-header">
<p>Tolerance Touch!</p>
</div>
<div id = "droppable-5" class = "ui-widget-header">
<p>Tolerance Fit!</p>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為dropexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以試用結果：
現在將元素拖放到“Tolerance Touch！”框上（只需接觸此框的邊緣）並檢視目標元素的變化。現在要將元素拖放到“Tolerance Fit！”目標上，可拖動元素必須完全與目標元素即“Tolerance Fit！”目標重疊。
選擇要拖放的元素
以下示例演示了在 JqueryUI 的拖動函式中使用選項accept和scope。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.wrap {
display: table-row-group;
}
#japanpeople,#indiapeople, #javatutorial,#springtutorial {
width: 120px; height: 70px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
}
#japan,#india,#java,#spring {
width: 140px; height: 100px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#japanpeople" ).draggable();
$( "#indiapeople" ).draggable();
$( "#japan" ).droppable({
accept: "#japanpeople",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#india" ).droppable({
accept: "#indiapeople",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#javatutorial" ).draggable({scope : "java"});
$( "#springtutorial" ).draggable({scope : "spring"});
$( "#java" ).droppable({
scope: "java",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$( "#spring" ).droppable({
scope: "spring",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div class = "wrap" >
<div id = "japanpeople" class = "ui-widget-content">
<p>People to be dropped to Japan</p>
</div>
<div id = "indiapeople" class = "ui-widget-content">
<p>People to be dropped to India</p>
</div>
<div id = "japan" class = "ui-widget-header">
<p>Japan</p>
</div>
<div id = "india" class = "ui-widget-header">
<p>India</p>
</div>
</div>
<hr/>
<div class = "wrap" >
<div id = "javatutorial" class = "ui-widget-content">
<p>People who want to learn Java</p>
</div>
<div id = "springtutorial" class = "ui-widget-content">
<p>People who want to learn Spring</p>
</div>
<div id = "java" class = "ui-widget-header">
<p>Java</p>
</div>
<div id = "spring" class = "ui-widget-header">
<p>Spring</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為dropexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該會看到以下輸出。現在您可以試用輸出：
在這裡您可以看到，您只能將元素“來自日本的人”拖放到“日本”目標上，將元素“來自印度的人”拖放到“印度”目標上。“想要學習 Java 的人”的範圍設定為“Java”目標，“想要學習 Spring 的人”的範圍設定為“Spring”目標。
管理外觀
以下示例演示了 JqueryUI 類的選項activeClass和hoverClass的使用，它們有助於我們管理外觀。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type = "text/css">
#draggable-3 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 21px 5px 10px 0;
}
#droppable-6 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
.active {
border-color : blue;
background : grey;
}
.hover {
border-color : red;
background : green;
}
</style>
<script>
$(function() {
$( "#draggable-3" ).draggable();
$( "#droppable-6" ).droppable({
activeClass: "active",
hoverClass: "hover",
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-3" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-6" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為dropexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該會看到以下輸出：
您可以注意到，當拖動或懸停（在目標上）“將我拖到我的目標”元素時，會改變目標元素“放在這裡”的顏色。
$ (selector, context).droppable ("action", params) 方法
droppable ("action", params) 方法可以在可放置元素上執行操作，例如阻止可放置功能。操作在第一個引數中指定為字串（例如，“disable”以阻止放置）。請查看下錶中可以傳遞的操作。
語法
$(selector, context).droppable ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作完全銷燬元素的可放置功能。元素將恢復到其初始化前的狀態。 |
| 2 | disable（停用）
此操作停用可放置操作。元素不再是可放置元素。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作重新啟用可放置操作。元素可以再次接收可放置元素。此方法不接受任何引數。 |
| 4 | option（選項）
此操作獲取一個包含鍵/值對的物件，這些鍵/值對錶示當前可放置選項雜湊。此方法不接受任何引數。 |
| 5 | option( optionName )
此操作獲取當前與指定的optionName關聯的可放置元素的值。這需要一個字串值作為引數。 |
| 6 | option( optionName, value )
此操作設定與指定的optionName關聯的可放置選項的值。 |
| 7 | option( options )
此操作為可放置元素設定一個或多個選項。引數options是要設定的選項-值對的對映。 |
| 8 | widget（元件）
此操作返回一個包含可放置元素的 jQuery 物件。此方法不接受任何引數。 |
示例
現在讓我們看一個使用上表中操作的示例。以下示例演示了destroy()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.draggable-4 {
width: 90px; height: 50px; padding: 0.5em; float: left;
margin: 0px 5px 10px 0;
border: 1px solid red;
background-color:#B9CD6D;
}
.droppable-7 {
width: 100px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
border: 1px solid black;
background-color:#A39480;
}
.droppable.active {
background-color: red;
}
</style>
<script>
$(function() {
$('.draggable-4').draggable({ revert: true });
$('.droppable-7').droppable({
hoverClass: 'active',
drop: function(e, ui) {
$(this).html(ui.draggable.remove().html());
$(this).droppable('destroy');
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "i'm destroyed!" );
}
});
});
</script>
</head>
<body>
<div class = "draggable-4"><p>drag 1</p></div>
<div class = "draggable-4"><p>drag 2</p></div>
<div class = "draggable-4"><p>drag 3</p></div>
<div style = "clear: both;padding:10px"></div>
<div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
<div class = "droppable-7">drop here</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為dropexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該會看到以下輸出：
如果您將“drag1”拖放到任何名為“放在這裡”的元素上，您會注意到此元素被放置，並且此操作會完全銷燬元素的可放置功能。您無法再次將“drag2”和“drag3”拖放到此元素上。
可放置元素上的事件管理
除了我們在前面幾節中看到的 droppable (options) 方法外，JqueryUI 還提供在特定事件觸發時觸發的事件方法。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | activate(event, ui)
當被接受的可拖動元素開始拖動時，將觸發此事件。如果您想在可放置元素可被拖放到時使其“亮起”，這將非常有用。 |
| 2 | create(event, ui)
建立可放置元素時會觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 3 | deactivate(event, ui)
當被接受的可拖動元素停止拖動時，將觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 4 | drop(event, ui)
當元素被拖放到可放置元素上時，將觸發此操作。這基於tolerance選項。其中event的型別為Event，ui的型別為Object。 |
| 5 | out(event, ui)
當被接受的可拖動元素從可放置元素中拖出時，將觸發此事件。這基於tolerance選項。其中event的型別為Event，ui的型別為Object。 |
| 6 | over(event, ui)
當被接受的可拖動元素被拖到可放置元素上時，將觸發此事件。這基於tolerance選項。其中event的型別為Event，ui的型別為Object。 |
示例
以下示例演示了在拖放功能期間事件方法的使用。此示例演示了事件drop、over和out的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Droppable - Default functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#draggable-5 {
width: 100px; height: 50px; padding: 0.5em; float: left;
margin: 22px 5px 10px 0;
}
#droppable-8 {
width: 120px; height: 90px;padding: 0.5em; float: left;
margin: 10px;
}
</style>
<script>
$(function() {
$( "#draggable-5" ).draggable();
$("#droppable-8").droppable({
drop: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
},
over: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "moving in!" );
},
out: function (event, ui) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "moving out!" );
}
});
});
</script>
</head>
<body>
<div id = "draggable-5" class = "ui-widget-content">
<p>Drag me to my target</p>
</div>
<div id = "droppable-8" class = "ui-widget-header">
<p>Drop here</p>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為dropexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該會看到以下輸出：
在這裡，您將注意到當您拖動元素時，可放置元素中的訊息是如何變化的。
jQuery UI - 可調整大小元素
jQueryUI 提供 resizable() 方法來調整任何 DOM 元素的大小。此方法簡化了元素的大小調整，否則在 HTML 中需要花費時間和大量編碼才能實現。
語法
resizable() 方法可以使用兩種形式：
$ (selector, context).resizable (options) 方法
resizable (options) 方法宣告可以調整 HTML 元素的大小。options 引數是一個物件，用於指定調整大小過程中所涉及元素的行為。
語法
$(selector, context).resizable (options);
您可以一次提供一個或多個選項來使用 Javascript 物件。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).resizable({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | alsoResize（也調整大小）
此選項的型別為Selector、jQuery或任何 DOM Element。它表示在調整原始物件大小時也調整大小的元素。預設值為false。 |
| 2 | animate
將此選項設定為true用於在釋放滑鼠按鈕時啟用調整大小過程中的視覺效果。預設值為false（無效果）。 |
| 3 | animateDuration
此選項用於設定調整大小效果的持續時間（以毫秒為單位）。僅當animate選項為true時才使用此選項。預設值為“slow”。 |
| 4 | animateEasing
此選項用於指定使用animate選項時要應用的緩動效果。預設值為“swing”。 |
| 5 | aspectRatio
此選項用於指示是否保持專案的縱橫比（高度和寬度）。預設值為false。 |
| 6 | autoHide
此選項用於隱藏放大圖示或控制代碼，除非滑鼠懸停在專案上。預設值為false。 |
| 7 | cancel
此選項用於阻止對指定元素進行大小調整。預設值為input,textarea,button,select,option。 |
| 8 | containment
此選項用於限制在指定元素或區域內元素的大小調整。預設值為false。 |
| 9 | delay
此選項用於設定容差或延遲（以毫秒為單位）。此後將開始調整大小或位移。預設值為0。 |
| 10 | disabled
如果設定為true，此選項將停用調整大小機制。滑鼠將不再調整元素大小，直到使用 resizable（“enable”）啟用機制為止。預設值為false。 |
| 11 | distance
使用此選項，只有當滑鼠移動一定距離（畫素）時，調整大小才會開始。預設值為1畫素。這有助於防止點選元素時意外調整大小。 |
| 12 | ghost
如果設定為true，此選項將顯示一個半透明的輔助元素用於調整大小。釋放滑鼠時，此 ghost 元素將被刪除。預設值為false。 |
| 13 | grid
此選項的型別為陣列 [x, y]，指示元素在滑鼠移動過程中水平和垂直擴充套件的畫素數。預設值為false。 |
| 14 | handles
此選項是一個字元字串，指示元素的哪些邊或角可以調整大小。預設值為e, s, se。 |
| 15 | helper
此選項用於新增 CSS 類以設定要調整大小的元素的樣式。當元素大小調整時，會建立一個新的<div>元素，該元素是縮放的（ui-resizable-helper 類）。調整大小完成後，原始元素的大小將被調整，<div>元素將消失。預設值為false。 |
| 16 | maxHeight
此選項用於設定可調整大小元素允許調整到的最大高度。預設值為null。 |
| 17 | maxWidth
此選項用於設定可調整大小元素允許調整到的最大寬度。預設值為null。 |
| 18 | minHeight
此選項用於設定可調整大小元素允許調整到的最小高度。預設值為10。 |
| 19 | minWidth
此選項用於設定可調整大小元素允許調整到的最小寬度。預設值為10。 |
以下部分將向您展示一些調整大小功能的工作示例。
預設功能
以下示例演示了調整大小功能的簡單示例，沒有向resizable()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable { width: 150px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable" class = "ui-widget-content">
<h3 class = "ui-widget-header">Pull my edges to resize me!!</h3>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了−
拖動正方形邊框以調整大小。
使用 animate 和 ghost
以下示例演示了在 JqueryUI 的調整大小函式中使用animate和ghost這兩個選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-2,#resizable-3 {
width: 150px; height: 150px; padding: 0.5em;
text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-2" ).resizable({
animate: true
});
$( "#resizable-3" ).resizable({
ghost: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-2" class = "ui-widget-content">
<h3 class = "ui-widget-header">
Pull my edges and Check the animation!!
</h3>
</div><br>
<div id = "resizable-3" class = "ui-widget-content">
<h3 class = "ui-widget-header">I'm ghost!!</h3>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該會看到以下輸出。現在，您可以使用結果了−
拖動正方形邊框以調整大小，並檢視 animate 和 ghost 選項的效果。
使用 containment、minHeight 和 minWidth
以下示例演示了在 JqueryUI 的調整大小函式中使用containment、minHeight和minWidth這三個選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#container-1 { width: 300px; height: 300px; }
#resizable-4 {background-position: top left;
width: 150px; height: 150px; }
#resizable-4, #container { padding: 0.5em; }
</style>
<script>
$(function() {
$( "#resizable-4" ).resizable({
containment: "#container",
minHeight: 70,
minWidth: 100
});
});
</script>
</head>
<body>
<div id = "container" class = "ui-widget-content">
<div id = "resizable-4" class = "ui-state-active">
<h3 class = "ui-widget-header">
Resize contained to this container
</h3>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了−
拖動正方形邊框以調整大小，您不能調整超過主容器的大小。
使用 delay、distance 和 autoHide
以下示例演示了在 JqueryUI 的調整大小函式中使用delay、distance和autoHide這三個選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.square {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 20px;
-right: 20px;
}
</style>
<script>
$(function() {
$( "#resizable-5" ).resizable({
delay: 1000
});
$( "#resizable-6" ).resizable({
distance: 40
});
$( "#resizable-7" ).resizable({
autoHide: true
});
});
</script>
</head>
<body>
<div id = "resizable-5" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Resize starts after delay of 1000ms
</h3>
</div><br>
<div id = "resizable-6" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Resize starts at distance of 40px
</h3>
</div><br>
<div id = "resizable-7" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Hover over me to see the magnification icon!
</h3>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了−
拖動正方形邊框以調整大小，您可以注意到−
第一個正方形框會在延遲 1000ms 後調整大小，
第二個正方形框在滑鼠移動 40px 後開始調整大小。
將滑鼠懸停在第三個正方形框上，放大圖示將出現。
使用 alsoResize
以下示例演示了在 JqueryUI 的調整大小函式中使用alsoResize選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-8,#resizable-9{ width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-8" ).resizable({
alsoResize: "#resizable-9"
});
$( "#resizable-9" ).resizable();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-8" class = "ui-widget-content">
<h3 class = "ui-widget-header">Resize!!</h3>
</div><br>
<div id = "resizable-9" class = "ui-widget-content">
<h3 class = "ui-widget-header">I also get resized!!</h3>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了−
拖動正方形邊框以調整大小，您可以注意到第二個正方形框也會隨著第一個正方形框一起調整大小。
使用 AspectRatio 和 Grid
以下示例演示了在 JqueryUI 的調整大小函式中使用aspectRatio和grid選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.square {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
float: left;
margin-left: 20px;
margin-right: 20px;
}
</style>
<script>
$(function() {
$( "#resizable-10" ).resizable({
aspectRatio: 10 / 3
});
$( "#resizable-11" ).resizable({
grid: [50,20]
});
});
</script>
</head>
<body>
<div id = "resizable-10" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Resize with aspectRatio of 10/3
</h3>
</div>
<div id = "resizable-11" class = "square ui-widget-content">
<h3 class = "ui-widget-header">
Snap me to the grid of [50,20]
</h3>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了−
拖動正方形邊框以調整大小，第一個正方形框將以 10/3 的縱橫比調整大小，第二個正方形框將以 [50,20] 的網格調整大小。
$(selector, context).resizable("action", params) 方法
resizable("action", params) 方法可以在可調整大小的元素上執行操作，例如允許或阻止調整大小功能。操作在第一個引數中指定為字串（例如，"disable" 用於阻止調整大小）。查看下錶中可以傳遞的操作。
語法
$(selector, context).resizable ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作將完全銷燬元素的可調整大小功能。這會將元素恢復到其初始化前的狀態。 |
| 2 | disable（停用）
此操作將停用元素的可調整大小功能。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作將啟用元素的可調整大小功能。此方法不接受任何引數。 |
| 4 | option( optionName )
此操作檢索指定optionName的值。此選項對應於與 resizable (options) 一起使用的選項之一。 |
| 5 | option()
獲取包含表示當前可調整大小選項雜湊的鍵值對的物件。此方法不接受任何引數。 |
| 6 | option(optionName, value)
此操作設定具有指定optionName的可調整大小選項的值。此選項對應於與 resizable (options) 一起使用的選項之一。 |
| 7 | option( options )
此操作設定可調整大小的一個或多個選項。 |
| 8 | widget()
此操作返回包含可調整大小元素的jQuery物件。此方法不接受任何引數。 |
示例
現在讓我們來看一個使用上表中操作的示例。以下示例演示了destroy()和disable()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-12,#resizable-13 { width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-12" ).resizable();
$( "#resizable-12" ).resizable('disable');
$( "#resizable-13" ).resizable();
$( "#resizable-13" ).resizable('destroy');
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-12" class = "ui-widget-content">
<h3 class = "ui-widget-header">I'm disable!!</h3>
</div><br>
<div id = "resizable-13" class = "ui-widget-content">
<h3 class = "ui-widget-header">I'm Destroyed!!</h3>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出−
您無法調整第一個正方形框的大小，因為它已停用，第二個正方形框已被銷燬。
可調整大小元素上的事件管理
除了我們在前面部分看到的 resizable (options) 方法之外，JqueryUI 還提供在特定事件觸發時觸發的事件方法。這些事件方法列在下面−
| 序號 | 事件方法和描述 |
|---|---|
| 1 | create(event, ui)
當建立可調整大小的元素時，將觸發此事件。 |
| 2 | resize(event, ui)
當拖動可調整大小元素的控制代碼時，將觸發此事件。 |
| 3 | start(event, ui)
在調整大小操作開始時觸發此事件。 |
| 4 | stop(event, ui)
在調整大小操作結束時觸發此事件。 |
示例
以下示例演示了調整大小功能期間的事件方法用法。此示例演示了create和resize事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Resizable functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
#resizable-14{ width: 150px; height: 150px;
padding: 0.5em;text-align: center; margin: 0; }
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#resizable-14" ).resizable({
create: function( event, ui ) {
$("#resizable-15").text ("I'm Created!!");
},
resize: function (event, ui) {
$("#resizable-16").text ("top = " + ui.position.top +
", left = " + ui.position.left +
", width = " + ui.size.width +
", height = " + ui.size.height);
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "resizable-14" class = "ui-widget-content">
<h3 class = "ui-widget-header">Resize !!</h3>
</div><br>
<span id = "resizable-15"></span><br>
<span id = "resizable-16"></span>
</body>
</html>
讓我們將上述程式碼儲存在名為resizeexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出−
拖動正方形框，您將看到輸出在調整大小事件中顯示。
jQuery UI - 可選擇元素
jQueryUI 提供 selectable() 方法來單獨或成組地選擇 DOM 元素。使用此方法，可以透過使用滑鼠在元素上拖動框（有時稱為套索）來選擇元素。此外，還可以透過在按住 Ctrl/Meta 鍵的同時單擊或拖動來選擇元素，從而允許進行多個（非連續）選擇。
語法
selectable() 方法可以兩種形式使用 −
$(selector, context).selectable(options) 方法
selectable(options) 方法宣告 HTML 元素包含可選專案。options引數是一個物件，用於指定選擇時所涉及元素的行為。
語法
$(selector, context).selectable (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).selectable({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | appendTo
此選項指定選擇輔助工具（套索）應附加到的元素。預設值為body。 |
| 2 | autoRefresh
如果將此選項設定為true，則在選擇操作開始時計算每個可選專案的 位置和大小。預設值為true。 |
| 3 | cancel
如果您開始選擇元素，此選項將禁止選擇。預設值為input,textarea,button,select,option。 |
| 4 | delay
此選項用於設定時間（以毫秒為單位），並定義何時應開始選擇。這可以用來防止意外選擇。預設值為0。 |
| 5 | disabled
如果將此選項設定為 true，則停用選擇機制。使用者無法選擇元素，直到使用 selectable（“enable”）指令恢復機制為止。預設值為false。 |
| 6 | distance
此選項是滑鼠必須移動的距離（以畫素為單位），才能認為選擇正在進行中。例如，這對於防止簡單的點選被解釋為組選擇非常有用。預設值為0。 |
| 7 | filter
此選項是一個選擇器，指示哪些元素可以成為選擇的一部分。預設值為*。 |
| 8 | tolerance（容差）
此選項指定用於測試選擇輔助工具（套索）是否應選擇專案的方法。預設值為touch。 |
以下部分將向您展示一些 selectable 功能的工作示例。
預設功能
以下示例演示了 selectable 功能的一個簡單示例，未向selectable()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI selectable-1</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-1 .ui-selecting { background: #707070 ; }
#selectable-1 .ui-selected { background: #EEEEEE; color: #000000; }
#selectable-1 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-1 li { margin: 3px; padding: 0.4em;
font-size: 16px; height: 18px; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#selectable-1" ).selectable();
});
</script>
</head>
<body>
<ol id = "selectable-1">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
讓我們將上述程式碼儲存在一個名為selectableexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了 −
嘗試點選產品，使用CTRLS鍵選擇多個產品。
延遲和距離的使用
以下示例演示了在 JqueryUI 的 selectable 函式中使用兩個選項delay和distance。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Selectable</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-2 .ui-selecting,#selectable-3 .ui-selecting {
background: #707070 ; }
#selectable-2 .ui-selected,#selectable-3 .ui-selected {
background: #EEEEEE; color: #000000; }
#selectable-2,#selectable-3 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-2 li,#selectable-3 li { margin: 3px; padding: 0.4em;
font-size: 16px; height: 18px; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#selectable-2" ).selectable({
delay : 1000
});
$( "#selectable-3" ).selectable({
distance : 100
});
});
</script>
</head>
<body>
<h3>Starts after delay of 1000ms</h3>
<ol id = "selectable-2">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
</ol>
<h3>Starts after mouse moves distance of 100px</h3>
<ol id = "selectable-3">
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
讓我們將上述程式碼儲存在一個名為selectableexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了 −
嘗試點選產品，使用 CTRL 鍵選擇多個產品。您會注意到，產品 1、產品 2 和產品 3 的選擇會在延遲 1000 毫秒後開始。產品 4、產品 5、產品 6 和產品 7 無法單獨選擇。只有當滑鼠移動了 100 畫素的距離後，選擇才會開始。
過濾器的使用
以下示例演示了在 JqueryUI 的 selectable 函式中使用兩個選項delay和distance。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI selectable-4</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-4 .ui-selecting { background: #707070 ; }
#selectable-4 .ui-selected { background: #EEEEEE; color: #000000; }
#selectable-4 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-4 li { margin: 3px; padding: 0.4em;
font-size: 16px; height: 18px; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#selectable-4" ).selectable({
filter : "li:first-child"
});
});
</script>
</head>
<body>
<ol id = "selectable-4">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
讓我們將上述程式碼儲存在一個名為selectableexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果了 −
嘗試點選產品。您會注意到只能選擇第一個產品。
$(selector, context).selectable("action", params) 方法
selectable("action", params) 方法可以在可選元素上執行操作，例如阻止 selectable 功能。操作在第一個引數中指定為字串（例如，"disable" 用於停止選擇）。在下表中檢視可以傳遞的操作。
語法
$(selector, context).selectable ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作將完全刪除元素的可選擇功能。元素將恢復到其初始化前的狀態。 |
| 2 | disable（停用）
此操作停用元素的可選擇功能。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作啟用元素的可選擇功能。此方法不接受任何引數。 |
| 4 | option( optionName )
此操作獲取當前與指定的optionName關聯的值。 |
| 5 | option()
此操作獲取一個物件，其中包含表示當前 selectable 選項雜湊的鍵值對。 |
| 6 | option( optionName, value )
此操作設定與指定的optionName關聯的 selectable 選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。 |
| 7 | option( options )
此操作為 selectable 設定一個或多個選項。引數options是要設定的選項值對的對映。 |
| 8 | refresh
此操作導致重新整理可選元素的大小和位置。主要在停用（設定為false）autoRefresh選項時使用。此方法不接受任何引數。 |
| 9 | widget（元件）
此操作返回包含可選元素的 jQuery 物件。此方法不接受任何引數。 |
示例
現在讓我們來看一個使用上表中操作的示例。以下示例演示了disable()和option(optionName, value)方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Selectable</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-5 .ui-selecting,#selectable-6 .ui-selecting {
background: #707070 ; }
#selectable-5 .ui-selected,#selectable-6 .ui-selected {
background: #EEEEEE; color: #000000; }
#selectable-5,#selectable-6 {
list-style-type: none; margin: 0; padding: 0; width: 20%; }
#selectable-5 li,#selectable-6 li {
margin: 3px; padding: 0.4em; font-size: 16px; height: 18px; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#selectable-5" ).selectable();
$( "#selectable-5" ).selectable('disable');
$( "#selectable-6" ).selectable();
$( "#selectable-6" ).selectable( "option", "distance", 1 );
});
</script>
</head>
<body>
<h3>Disabled using disable() method</h3>
<ol id = "selectable-5">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
</ol>
<h3>Select using method option( optionName, value )</h3>
<ol id = "selectable-6">
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
</body>
</html>
讓我們將上述程式碼儲存在一個名為selectableexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出 −
嘗試點選產品，使用 CTRL 鍵選擇多個產品。您會注意到產品 1、產品 2 和產品 3 被停用了。滑鼠移動 1 畫素的距離後，產品 4、產品 5、產品 6 和產品 7 的選擇才會開始。
可選元素上的事件管理
除了我們在前面幾節中看到的 selectable (options) 方法外，JqueryUI 還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面 −
| 序號 | 事件方法和描述 |
|---|---|
| 1 | create(event, ui)
當建立 selectable 元素時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 2 | selected(event, ui)
對於每個被選中的元素，都會觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 3 | selecting(event, ui)
對於每個即將被選中的可選元素，都會觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 4 | start(event, ui)
在選擇操作開始時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 5 | stop(event, ui)
在選擇操作結束時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 6 | unselected(event, ui)
在選擇操作結束時，對於每個被取消選擇的元素，都會觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 7 | unselecting(event, ui)
在選擇操作期間，對於每個即將被取消選中的選中元素，都會觸發此事件。其中event的型別為Event，ui的型別為Object。 |
示例
以下示例演示了 selectable 功能期間的事件方法用法。此示例演示了事件selected的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI selectable-7</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#selectable-7 .ui-selecting { background: #707070 ; }
#selectable-7 .ui-selected { background: #EEEEEE; color: #000000; }
#selectable-7 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#selectable-7 li { margin: 3px; padding: 0.4em;
font-size: 16px; height: 18px; }
.ui-widget-content {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
<script>
$(function() {
$( "#selectable-7" ).selectable({
selected: function() {
var result = $( "#result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable-7 li" ).index( this );
result.append( " #" + ( index + 1 ) );
});
}
});
});
</script>
</head>
<body>
<h3>Events</h3>
<ol id = "selectable-7">
<li class = "ui-widget-content">Product 1</li>
<li class = "ui-widget-content">Product 2</li>
<li class = "ui-widget-content">Product 3</li>
<li class = "ui-widget-content">Product 4</li>
<li class = "ui-widget-content">Product 5</li>
<li class = "ui-widget-content">Product 6</li>
<li class = "ui-widget-content">Product 7</li>
</ol>
<span class = "resultarea">Selected Product</span>>
<span id = result class = "resultarea"></span>
</body>
</html>
讓我們將上述程式碼儲存在一個名為selectableexample.htm的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出 −
嘗試點選產品，使用 CTRL 鍵選擇多個產品。您會注意到，所選產品編號會列印在底部。
jQuery UI - 可排序元素
jQueryUI 提供sortable()方法，可以使用滑鼠重新排列列表或網格中的元素。此方法根據作為第一個引數傳遞的操作字串執行可排序操作。
語法
sortable()方法可以用兩種形式使用 −
$(selector, context).sortable(options) 方法
sortable(options) 方法宣告 HTML 元素包含可互換的元素。options引數是一個物件，它指定了重新排序期間所涉及元素的行為。
語法
$(selector, context).sortable(options);
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | appendTo
此選項指定在移動/拖動期間使用options.helper建立的新元素將插入到的元素。預設值為parent。 |
| 2 | axis
此選項指示移動軸（“x”為水平，“y”為垂直）。預設值為false。 |
| 3 | cancel
此選項用於透過點選任何選擇器元素來防止元素排序。預設值為"input,textarea,button,select,option"。 |
| 4 | connectWith
此選項是一個選擇器，它標識另一個可排序元素，該元素可以接受來自此可排序元素的專案。這允許將專案從一個列表移動到其他列表，這是一種常用且有用的使用者互動。如果省略，則不會連線其他元素。這是一個單向關係。預設值為false。 |
| 5 | containment
此選項指示發生位移的元素。該元素將由選擇器（僅考慮列表中的第一個專案）、DOM 元素或字串“parent”（父元素）或“window”（HTML 頁面）表示。 |
| 6 | cursor
指定元素移動時的游標 CSS 屬性。它表示滑鼠指標的形狀。預設值為“auto”。 |
| 7 | cursorAt
設定拖動輔助元素相對於滑鼠游標的偏移量。座標可以使用一個或兩個鍵的組合作為雜湊給出：{ top, left, right, bottom }。預設值為“false”。 |
| 8 | delay
滑鼠第一次移動被考慮在內的延遲時間（毫秒）。位移可能在此時間之後開始。預設值為“0”。 |
| 9 | disabled
如果此選項設定為 true，則停用可排序功能。預設值為 false。 |
| 10 | distance
滑鼠必須移動的畫素數，之後排序才會開始。如果指定，則在滑鼠拖動超出距離之前，排序不會開始。預設值為“1”。 |
| 11 | dropOnEmpty
如果此選項設定為 false，則無法將此可排序項中的專案放到空的連線可排序項中。預設值為 true。 |
| 12 | forceHelperSize
如果此選項設定為 true，則強制輔助元素具有大小。預設值為 false。 |
| 13 | forcePlaceholderSize
此選項設定為 true 時，在移動專案時會考慮佔位符的大小。只有在初始化 options.placeholder 時，此選項才有用。預設值為 false。 |
| 14 | grid
此選項是一個數組 [x, y]，指示滑鼠位移期間排序元素在水平和垂直方向上移動的畫素數。預設值為 false。 |
| 15 | handle
如果指定，則除非在指定的元素上發生 mousedown 事件，否則限制排序開始。預設值為 false。 |
| 16 | helper
允許使用輔助元素進行拖動顯示。預設值為 original。 |
| 17 | items
此選項指定要排序的 DOM 元素內的哪些專案。預設值為 > *。 |
| 18 | opacity
此選項用於定義排序時輔助元素的不透明度。預設值為 false。 |
| 19 | placeholder
此選項用於應用於其他空白區域的類名。預設值為 false。 |
| 20 | revert
此選項決定可排序專案是否應使用平滑動畫恢復到其新位置。預設值為 false。 |
| 21 | scroll
此選項用於啟用滾動。如果設定為 true，則在到達邊緣時頁面會滾動。預設值為 true。 |
| 22 | scrollSensitivity
此選項指示滑鼠必須離開可見區域多少畫素才能導致滾動。預設值為 20。此選項僅在 options.scroll 設定為 true 時使用。 |
| 23 | scrollSpeed
此選項指示滾動開始後顯示器的滾動速度。預設值為 20。 |
| 24 | tolerance（容差）
此選項是一個 字串，用於指定用於測試正在移動的專案是否懸停在另一個專案上的模式。預設值為 "intersect"。 |
| 25 | zIndex
此選項表示排序時元素/輔助元素的 z-index。預設值為 1000。 |
以下部分將向您展示一些可工作的拖動功能示例。
預設功能
以下示例演示了可排序功能的簡單示例，未向 sortable() 方法傳遞任何引數。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-1 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-1 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-1" ).sortable();
});
</script>
</head>
<body>
<ul id = "sortable-1">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
<li class = "default">Product 5</li>
<li class = "default">Product 6</li>
<li class = "default">Product 7</li>
</ul>
</body>
</html>
讓我們將以上程式碼儲存在名為 sortexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：
重新排列上面的產品，使用滑鼠拖動專案。
延遲和距離選項的使用
以下示例演示了 JqueryUI sort 函式中三個選項 (a) delay 和 (b) distance 的用法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-2, #sortable-3 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-2 li, #sortable-3 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-2" ).sortable({
delay:500
});
$( "#sortable-3" ).sortable({
distance:30
});
});
</script>
</head>
<body>
<h3>Delay by 500ms</h3>
<ul id = "sortable-2">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
</ul>
<h3>Distance Delay by 30px</h3>
<ul id = "sortable-3">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
</ul>
</body>
</html>
讓我們將以上程式碼儲存在名為 sortexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：
重新排列上面的產品，使用滑鼠拖動專案。為了防止意外排序（透過延遲（時間）或距離），我們設定了元素需要拖動多少毫秒才能開始排序（使用 delay 選項）。我們還設定了元素需要拖動多少畫素才能開始排序（使用 distance 選項）。
佔位符的使用
以下示例演示了 JqueryUI sort 函式中三個選項 placeholder 的用法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-4 { list-style-type: none; margin: 0;
padding: 0; width: 25%; }
#sortable-4 li { margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.highlight {
border: 1px solid red;
font-weight: bold;
font-size: 45px;
background-color: #333333;
}
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-4" ).sortable({
placeholder: "highlight"
});
});
</script>
</head>
<body>
<ul id = "sortable-4">
<li class = "default">Product 1</li>
<li class = "default">Product 2</li>
<li class = "default">Product 3</li>
<li class = "default">Product 4</li>
<li class = "default">Product 5</li>
<li class = "default">Product 6</li>
<li class = "default">Product 7</li>
</ul>
</body>
</html>
讓我們將以上程式碼儲存在名為 sortexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：
嘗試拖動專案以重新排列它們，當您拖動專案時，佔位符（我們使用 highlight 類來設定此空間的樣式）將顯示在可用位置。
connectWith 和 dropOnEmpty 選項的使用
以下示例演示了 JqueryUI sort 函式中三個選項 (a) connectWith 和 (b) dropOnEmpty 的用法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-5, #sortable-6,#sortable-7 {
list-style-type: none; margin: 0; padding: 0;
width: 20%;float:left }
#sortable-5 li, #sortable-6 li,#sortable-7 li {
margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$( "#sortable-5, #sortable-6" ).sortable({
connectWith: "#sortable-5, #sortable-6"
});
$( "#sortable-7").sortable({
connectWith: "#sortable-5",
dropOnEmpty: false
});
});
</script>
</head>
<body>
<ul id = "sortable-5"><h3>List 1</h3>
<li class = "default">A</li>
<li class = "default">B</li>
<li class = "default">C</li>
<li class = "default">D</li>
</ul>
<ul id = "sortable-6"><h3>List 2</h3>
<li class = "default">a</li>
<li class = "default">b</li>
<li class = "default">c</li>
<li class = "default">d</li>
</ul>
<ul id = "sortable-7"><h3>List 3</h3>
<li class = "default">e</li>
<li class = "default">f</li>
<li class = "default">g</li>
<li class = "default">h</li>
</ul>
</body>
</html>
讓我們將以上程式碼儲存在名為 sortexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：
透過將選擇器傳遞到 connectWith 選項，將專案從 List1 排序到另一個 (List2) 並反之亦然。這是透過使用 CSS 類對所有相關列表進行分組，然後將該類傳遞到可排序函式（即，connectWith: '#sortable-5, #sortable-6'）來完成的。
嘗試將 List 3 下的專案拖動到 List 2 或 List 1。由於我們將 dropOnEmpty 選項設定為 false，因此無法放下這些專案。
$(selector, context).sortable("action", [params]) 方法
sortable(action, params) 方法可以在可排序元素上執行操作，例如防止位移。action 在第一個引數中指定為字串，並且可以根據給定的 action 可選地提供一個或多個 params。
基本上，這裡的 action 只是我們可以以字串形式使用的 jQuery 方法。
語法
$(selector, context).sortable ("action", [params]);
下表列出了此方法的操作 -
| 序號 | 操作和描述 |
|---|---|
| 1 | cancel()
此操作取消當前排序操作。這在 sort receive 和 sort stop 事件的處理程式中最有用。此方法不接受任何引數。 |
| 2 | destroy()
此操作完全刪除可排序功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 3 | disable()
此操作停用包裝集中任何可排序元素的可排序性。元素的可排序性不會被刪除，並且可以透過呼叫此方法的 enable 變體來恢復。此方法不接受任何引數。 |
| 4 | enable()
重新啟用包裝集中任何可排序性已被停用的可排序元素的可排序性。請注意，此方法不會向任何不可排序的元素新增可排序性。此方法不接受任何引數。 |
| 5 | option( optionName )
此操作獲取當前與指定的 optionName 關聯的值。其中 optionName 是要獲取的選項的名稱。 |
| 6 | option()
獲取包含表示當前可排序選項雜湊的鍵/值對的物件。此方法不接受任何引數。 |
| 7 | option( optionName, value )
此操作設定與指定的 optionName 關聯的可排序選項的值。其中 optionName 是要設定的選項的名稱，而 value 是要為選項設定的值。 |
| 8 | option( options )
為可排序設定一個或多個選項。其中 options 是要設定的選項-值對的對映。 |
| 9 | refresh()
此操作根據需要重新整理專案列表。此方法不接受任何引數。呼叫此方法將導致新增到可排序中的新專案被識別。 |
| 10 | toArray( options )
此方法返回按排序順序排列的可排序元素的 id 值陣列。此方法將 Options 作為引數，以自定義序列化或排序順序。 |
| 11 | serialize( options )
此方法返回從可排序項生成的序列化查詢字串（可透過 Ajax 提交）。 |
| 12 | refreshPositions()
此方法主要用於內部重新整理可排序項的快取資訊。此方法不接受任何引數。 |
| 13 | widget()
此方法返回包含可排序元素的 jQuery 物件。此方法不接受任何引數。 |
示例
現在讓我們看一個使用上表中操作的示例。以下示例演示了 toArray( options ) 方法的用法。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-8{ list-style-type: none; margin: 0;
padding: 0; width: 25%; float:left;}
#sortable-8 li{ margin: 0 3px 3px 3px; padding: 0.4em;
padding-left: 1.5em; font-size: 17px; height: 16px; }
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
</style>
<script>
$(function() {
$('#sortable-8').sortable({
update: function(event, ui) {
var productOrder = $(this).sortable('toArray').toString();
$("#sortable-9").text (productOrder);
}
});
});
</script>
</head>
<body>
<ul id = "sortable-8">
<li id = "1" class = "default">Product 1</li>
<li id = "2" class = "default">Product 2</li>
<li id = "3" class = "default">Product 3</li>
<li id = "4" class = "default">Product 4</li>
</ul>
<br>
<h3><span id = "sortable-9"></span></h3>
</body>
</html>
讓我們將以上程式碼儲存在名為 sortexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：
嘗試排序專案，專案的順序顯示在底部。在這裡，我們呼叫 $(this).sortable('toArray').toString()，這將給出所有專案 id 的字串列表，它可能看起來像 1,2,3,4。
可排序元素上的事件管理
除了我們在前面幾節中看到的 sortable(options) 方法之外，JqueryUI 還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | activate(event, ui)
當連線的可排序項上開始排序操作時，此事件將在可排序項上觸發。 |
| 2 | beforeStop(event, ui)
當排序操作即將結束時，此事件將被觸發，輔助元素和佔位符元素引用仍然有效。 |
| 3 | change(event, ui)
此事件在已排序元素在DOM中更改位置時觸發。 |
| 4 | create(event, ui)
此事件在建立可排序元素時觸發。 |
| 5 | deactivate(event, ui)
此事件在連線排序停止時觸發，並傳播到連線的可排序元素。 |
| 6 | out(event, ui)
此事件在排序項從連線列表中移出時觸發。 |
| 7 | over(event, ui)
此事件在排序項移動到連線列表中時觸發。 |
| 8 | receive(event, ui)
此事件在連線列表從另一個列表接收排序項時觸發。 |
| 9 | remove(event, ui)
此事件在排序項從連線列表中移除並拖動到另一個列表時觸發。 |
| 10 | sort(event, ui)
此事件在排序操作期間針對滑鼠移動事件重複觸發。 |
| 11 | start(event, ui)
此事件在排序操作開始時觸發。 |
| 12 | stop(event, ui)
此事件在排序操作結束後觸發。 |
| 13 | update(event, ui)
此事件在排序操作停止且專案位置已更改時觸發。 |
示例
以下示例演示了在拖放功能期間事件方法的使用。此示例演示了receive、start和stop事件的使用。
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Sortable - Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#sortable-10, #sortable-11 { list-style-type: none;
margin: 0; padding: 0; width: 80%; }
#sortable-10 li, #sortable-11 li { margin: 0 3px 3px 3px;
padding: 0.4em; padding-left: 1.5em;
font-size: 17px; height: 16px; }
.highlight {
border: 1px solid #000000;
font-weight: bold;
font-size: 45px;
background-color: #cedc98;
}
.default {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
}
.wrap {
display: table-row-group;
}
.wrap1 {
float:left;
width: 100px;
}
</style>
<script>
$(function() {
$( "#sortable-10" ).sortable({
start: function (event, ui) {
$("span#result").html ($("span#result").html ()
+ "<b>start</b><br>");
},
receive : function (event, ui) {
$("span#result").html ($("span#result").html ()
+ ", receive");
},
stop: function (event, ui) {
$("span#result").html ($("span#result").html ()
+ "<b>stop</b><br>");
}
});
$( "#sortable-11" ).sortable({
connectWith : "#sortable-10, #sortable-11"
});
});
</script>
</head>
<body>
<div class = "wrap">
<div class = "wrap1">
<h3>List 1</h3>
<ul id = "sortable-10">
<li class = "default">A</li>
<li class = "default">B</li>
<li class = "default">C</li>
<li class = "default">D</li>
</ul>
</div>
<div class = "wrap1">
<h3>List 2</h3>
<ul id = "sortable-11">
<li class = "default">a</li>
<li class = "default">b</li>
<li class = "default">c</li>
<li class = "default">d</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>
讓我們將以上程式碼儲存在名為 sortexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您應該會看到以下輸出。現在，您可以使用結果：
嘗試對列表1中的專案進行排序，您將看到在事件的start和stop處顯示的訊息。現在將專案從列表2拖放到列表1，在receive事件上也會顯示訊息。
jQuery UI - 手風琴
jQueryUI中的手風琴小部件是一個基於jQuery的可擴充套件和可摺疊內容容器，它被分成多個部分，可能看起來像選項卡。jQueryUI提供accordion()方法來實現此功能。
語法
accordion() 方法可以用兩種形式使用：
$(selector, context).accordion (options) 方法
accordion (options) 方法宣告應將HTML元素及其內容視為手風琴選單並進行管理。options引數是一個物件，用於指定所涉及選單的外觀和行為。
語法
$(selector, context).accordion (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).accordion({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | active
指示頁面首次訪問時開啟的選單的索引。預設值為0，即第一個選單。 |
| 2 | animate
此選項用於設定如何為更改面板設定動畫。預設值為{}。 |
| 3 | collapsible
此選項設定為true時，允許使用者透過單擊選單將其關閉。預設情況下，單擊開啟的面板標題沒有任何效果。預設值為false。 |
| 4 | disabled
此選項設定為true時，將停用手風琴。預設值為false。 |
| 5 | event
此選項指定用於選擇手風琴標題的事件。預設值為click。 |
| 6 | header
此選項指定一個選擇器或元素，以覆蓋用於標識標題元素的預設模式。預設值為> li > :first-child,> :not(li):even。 |
| 7 | heightStyle
此選項用於控制手風琴和麵板的高度。預設值為auto。 |
| 8 | icons
此選項是一個物件，用於定義用於開啟和關閉面板的標題文字左側的圖示。用於關閉面板的圖示指定為名為header的屬性，而用於打開面板的圖示指定為名為headerSelected的屬性。預設值為{ "header": "ui-icon-triangle-1-e", "activeHeader": "ui-icon-triangle-1-s" }。 |
以下部分將向您展示一些手風琴小部件功能的工作示例。
預設功能
以下示例演示了手風琴小部件功能的一個簡單示例，未向accordion()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-1" ).accordion();
});
</script>
<style>
#accordion-1{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-1">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為accordionexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
單擊標題（選項卡1、選項卡2、選項卡3）以展開/摺疊分成邏輯部分的內容，就像選項卡一樣。
collapsible 的使用
以下示例演示了在JqueryUI的手風琴小部件中使用三個選項collapsible。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-2" ).accordion({
collapsible: true
});
});
</script>
<style>
#accordion-2{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-2">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為accordionexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
在這裡，我們將collapsible設定為true。單擊手風琴標題，這允許摺疊活動部分。
heightStyle 的使用
以下示例演示了在JqueryUI的手風琴小部件中使用三個選項heightStyle。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-3" ).accordion({
heightStyle: "content"
});
$( "#accordion-4" ).accordion({
heightStyle: "fill"
});
});
</script>
<style>
#accordion-3, #accordion-4{font-size: 14px;}
</style>
</head>
<body>
<h3>Height style-content</h3>
<div style = "height:250px">
<div id = "accordion-3">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
</div>
</div>
</div><br><br>
<h3>Height style-Fill</h3>
<div style = "height:250px">
<div id = "accordion-4">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
<li>List item five</li>
</ul>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
</div>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為accordionexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
這裡我們有兩個手風琴，第一個手風琴的heightStyle選項設定為content，這允許手風琴面板保持其原生高度。第二個手風琴的heightStyle選項設定為fill，指令碼將自動將手風琴的尺寸設定為其父容器的高度。
$(selector, context).accordion ("action", params) 方法
accordion ("action", params) 方法可以在手風琴元素上執行操作，例如選擇/取消選擇手風琴選單。操作在第一個引數中指定為字串（例如，“disable”停用所有選單）。在下表中檢視可以傳遞的操作。
語法
$(selector, context).accordion ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作將完全銷燬元素的手風琴功能。元素將恢復到其初始化前的狀態。 |
| 2 | disable（停用）
此操作停用所有選單。不會考慮任何點選。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作重新啟用所有選單。點選再次被考慮。此方法不接受任何引數。 |
| 4 | option( optionName )
此操作獲取當前與指定的optionName關聯的手風琴元素的值。這需要一個字串值作為引數。 |
| 5 | option（選項）
此操作獲取一個物件，其中包含表示當前手風琴選項雜湊的鍵/值對。 |
| 6 | option( optionName, value )
此操作設定與指定的optionName關聯的手風琴選項的值。 |
| 7 | option( options )
此操作設定手風琴的一個或多個選項。 |
| 8 | refresh
此操作處理直接在DOM中新增或刪除的任何標題和麵板。然後重新計算手風琴面板的高度。結果取決於內容和heightStyle選項。此方法不接受任何引數。 |
| 9 | widget（元件）
此操作返回手風琴小部件元素；即標註有ui-accordion類名稱的元素。 |
示例
現在讓我們看看一個使用上表中操作的示例。以下示例演示了option( optionName, value )方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-5" ).accordion({
disabled: false
});
$("input").each(function () {
$(this).change(function () {
if ($(this).attr("id") == "disableaccordion") {
$("#accordion-5").accordion("option", "disabled", true);
} else {
$("#accordion-5").accordion("option", "disabled", false);
}
});
});
});
</script>
<style>
#accordion-5{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-5">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<div style = "margin-top:30px">
<input type = "radio" name = "disable" id = "disableaccordion"
value = "disable">Disable accordion
<input type = "radio" name = "disable" id = "enableaccordion" checked
value = "enable">Enable accordion
</div>
</body>
</html>
讓我們將上述程式碼儲存在名為accordionexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：
在這裡，我們演示了手風琴的啟用和停用。選擇相應的單選按鈕以檢查每個操作。
手風琴元素上的事件管理
除了我們在上一節中看到的手風琴（選項）方法外，JqueryUI還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | activate(event, ui)
此事件在選單被啟用時觸發。此事件僅在面板啟用時觸發，在建立手風琴小部件時不會為初始面板觸發。 |
| 2 | beforeActivate(event, ui)
此事件在面板啟用之前觸發。可以取消此事件以阻止面板啟用。 |
| 3 | create(event, ui)
手風琴建立時觸發此事件。 |
示例
以下示例演示了手風琴小部件中的事件方法用法。此示例演示了create、beforeActive和active事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Accordion Example </title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion-6" ).accordion({
create: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>Created</b><br>");
},
beforeActivate : function (event, ui) {
$("span#result").html ($("span#result").html () +
", <b>beforeActivate</b><br>");
},
activate: function (event, ui) {
$("span#result").html ($("span#result").html () +
"<b>activate</b><br>");
}
});
});
</script>
<style>
#accordion-6{font-size: 14px;}
</style>
</head>
<body>
<div id = "accordion-6">
<h3>Tab 1</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 2</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
</div>
<h3>Tab 3</h3>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
<hr />
<span id = result></span>
</body>
</html>
讓我們將上述程式碼儲存在名為accordionexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：
在這裡，我們根據事件在底部顯示文字。
jQuery UI - 自動完成
自動完成是現代網站中常用的一種機制，它可以為使用者提供其在文字框中鍵入的單詞開頭的建議列表。然後，使用者可以選擇列表中的一個專案，該專案將顯示在輸入欄位中。此功能可防止使用者必須輸入整個單詞或一組單詞。
JQueryUI 提供了一個自動完成小部件——一個控制元件，其功能非常類似於`
語法
autocomplete() 方法有兩種使用方法：
$(selector, context).autocomplete (options) 方法
autocomplete (options) 方法宣告必須將 HTML <input> 元素管理為輸入欄位，該欄位將在建議列表上方顯示。options 引數是一個物件，用於指定使用者在輸入欄位中鍵入內容時建議列表的行為。
語法
$(selector, context).autocomplete (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).autocomplete({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | appendTo
此選項用於將元素附加到選單。預設值為null。 |
| 2 | autoFocus
如果此選項設定為true，則顯示選單時將自動聚焦選單的第一個專案。預設值為false。 |
| 3 | delay
此選項是一個整數，表示在嘗試獲取匹配值（如source選項指定）之前要等待的毫秒數。當透過非本地資料獲取資料時，這有助於減少抖動，因為這可以讓使用者有時間輸入更多字元，然後再啟動搜尋。預設值為300。 |
| 4 | disabled
如果指定此選項並設定為true，則自動完成小部件最初將被停用。預設值為false。 |
| 5 | minLength
必須輸入的字元數，然後才能嘗試獲取匹配值（如source選項指定）。這可以防止在幾個字元不足以將集合縮減到合理級別時，呈現過大的值集。預設值為1。 |
| 6 | position
此選項標識建議選單相對於關聯輸入元素的位置。of選項預設為輸入元素，但您可以指定另一個元素來進行定位。預設值為{ my: "left top", at: "left bottom", collision: "none" }。 |
| 7 | source
此選項指定獲取與輸入資料匹配的資料的方式。必須提供值，否則不會建立自動完成小部件。預設值為無；必須指定。 |
以下部分將向您展示一些自動完成小部件功能的實際示例。
預設功能
以下示例演示了自動完成小部件功能的簡單示例，未向autocomplete()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
];
$( "#automplete-1" ).autocomplete({
source: availableTutorials
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type "a" or "s"</p>
<label for = "automplete-1">Tags: </label>
<input id = "automplete-1">
</div>
</body>
</html>
讓我們將以上程式碼儲存在名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試用結果：
autoFocus 的使用
以下示例演示了在 JqueryUI 的自動完成小部件中使用autoFocus選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
];
$( "#automplete-2" ).autocomplete({
source: availableTutorials,
autoFocus:true
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type "a" or "s"</p>
<label for = "automplete-2">Tags: </label>
<input id = "automplete-2">
</div>
</body>
</html>
讓我們將以上程式碼儲存在名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以試用結果：
minLength 和 delay 的使用
以下示例演示了在 JqueryUI 的自動完成小部件中使用minLength和delay這兩個選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
"Ecommerce",
"Jquery",
"Groovy",
"Java",
"JavaScript",
"Lua",
"Perl",
"Ruby",
"Scala",
"Swing",
"XHTML"
];
$( "#automplete-3" ).autocomplete({
minLength:2,
delay:500,
source: availableTutorials
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type two letter for e.g:ja,sc etc</p>
<label for = "automplete-3">Tags: </label>
<input id = "automplete-3">
</div>
</body>
</html>
讓我們將以上程式碼儲存在名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以試用結果：
Label 的使用
以下示例演示了在 JqueryUI 的自動完成小部件中使用label選項。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#autocomplete-4" ).autocomplete({
source: [
{ label: "India", value: "IND" },
{ label: "Australia", value: "AUS" }
]
});
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type I OR A</p>
<input id = "autocomplete-4">
</div>
</body>
</html>
讓我們將以上程式碼儲存在名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以試用結果：
外部資源的使用
以下示例演示了在 JqueryUI 的自動完成小部件中為source選項使用外部檔案。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#autocomplete-5" ).autocomplete({
source: "/jqueryui/search.php",
minLength: 2
});
});
</script>
</head>
<body>
<input id = "autocomplete-5">
</body>
</html>
檔案search.php與上述檔案 (autocompleteexample.html) 位於同一位置。search.php 的內容如下：
<?
$term = $_GET[ "term" ];
$companies = array(
array( "label" => "JAVA", "value" => "1" ),
array( "label" => "DATA IMAGE PROCESSING", "value" => "2" ),
array( "label" => "JAVASCRIPT", "value" => "3" ),
array( "label" => "DATA MANAGEMENT SYSTEM", "value" => "4" ),
array( "label" => "COMPUTER PROGRAMMING", "value" => "5" ),
array( "label" => "SOFTWARE DEVELOPMENT LIFE CYCLE", "value" => "6" ),
array( "label" => "LEARN COMPUTER FUNDAMENTALS", "value" => "7" ),
array( "label" => "IMAGE PROCESSING USING JAVA", "value" => "8" ),
array( "label" => "CLOUD COMPUTING", "value" => "9" ),
array( "label" => "DATA MINING", "value" => "10" ),
array( "label" => "DATA WAREHOUSE", "value" => "11" ),
array( "label" => "E-COMMERCE", "value" => "12" ),
array( "label" => "DBMS", "value" => "13" ),
array( "label" => "HTTP", "value" => "14" )
);
$result = array();
foreach ($companies as $company) {
$companyLabel = $company[ "label" ];
if ( strpos( strtoupper($companyLabel), strtoupper($term) )!== false ) {
array_push( $result, $company );
}
}
echo json_encode( $result );
?>
讓我們將以上程式碼儲存在名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以試用結果：
例如鍵入兩個字母的單詞：ja、sc 等
$(selector, context).autocomplete ("action", params) 方法
autocomplete ("action", params) 方法可以對建議列表執行操作，例如顯示或隱藏。操作在第一個引數中指定為字串（例如，使用“close”隱藏列表）。在下面的表格中檢視可以傳遞的操作。
語法
$(selector, context).autocomplete ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | close
此操作隱藏自動完成選單中的建議列表。此方法不接受任何引數。 |
| 2 | destroy（銷燬）
此操作將刪除自動完成功能。建議列表將被刪除。此方法不接受任何引數。 |
| 3 | disable（停用）
此操作停用自動完成機制。建議列表將不再顯示。此方法不接受任何引數。 |
| 4 | enable（啟用）
此操作重新啟用自動完成機制。建議列表將再次顯示。此方法不接受任何引數。 |
| 5 | option( optionName )
此操作檢索指定引數optionName的值。此選項對應於與autocomplete (options)一起使用的選項之一。 |
| 6 | option（選項）
此操作獲取一個物件，其中包含表示當前自動完成選項雜湊的鍵/值對。 |
| 7 | option( optionName, value )
此操作設定與指定的optionName關聯的自動完成選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。 |
| 8 | option( options )
此操作為自動完成設定一個或多個選項。引數options是要設定的選項-值對的對映。 |
| 9 | search( [value ] )
此操作搜尋字串值和資料來源（在options.source中指定）之間的對應關係。必須在value中達到最小字元數（在options.minLength中指示），否則不會執行搜尋。 |
| 10 | widget（元件）
檢索對應於建議列表的<ul> DOM 元素。這是一個 jQuery 類的物件，允許輕鬆訪問列表而無需使用 jQuery 選擇器。 |
示例
現在讓我們看看一個使用上表中操作的示例。以下示例演示了option( optionName, value )方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Bootstrap",
"C",
"C++",
"Ecommerce",
"Jquery",
"Groovy",
"Java",
"JavaScript",
"Lua",
"Perl",
"Ruby",
"Scala",
"Swing",
"XHTML"
];
$( "#automplete-6" ).autocomplete({
source: availableTutorials
});
$( "#automplete-6" ).autocomplete("option", "position",
{ my : "right-10 top+10", at: "right top" })
});
</script>
</head>
<body>
<!-- HTML -->
<div class = "ui-widget">
<p>Type "a" or "s"</p>
<label for = "automplete-6">Tags: </label>
<input id = "automplete-6">
</div>
</body>
</html>
讓我們將以上程式碼儲存在名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出：
擴充套件點
自動完成小部件可以使用小部件工廠進行擴充套件。擴充套件小部件時，您可以覆蓋或新增到現有方法的行為。下表列出了充當擴充套件點的，具有與上面列出的外掛方法相同的API穩定性的方法 以上。
| 序號 | 方法和描述 |
|---|---|
| 1 | _renderItem( ul, item )
此方法控制小部件選單中每個選項的建立。此方法建立一個新的<li>元素，將其附加到選單並返回它。 |
| 2 | _renderMenu( ul, items )
此方法控制構建小部件的選單。 |
| 3 | _resizeMenu()
此方法控制在顯示選單之前調整選單的大小。選單元素可在this.menu.element中使用。此方法不接受任何引數。 |
自動完成元素上的事件管理
除了我們在前面幾節中看到的 autocomplete (options) 方法之外，JqueryUI 還提供了事件方法，這些方法會在特定事件觸發時觸發。這些事件方法如下所示：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | change(event, ui)
當<input>元素的值基於選擇更改時觸發此事件。觸發時，此事件總是在close事件觸發後發生。 |
| 2 | close(event, ui)
每當自動完成選單關閉時都會觸發此事件。 |
| 3 | create(event, ui)
此事件在建立自動完成時觸發。 |
| 4 | focus(event, ui)
只要選單中的某個選項獲得焦點，就會觸發此事件。除非被取消（例如，返回false），否則焦點值將被設定到<input>元素中。 |
| 5 | open(event, ui)
資料準備完畢且選單即將開啟後觸發此事件。 |
| 6 | response(event, ui)
搜尋完成後，在顯示選單之前觸發此事件。即使由於沒有結果或自動完成功能被停用而不會顯示選單，此事件也會在搜尋完成後始終觸發。 |
| 7 | search(event, ui)
滿足任何delay和minLength條件後，在由source指定的機制啟用之前觸發此事件。如果取消，則搜尋操作將被中止。 |
| 8 | select(event, ui)
從自動完成選單中選擇一個值時觸發此事件。取消此事件將阻止將值設定到<input>元素中（但不會阻止選單關閉）。 |
示例
以下示例演示了自動完成小部件中的事件方法用法。此示例演示了事件focus和select的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Autocomplete functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var projects = [
{
value: "java",
label: "Java",
desc: "write once run anywhere",
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
},
{
value: "Bootstrap",
label: "Twitter Bootstrap",
desc: "popular front end frameworks ",
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<div id = "project-label">Select a project (type "a" for a start):</div>
<input id = "project">
<input type = "hidden" id = "project-id">
<p id = "project-description"></p>
</body>
</html>
讓我們將以上程式碼儲存在一個名為autocompleteexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它。您還應該看到以下輸出：
jQuery UI - 按鈕
jQueryUI提供button()方法，可以將HTML元素（如按鈕、輸入和錨點）轉換為可主題化的按鈕，並自動管理滑鼠移動，所有這些都由jQuery UI透明地管理。
為了對單選按鈕進行分組，Button還提供了一個額外的視窗小部件，稱為Buttonset。Buttonset透過選擇一個容器元素（包含單選按鈕）並呼叫.buttonset()來使用。
語法
button()方法可以以兩種形式使用：
$(selector, context).button (options) 方法
button (options)方法宣告一個HTML元素應被視為按鈕。options引數是一個物件，指定按鈕的行為和外觀。
語法
$(selector, context).button (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).button({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | disabled
如果此選項設定為true，則會停用按鈕。預設值為false。 |
| 2 | icons
此選項指定要在按鈕中顯示一個或兩個圖示：主要圖示在左側，次要圖示在右側。主要圖示由物件的primary屬性標識，次要圖示由secondary屬性標識。預設值為primary: null, secondary: null。 |
| 3 | label
此選項指定要在按鈕上顯示的文字，該文字將覆蓋自然標籤。如果省略，則顯示元素的自然標籤。對於單選按鈕和複選框，自然標籤是與控制元件關聯的<label>元素。預設值為null。 |
| 4 | text
此選項指定是否要在按鈕上顯示文字。如果指定為false，則如果（且僅當）icons選項指定至少一個圖示時，文字將被抑制。預設值為true。 |
預設功能
以下示例演示了按鈕視窗小部件功能的簡單示例，未向button()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-1, #button-2, #button-3, #button-4" ).button();
$( "#button-5" ).buttonset();
});
</script>
</head>
<body>
<button id = "button-1">A button element</button>
<input id = "button-2" type = "submit" value = "A submit button">
<a id = "button-3" href = "">An anchor</a>
<input type = "checkbox" id = "button-4" >
<label for = "button-4">Toggle</label>
<br><br>
<div id = "button-5">
<input type = "checkbox" id = "check1">
<label for = "check1">Left</label>
<input type = "checkbox" id = "check2">
<label for = "check2">Middle</label>
<input type = "checkbox" id = "check3">
<label for = "check3">Right</label>
</div>
</body>
</html>
讓我們將以上程式碼儲存在一個名為buttonexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以使用結果：
此示例演示了可用於按鈕的標記：按鈕元素、提交型別輸入和錨點。
圖示、文字和停用的使用
以下示例演示了在JqueryUI的button函式中使用兩個選項icons、text和disabled。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-6" ).button({
icons: {
primary: "ui-icon-locked"
},
text: false
});
$( "#button-7" ).button({
disabled:true
});
$( "#button-8" ).button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
});
});
</script>
</head>
<body>
<button id = "button-6">
Button with icon only
</button>
<button id = "button-7">
Button Disabled
</button>
<button id = "button-8">
Button with two icons
</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為buttonexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以使用結果：
在這裡您可以看到一個只有圖示的按鈕、一個有兩個圖示的按鈕和一個停用的按鈕。
$(selector, context).button ("action", params) 方法
button ("action", params)方法可以在按鈕上執行操作，例如停用按鈕。操作在第一個引數中指定為字串（例如，"disable"用於停用按鈕）。檢視可以傳遞的操作，如下表所示。
語法
$(selector, context).button ("action", params);
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作完全刪除元素的按鈕功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 2 | disable（停用）
此操作停用元素的按鈕功能。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作啟用元素的按鈕功能。此方法不接受任何引數。 |
| 4 | option( optionName )
此操作檢索在optionName中指定的選項的值。其中optionName是字串。 |
| 5 | option（選項）
此操作檢索一個物件，該物件包含表示當前按鈕選項雜湊的鍵/值對。 |
| 6 | option( optionName, value )
此操作設定與指定的optionName關聯的按鈕選項的值。 |
| 7 | option( options )
此操作為按鈕設定一個或多個選項。其中options是要設定的選項-值對的對映。 |
| 8 | refresh
此操作重新整理按鈕的顯示。當按鈕由程式處理且顯示不一定與內部狀態相對應時，這很有用。此方法不接受任何引數。 |
| 9 | widget（元件）
此操作返回包含按鈕元素的jQuery物件。此方法不接受任何引數。 |
示例
現在讓我們來看一個使用上表中操作的示例。以下示例演示了destroy()和disable()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#button-9" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#button-9" ).button('destroy');
$( "#button-10" ).button({
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#button-10" ).button('disable');
$( "#button-11" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
});
});
</script>
</head>
<body>
<button id = "button-9">
I'm destroyed
</button>
<button id = "button-10">
I'm disabled
</button>
<button id = "button-11">
play
</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為buttonexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出：
按鈕上的事件管理
除了我們在前面幾節中看到的button (options)方法之外，JqueryUI還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | create(event, ui)
此事件在建立按鈕時觸發。其中event的型別為Event，ui的型別為Object。 |
示例
以下示例演示了按鈕視窗小部件功能的事件方法用法。此示例演示了事件create的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Buttons functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
<script>
$(function() {
$( "#button-12" ).button({
create: function() {
$("p#result").html ($("p#result")
.html () + "<b>created</b><br>");
}
});
});
</script>
</head>
<body>
<button id = "button-12">
A button element
</button>
<p class = "resultarea" id = result></p>
</body>
</html>
讓我們將以上程式碼儲存在一個名為buttonexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：
jQuery UI - 日期選擇器
jQueryUI中的日期選擇器允許使用者輕鬆直觀地輸入日期。您可以輕鬆自定義日期格式和語言、限制可選擇日期範圍以及新增按鈕和其他導航選項。
jQueryUI提供datepicker()方法，該方法建立一個日期選擇器，並透過新增新的CSS類來更改頁面上HTML元素的外觀。將包裝集中的<input>、<div>和<span>元素轉換為日期選擇器控制元件。
預設情況下，對於<input>元素，當關聯的文字欄位獲得焦點時，日期選擇器日曆將在一個小覆蓋層中開啟。對於內聯日曆，只需將日期選擇器附加到<div>或<span>元素即可。
語法
datepicker()方法可以以兩種形式使用：
$(selector, context).datepicker (options) 方法
datepicker (options)方法宣告一個<input>元素（或<div>或<span>，取決於您選擇如何顯示日曆）應作為日期選擇器進行管理。options引數是一個物件，指定日期選擇器元素的行為和外觀。語法
$(selector, context).datepicker(options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).datepicker({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | altField
此選項指定一個jQuery選擇器，用於也使用任何日期選擇更新的欄位。可以使用altFormat選項設定此值的格式。這對於將日期值設定到隱藏的輸入元素中以提交到伺服器非常有用，同時向用戶顯示更友好的格式。預設值為""。 |
| 2 | altFormat
指定altField選項時使用此選項。它提供寫入備用元素的值的格式。預設值為""。 |
| 3 | appendText
此選項是一個字串值，放置在<input>元素之後，用於向用戶顯示說明。預設值為""。 |
| 4 | autoSize
如果此選項設定為true，則會調整<input>元素的大小以適應日期選擇器的日期格式（如使用dateFormat選項設定的那樣）。預設值為false。 |
| 5 | beforeShow
此選項是一個回撥函式，在顯示日期選擇器之前立即呼叫，並將<input>元素和日期選擇器例項作為引數傳遞。此函式可以返回一個用於修改日期選擇器的選項雜湊。預設值為""。 |
| 6 | beforeShowDay
此選項是一個回撥函式，它將日期作為引數，在顯示日期選擇器中的每一天之前呼叫，並將日期作為唯一引數傳遞。這可以用於覆蓋日元素的一些預設行為。此函式必須返回一個三元素陣列。預設值為null。 |
| 7 | buttonImage
此選項指定顯示在按鈕上的圖片路徑，該按鈕透過將showOn選項設定為 buttons 或 both 來啟用。如果也提供了buttonText，則按鈕文字將成為按鈕的alt屬性。預設值為""。 |
| 8 | buttonImageOnly
如果此選項設定為true，則表示由 buttonImage 指定的影像將獨立顯示（不在按鈕上）。要顯示影像，仍必須將 showOn 選項設定為 button 或 both 之一。預設值為false。 |
| 9 | buttonText
此選項指定透過將showOn選項設定為button或both之一啟用的按鈕的標題。預設值為"..."。 |
| 10 | calculateWeek
此選項是一個自定義函式，用於計算並返回作為唯一引數傳遞的日期的星期數。預設實現是$.datepicker.iso8601Week()實用程式函式提供的實現。 |
| 11 | changeMonth
如果此選項設定為true，則會顯示一個月份下拉選單，允許使用者直接更改月份，而無需使用箭頭按鈕逐月切換。預設值為false。 |
| 12 | changeYear
如果此選項設定為true，則會顯示一個年份下拉選單，允許使用者直接更改年份，而無需使用箭頭按鈕逐年切換。選項yearRange可用於控制哪些年份可供選擇。預設值為false。 |
| 13 | closeText
此選項指定文字以替換關閉按鈕的預設標題“Done”。當按鈕面板透過showButtonPanel選項顯示時使用。預設值為"Done"。 |
| 14 | constrainInput
如果此選項設定為true（預設值），則對<input>元素的文字輸入將受到當前dateformat選項允許的字元的限制。預設值為true。 |
| 15 | currentText
此選項指定文字以替換當前按鈕的預設標題“Today”。如果按鈕面板透過showButtonPanel選項顯示，則使用此選項。預設值為Today。 |
| 16 | dateFormat
此選項指定要使用的日期格式。預設值為mm/dd/yy。 |
| 17 | dayNames
此選項是一個包含 7 個元素的陣列，提供完整的星期名稱，其中第 0 個元素表示星期日。可用於本地化控制元件。預設值為[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ]。 |
| 18 | dayNamesMin
此選項是一個包含 7 個元素的陣列，提供簡短的星期名稱，其中第 0 個元素表示星期日，用作列標題。可用於本地化控制元件。預設值為[ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]。 |
| 19 | dayNamesShort
此選項指定一個包含 7 個元素的陣列，提供簡短的星期名稱，其中第 0 個元素表示星期日。可用於本地化控制元件。預設值為[ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]。 |
| 20 | defaultDate
此選項設定控制元件的初始日期，如果<input>元素沒有值，則覆蓋今天的預設值。這可以是Date例項、距今天的number天數或指定絕對日期或相對日期的string。預設值為null。 |
| 21 | duration
此選項指定使日期選擇器出現的動畫速度。可以是slow、normal 或 fast之一，也可以是動畫持續時間的毫秒數。預設值為normal。 |
| 22 | firstDay
此選項指定一週中的第一天，並將顯示為最左邊的列。預設值為0。 |
| 23 | gotoCurrent
如果此選項設定為true，則當前日期連結將設定為選定的日期，覆蓋今天的預設值。預設值為false。 |
| 24 | hideIfNoPrevNext
如果此選項設定為true，則當“上個月”和“下個月”連結不可用時（由minDate和maxDate選項的設定確定），則隱藏這些連結（而不是僅僅停用它們）。預設值為false。 |
| 25 | isRTL
如果此選項設定為true，則將本地化指定為從右到左的語言。預設值為false。 |
| 26 | maxDate
此選項設定控制元件的最大可選日期。這可以是 Date 例項、距今天的日期數或指定絕對日期或相對日期的字串。預設值為null。 |
| 27 | minDate
此選項設定控制元件的最小可選日期。這可以是Date例項、距今天的number天數或指定絕對日期或相對日期的string。預設值為null。 |
| 28 | monthNames
此選項是一個包含 12 個元素的陣列，提供完整的月份名稱，其中第 0 個元素表示一月。可用於本地化控制元件。預設值為[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]。 |
| 29 | monthNamesShort
此選項指定一個包含 12 個元素的陣列，提供簡短的月份名稱，其中第 0 個元素表示一月。可用於本地化控制元件。預設值為[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ]。 |
| 30 | navigationAsDateFormat
如果此選項設定為true，則在顯示之前，nextText、prevText和currentText的導航連結將透過$.datepicker.formatDate()函式傳遞。這允許為那些將被相關值替換的選項提供日期格式。預設值為false。 |
| 31 | nextText
此選項指定文字以替換下個月導航連結的預設標題“Next”。ThemeRoller 將此文字替換為圖示。預設值為Next。 |
| 32 | numberOfMonths
此選項指定在日期選擇器中顯示的月份數。預設值為1。 |
| 33 | onChangeMonthYear
此選項是一個回撥函式，當日期選擇器移動到新的月份或年份時呼叫，將選定的年份、月份（基於 1）和日期選擇器例項作為引數傳遞，函式上下文設定為輸入欄位元素。預設值為null。 |
| 34 | onClose
此選項是一個回撥函式，每當關閉日期選擇器時呼叫，將選定的日期作為文字傳遞（如果沒有選擇，則為空字串），以及日期選擇器例項，函式上下文設定為輸入欄位元素。預設值為null。 |
| 35 | onSelect
此選項是一個回撥函式，每當選擇日期時呼叫，將選定的日期作為文字傳遞（如果沒有選擇，則為空字串），以及日期選擇器例項，函式上下文設定為輸入欄位元素。預設值為null。 |
| 36 | prevText
此選項指定文字以替換上個月導航連結的預設標題Prev。（請注意，ThemeRoller 將此文字替換為圖示）。預設值為PrevdefaultDatedayNamesMin。 |
| 37 | selectOtherMonths
如果此選項設定為true，則顯示在顯示月份之前或之後的天數是可選的。除非showOtherMonths選項為 true，否則不會顯示這些天數。預設值為false。 |
| 38 | shortYearCutoff
如果此選項是一個數字，則指定一個介於 0 和 99 之間的值，在此值之前的任何兩位數的年份值都將被認為屬於上個世紀。如果此選項是一個字串，則該值將進行數字轉換，並新增到當前年份。預設值為+10，表示距當前年份的 10 年。 |
| 39 | showAnim
此選項設定用於顯示和隱藏日期選擇器的動畫名稱。如果指定，則必須是show（預設值）、fadeIn、slideDown或任何 jQuery UI 顯示/隱藏動畫之一。預設值為show。 |
| 40 | showButtonPanel
如果此選項設定為true，則會在日期選擇器的底部顯示一個按鈕面板，其中包含“當前”和“關閉”按鈕。這些按鈕的標題可以透過currentText和closeText選項提供。預設值為false。 |
| 41 | showCurrentAtPos
此選項指定包含當前日期的月份在多月份顯示中應放置的位置的基於 0 的索引（從左上角開始）。預設值為0。 |
| 42 | showMonthAfterYear
如果此選項設定為true，則月份和年份的位置在日期選擇器的標題中反轉。預設值為false。 |
| 43 | showOn
此選項指定日期選擇器何時出現。可能的值為focus、button 或 both。預設值為focus。 |
| 44 | showOptions
此選項提供一個雜湊值，在為showAnim選項指定 jQuery UI 動畫時傳遞給動畫。預設值為{}。 |
| 45 | showOtherMonths
如果此選項設定為true，則顯示當前月份第一天和最後一天之前或之後的日期。除非還將selectOtherMonths選項設定為true，否則這些日期不可選擇。預設值為false。 |
| 46 | showWeek
如果此選項設定為true，則星期號將顯示在月份顯示左側的列中。可以使用calculateWeek選項來更改確定此值的方式。預設值為false。 |
| 47 | stepMonths
此選項指定單擊其中一個月份導航控制元件時移動的月份數。預設值為1。 |
| 48 | weekHeader
當showWeek為true時，此選項指定要為星期號列顯示的文字，覆蓋預設值Wk。預設值為Wk。 |
| 49 | yearRange
當changeYear為true時，此選項指定下拉列表中顯示的年份限制，格式為from:to。這些值可以是絕對值或相對值（例如：2005:+2，表示從2005年到兩年後的年份）。可以使用字首c使相對值相對於所選年份而不是當前年份進行偏移（例如：c-2:c+3）。預設值為c-10:c+10。 |
| 50 | yearSuffix
此選項在日期選擇器標題中的年份後顯示附加文字。預設值為""。 |
以下部分將向您展示一些日期選擇器功能的工作示例。
預設功能
以下示例演示了日期選擇器功能的簡單示例，未將任何引數傳遞給datepicker()方法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-1" ).datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-1"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
內聯日期選擇器
以下示例演示了內聯日期選擇器功能的簡單示例。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-2" ).datepicker();
});
</script>
</head>
<body>
<!-- HTML -->
Enter Date: <div id = "datepicker-2"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，我們使用<div>元素來獲取內聯日期選擇器。
appendText、dateFormat、altField和altFormat的使用
以下示例顯示了在JqueryUI的datepicker函式中使用三個重要選項(a) appendText (b) dateFormat (c) altField和(d) altFormat。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-3" ).datepicker({
appendText:"(yy-mm-dd)",
dateFormat:"yy-mm-dd",
altField: "#datepicker-4",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-3"></p>
<p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，您可以看到第一個輸入的日期格式設定為yy-mm-dd。如果您從日期選擇器中選擇某個日期，則相同的日期將反映在第二個輸入欄位中，其日期格式設定為“DD, d MM, yy”。
beforeShowDay的使用
以下示例顯示了在JqueryUI的datepicker函式中使用選項beforeShowDay。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-5" ).datepicker({
beforeShowDay : function (date) {
var dayOfWeek = date.getDay ();
// 0 : Sunday, 1 : Monday, ...
if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
else return [true];
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-5"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，星期日和星期六被停用。
showOn、buttonImage和buttonImageOnly的使用
以下示例顯示了在JqueryUI的datepicker函式中使用三個重要選項(a) showOn (b) buttonImage和(c) buttonImageOnly。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-6" ).datepicker({
showOn:"button",
buttonImage: "/jqueryui/images/calendar-icon.png",
buttonImageOnly: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-6"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，顯示了一個需要單擊才能開啟日期選擇器的圖示。
defaultDate、dayNamesMin和duration的使用
以下示例顯示了在JqueryUI的datepicker函式中使用三個重要選項(a) dayNamesMin (b) dayNamesMin和(c) duration。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-7" ).datepicker({
defaultDate:+9,
dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
duration: "slow"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-7"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，使用dayNamesMin更改了日期名稱。您還可以看到設定了一個預設日期。
prevText、nextText、showOtherMonths和selectOtherMonths的使用
以下示例顯示了在JqueryUI的datepicker函式中使用三個重要選項(a) prevText (b) nextText (c) showOtherMonths和(d) selectOtherMonths。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-8" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: false
});
$( "#datepicker-9" ).datepicker({
prevText:"click for previous months",
nextText:"click for next months",
showOtherMonths:true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
<p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，前後連結具有標題。如果您單擊該元素，則日期選擇器將開啟。現在，在第一個日期選擇器中，其他月份的日期被停用，因為selectOtherMonths設定為false。在第二個輸入型別的第二個日期選擇器中，selectOtherMonths設定為true。
changeMonth、changeYear和numberOfMonths的使用
以下示例顯示了在JqueryUI的datepicker函式中使用三個重要選項(a) changeMonth (b) changeYear和(c) numberOfMonths。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-10" ).datepicker({
changeMonth:true,
changeYear:true,
numberOfMonths:[2,2]
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-10"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，您可以看到月份和年份欄位的下拉選單。我們以[2,2]的陣列結構顯示4個月。
showWeek、yearSuffix和showAnim的使用
以下示例顯示了在JqueryUI的datepicker函式中使用三個重要選項(a) showWeek (b) yearSuffix和(c) showAnim。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-11" ).datepicker({
showWeek:true,
yearSuffix:"-CE",
showAnim: "slide"
});
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-11"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了−
在上面的示例中，您可以看到星期號顯示在日期選擇器的左側，因為showWeek設定為true。年份字尾為“-CE”。
$ (selector, context).datepicker ("action", [params]) 方法
datepicker (action, params) 方法可以在日曆上執行操作，例如選擇新日期。action在第一個引數中指定為字串，並且根據給定的操作，可以選擇提供一個或多個params。
基本上，這裡的 action 只是我們可以以字串形式使用的 jQuery 方法。
語法
$(selector, context).datepicker ("action", [params]);
下表列出了此方法的操作 -
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy()
此操作將完全刪除日期選擇器功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 2 | dialog( date [, onSelect ] [, settings ] [, pos ] )
此操作在jQuery UI對話方塊中顯示日期選擇器。 |
| 3 | getDate()
此操作返回與所選日期相對應的日期。此方法不接受任何引數。 |
| 4 | hide()
此操作關閉先前開啟的日期選擇器。此方法不接受任何引數。 |
| 5 | isDisabled()
此操作檢查日期選擇器功能是否被停用。此方法不接受任何引數。 |
| 6 | option( optionName )
此操作檢索當前與指定的optionName關聯的值。 |
| 7 | option()
此操作獲取一個物件，其中包含表示當前日期選擇器選項雜湊的鍵值對。此方法不接受任何引數。 |
| 8 | option( optionName, value )
此操作設定與指定的optionName關聯的日期選擇器選項的值。 |
| 9 | option( options )
此操作為日期選擇器設定一個或多個選項。 |
| 10 | refresh()
此操作在進行了一些外部修改後重新繪製日期選擇器。此方法不接受任何引數。 |
| 11 | setDate( date )
此操作將指定的日期設定為日期選擇器的當前日期。 |
| 12 | show()
此操作開啟日期選擇器。如果日期選擇器附加到輸入，則輸入必須可見才能顯示日期選擇器。此方法不接受任何引數。 |
| 13 | widget()
此操作返回包含日期選擇器的jQuery物件。 |
以下示例顯示了上述表格中列出的一些操作的使用。
setDate()操作的使用
現在讓我們看看使用上述表格中操作的示例。以下示例演示了操作setDate的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-12" ).datepicker();
$( "#datepicker-12" ).datepicker("setDate", "10w+1");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-12"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出−
show()操作的使用
以下示例演示了操作show的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Datepicker functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#datepicker-13" ).datepicker();
$( "#datepicker-13" ).datepicker("show");
});
</script>
</head>
<body>
<!-- HTML -->
<p>Enter Date: <input type = "text" id = "datepicker-13"></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為datepickerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出−
日期選擇器元素上的事件管理
目前還沒有日期選擇器事件方法！
jQuery UI - 對話方塊
對話方塊是在HTML頁面上顯示資訊的一種好方法。對話方塊是一個帶有標題和內容區域的浮動視窗。預設情況下，可以使用“X”圖示移動、調整大小並關閉此視窗。
jQueryUI提供了dialog()方法，該方法將頁面上編寫的HTML程式碼轉換為HTML程式碼以顯示對話方塊。
語法
dialog()方法可以用兩種形式使用−
$ (selector, context).dialog (options) 方法
dialog (options) 方法宣告可以以對話方塊的形式管理HTML元素。options引數是一個物件，它指定該視窗的外觀和行為。語法
$(selector, context).dialog(options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).dialog({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | appendTo
如果此選項設定為 false，則會阻止將 ui-draggable 類新增到所選 DOM 元素列表中。預設值為 true。 |
| 2 | autoOpen
除非此選項設定為false，否則對話方塊將在建立時開啟。當為false時，對話方塊將在呼叫dialog('open')時開啟。預設值為true。 |
| 3 | buttons
此選項在對話方塊中新增按鈕。這些按鈕列為物件，每個屬性都是按鈕上的文字。該值是使用者單擊按鈕時呼叫的回撥函式。預設值為{}。 |
| 4 | closeOnEscape
除非此選項設定為false，否則當用戶在對話方塊具有焦點時按Escape鍵時，對話方塊將關閉。預設值為true。 |
| 5 | closeText
此選項包含用於替換關閉按鈕的預設值“Close”的文字。預設值為"close"。 |
| 6 | dialogClass
如果此選項設定為false，則將阻止將ui-draggable類新增到所選DOM元素列表中。預設值為""。 |
| 7 | draggable
除非您將此選項設定為false，否則可以透過單擊並拖動標題欄來拖動對話方塊。預設值為true。 |
| 8 | height
此選項設定對話方塊的高度。預設值為"auto"。 |
| 9 | hide
此選項用於設定關閉對話方塊時使用的效果。預設值為null。 |
| 11 | maxHeight
此選項設定對話方塊可以調整到的最大高度（以畫素為單位）。預設值為false。 |
| 12 | maxWidth
此選項設定對話方塊可以調整到的最大寬度（以畫素為單位）。預設值為false。 |
| 13 | minHeight
此選項為對話方塊可以調整到的最小高度（以畫素為單位）。預設值為150。 |
| 14 | minWidth
此選項為對話方塊可以調整到的最小寬度（以畫素為單位）。預設值為150。 |
| 15 | 模態
如果此選項設定為true，則對話方塊將具有模態行為；頁面上的其他專案將被停用，即無法與其互動。模態對話方塊在對話方塊下方但其他頁面元素上方建立一個覆蓋層。預設值為false。 |
| 16 | position
此選項指定對話方塊的初始位置。可以是預定義位置之一：center（預設）、left、right、top或bottom。也可以是包含左值和上值（以畫素為單位）的二元素陣列，例如[left,top]，或文字位置，例如['right','top']。預設值為{ my: "center", at: "center", of: window }。 |
| 17 | 可調整大小
除非此選項設定為false，否則對話方塊可在所有方向上調整大小。預設值為true。 |
| 18 | 顯示
此選項是在開啟對話方塊時要使用的效果。預設值為null。 |
| 20 | 標題
此選項指定要在對話方塊標題欄中顯示的文字。預設值為null。 |
| 21 | 寬度
此選項指定對話方塊的寬度（以畫素為單位）。預設值為300。 |
以下部分將向您展示一些對話方塊功能的工作示例。
預設功能
以下示例演示了對話方塊功能的簡單示例，它沒有向dialog()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-1" ).dialog({
autoOpen: false,
});
$( "#opener" ).click(function() {
$( "#dialog-1" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-1"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener">Open Dialog</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以使用結果了 −
按鈕、標題和位置的使用
以下示例演示了在JqueryUI的對話方塊小部件中使用三個選項buttons、title和position。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-2" ).dialog({
autoOpen: false,
buttons: {
OK: function() {$(this).dialog("close");}
},
title: "Success",
position: {
my: "left center",
at: "left center"
}
});
$( "#opener-2" ).click(function() {
$( "#dialog-2" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-2"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-2">Open Dialog</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以使用結果了 −
hide、show和height的使用
以下示例演示了在JqueryUI的對話方塊小部件中使用三個選項hide、show和height。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-3" ).dialog({
autoOpen: false,
hide: "puff",
show : "slide",
height: 200
});
$( "#opener-3" ).click(function() {
$( "#dialog-3" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-3"
title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-3">Open Dialog</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以使用結果了 −
模態的使用
以下示例演示了在JqueryUI的對話方塊小部件中使用三個選項buttons、title和position。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#dialog-4" ).dialog({
autoOpen: false,
modal: true,
buttons: {
OK: function() {$(this).dialog("close");}
},
});
$( "#opener-4" ).click(function() {
$( "#dialog-4" ).dialog( "open" );
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
<button id = "opener-4">Open Dialog</button>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
<label for = "textbox">Enter Name: </label>
<input type = "text">
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出。現在，您可以使用結果了 −
$(selector, context).dialog ("action", [params]) 方法
dialog (action, params) 方法可以對對話方塊執行操作，例如關閉對話方塊。action在第一個引數中指定為字串，並且可以根據給定的操作選擇性地提供一個或多個params。
基本上，這裡的 action 只是我們可以以字串形式使用的 jQuery 方法。
語法
$(selector, context).dialog ("action", [params]);
下表列出了此方法的操作 -
| 序號 | 操作和描述 |
|---|---|
| 1 | close()
此操作關閉對話方塊。此方法不接受任何引數。 |
| 2 | destroy()
此操作完全刪除對話方塊。這將使元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 3 | isOpen()
此操作檢查對話方塊是否已開啟。此方法不接受任何引數。 |
| 4 | moveToTop()
此操作將相應的對話方塊置於前臺（在其他對話方塊之上）。此方法不接受任何引數。 |
| 5 | open()
此操作開啟對話方塊。此方法不接受任何引數。 |
| 6 | option( optionName )
此操作獲取當前與指定optionName關聯的值。其中optionName是要獲取的選項的名稱。 |
| 7 | option()
此操作獲取包含表示當前對話方塊選項雜湊的鍵/值對的物件。此方法不接受任何引數。 |
| 8 | option( optionName, value )
此操作設定與指定optionName關聯的對話方塊選項的值。 |
| 9 | option( options )
此操作為對話方塊設定一個或多個選項。 |
| 10 | widget()
此操作返回對話方塊的小部件元素；用ui-dialog類名註釋的元素。此方法不接受任何引數。 |
示例
現在讓我們看看一個使用上表中操作的示例。以下示例演示了isOpen()、open()和close()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type = "text/javascript">
$(function() {
$("#toggle").click(function() {
($("#dialog-5").dialog("isOpen") == false) ? $(
"#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
});
$("#dialog-5").dialog({autoOpen: false});
});
</script>
</head>
<body>
<button id = "toggle">Toggle dialog!</button>
<div id = "dialog-5" title = "Dialog Title!">
Click on the Toggle button to open and close this dialog box.
</div>
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出 −
對話方塊上的事件管理
除了我們在上一節中看到的dialog (options)方法之外，JqueryUI還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面 −
| 序號 | 事件方法和描述 |
|---|---|
| 1 | beforeClose(event, ui)
當對話方塊即將關閉時觸發此事件。返回false可阻止對話方塊關閉。這對於表單驗證失敗的對話方塊非常有用。其中event的型別為Event，ui的型別為Object。 |
| 2 | close(event, ui)
當對話方塊關閉時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 3 | create(event, ui)
當建立對話方塊時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 4 | drag(event, ui)
在拖動過程中，對話方塊移動時會重複觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 5 | dragStart(event, ui)
當透過拖動標題欄開始重新定位對話方塊時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 6 | dragStop(event, ui)
當拖動操作終止時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 7 | focus(event, ui)
當對話方塊獲得焦點時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 8 | open(event, ui)
當對話方塊開啟時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 9 | resize(event, ui)
在調整對話方塊大小時會重複觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 10 | resizeStart(event, ui)
當開始調整對話方塊大小時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
| 11 | resizeStop(event, ui)
當調整對話方塊大小終止時觸發此事件。其中event的型別為Event，ui的型別為Object。 |
以下示例演示了上表中列出的事件的使用。
beforeClose事件方法的使用
以下示例演示了beforeClose事件方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.invalid { color: red; }
textarea {
display: inline-block;
width: 100%;
margin-bottom: 10px;
}
</style>
<!-- Javascript -->
<script type = "text/javascript">
$(function() {
$( "#dialog-6" ).dialog({
autoOpen: false,
buttons: {
OK: function() {
$( this ).dialog( "close" );
}
},
beforeClose: function( event, ui ) {
if ( !$( "#terms" ).prop( "checked" ) ) {
event.preventDefault();
$( "[for = terms]" ).addClass( "invalid" );
}
},
width: 600
});
$( "#opener-5" ).click(function() {
$( "#dialog-6" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id = "dialog-6">
<p>You must accept these terms before continuing.</p>
<textarea>This Agreement and the Request constitute the entire agreement of the
parties with respect to the subject matter of the Request. This Agreement shall be
governed by and construed in accordance with the laws of the State, without giving
effect to principles of conflicts of law.</textarea>
<div>
<label for = "terms">I accept the terms</label>
<input type = "checkbox" id = "terms">
</div>
</div>
<button id = "opener-5">Open Dialog</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出 −
resize事件方法的使用
以下示例演示了resize事件方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Dialog functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-widget-header,.ui-state-default, ui-button {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
<!-- Javascript -->
<script type = "text/javascript">
$(function() {
$( "#dialog-7" ).dialog({
autoOpen: false,
resize: function( event, ui ) {
$( this ).dialog( "option", "title",
ui.size.height + " x " + ui.size.width );
}
});
$( "#opener-6" ).click(function() {
$( "#dialog-7" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id = "dialog-7" title = "Dialog Title goes here..."
>Resize this dialog to see the dialog co-ordinates in the title!</div>
<button id = "opener-6">Open Dialog</button>
</body>
</html>
讓我們將以上程式碼儲存在一個名為dialogexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您也應該看到以下輸出 −
擴充套件點
對話方塊小部件使用小部件工廠構建，可以擴充套件。要擴充套件小部件，我們可以覆蓋或新增到現有方法的行為。以下方法提供擴充套件點，並具有與對話方塊方法相同的API穩定性。列在上表中。
| 序號 | 方法和描述 |
|---|---|
| 1 | _allowInteraction(event)
此方法允許使用者透過將非對話方塊子元素列入白名單來與給定目標元素互動，從而允許使用者使用。其中event的型別為Event。 |
jQuery UI Widget 工廠是一個可擴充套件的基礎，所有 jQuery UI 的小部件都是基於它構建的。使用 Widget 工廠構建外掛提供了狀態管理的便利，以及針對常見任務（例如公開外掛方法和在例項化後更改選項）的約定。
jQuery UI - 選單
選單小部件通常由一個主選單欄和彈出選單組成。彈出選單中的專案通常具有子彈出選單。只要維護父子關係（使用`
- `或`
lib/globalize.js：此檔案包含用於處理本地化的Javascript程式碼。
lib/globalize.culture.js：此檔案包含Globalize庫附帶的完整語言環境集。
選項卡必須位於有序列表 (<ol>) 或無序列表 (<ul>) 中。
每個選項卡標題必須位於每個 <li> 內，並用帶有href 屬性的錨 (<a>) 標記包裝。
每個選項卡面板可以是任何有效的元素，但必須具有id，該id 與關聯選項卡錨點中的雜湊值對應。
duration − 此引數的型別為數字或字串，表示效果的毫秒數。值為0表示元素直接採用新樣式，無需過渡。其預設值為400。
easing − 此引數的型別為字串，表示效果的過渡方式。其預設值為swing。可能的取值請見此處。
complete − 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。
children − 此引數的型別為布林值，表示動畫是否也應應用於匹配元素的所有子元素。其預設值為false。
queue − 此引數的型別為布林值或字串，表示是否將動畫放入效果佇列中。其預設值為true。
backgroundColor − 設定元素的背景顏色。
borderTopColor − 設定元素邊框頂部的顏色。
borderBottomColor − 設定元素邊框底部的顏色。
borderLeftColor − 設定元素邊框左邊的顏色。
borderRightColor − 設定元素邊框右邊的顏色。
color − 設定元素的文字顏色。
outlineColor − 設定輪廓的顏色；用於強調元素。
duration − 此引數的型別為數字或字串，表示效果的毫秒數。值為0表示元素直接採用新樣式，無需過渡。其預設值為400。
easing − 此引數的型別為字串，表示效果的過渡方式。其預設值為swing。可能的取值請見此處。
complete − 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。
children − 此引數的型別為布林值，表示動畫是否也應應用於匹配元素的所有子元素。其預設值為false。
queue − 此引數的型別為布林值或字串，表示是否將動畫放入效果佇列中。其預設值為true。
duration - 一個字串或數字，決定動畫執行的時長。其預設值為400。
easing - 一個字串，指示要用於轉換的緩動函式。其預設值為swing。可能的取值在此。
complete − 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。
children - 這是一個布林值，表示動畫是否也應應用於匹配元素的所有後代。
queue - 這是一個字串/布林值型別，指示是否將動畫放入效果佇列中。
duration - 一個字串或數字，決定動畫執行的時長。其預設值為400。
easing - 一個字串，指示要用於轉換的緩動函式。其預設值為swing。可能的取值在此。
complete − 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。
children - 這是一個布林值，表示動畫是否也應應用於匹配元素的所有後代。
queue - 這是一個字串/布林值型別，指示是否將動畫放入效果佇列中。
方塊 1與div元素的中心（水平和垂直）對齊。
方塊 2與div元素的左上角（水平和垂直）對齊。
方塊 3顯示在視窗的右上角，但留出一些填充，使訊息更突出。這是使用my或at的水平和垂直值完成的。
對於方塊 4，of值設定為一個事件物件。這是一個與指標關聯的事件，並隨滑鼠事件移動。
- `），就可以使用標記元素建立選單。每個選單項都有一個錨元素。
jQuery UI 中的選單小部件可用於內聯和彈出選單，或作為構建更復雜菜單系統的基礎。例如，您可以建立具有自定義定位的巢狀選單。
jQuery UI 提供 `menu()` 方法來建立選單。
語法
menu() 方法可以使用兩種形式：
$(selector, context).menu (options) 方法
menu (options) 方法宣告 HTML 元素及其內容應被視為和管理為選單。options 引數是一個物件，用於指定所涉及選單項的外觀和行為。
語法
$(selector, context).menu (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).menu({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | disabled
如果此選項設定為 true，則停用選單。預設值為false。 |
| 2 | icons
此選項設定子選單的圖示。預設值為{ submenu: "ui-icon-carat-1-e" }。 |
| 3 | menus
此選項是充當選單容器（包括子選單）的元素的選擇器。預設值為ul。 |
| 4 | position
此選項設定子選單相對於關聯的父選單項的位置。預設值為{ my: "left top", at: "right top" }。 |
| 5 | role
此選項用於自定義用於選單和選單項的 ARIA 角色。預設值為menu。 |
預設功能
以下示例演示了選單小部件功能的簡單示例，未向menu()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-1" ).menu();
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-1">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>
讓我們將上述程式碼儲存在名為menuexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了：
在上面的示例中，您可以看到一個主題化的選單，具有滑鼠和鍵盤互動功能，用於導航。
圖示和位置的使用
以下示例演示了在 JqueryUI 的 menu 函式中使用兩個選項icons和position。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-2" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e"},
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-2">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>
讓我們將上述程式碼儲存在名為menuexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果了：
在上面的示例中，您可以看到我們為子選單列表應用了一個圖示影像，並更改了子選單位置。
$(selector, context).menu ("action", params) 方法
menu ("action", params) 方法可以在選單元素上執行操作，例如啟用/停用選單。操作在第一個引數中指定為字串（例如，“disable”停用選單）。檢視可以傳遞的操作，如下表所示。
語法
$(selector, context).menu ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | blur( [event ] )
此操作將焦點從選單中移除。它透過重置任何活動元素樣式來觸發選單的blur事件。其中event的型別為Event，表示觸發選單模糊的內容。 |
| 2 | collapse( [event ] )
此操作關閉當前活動的子選單。其中event的型別為Event，表示觸發選單摺疊的內容。 |
| 3 | collapseAll( [event ] [, all ] )
此操作關閉所有開啟的子選單。 |
| 4 | destroy()
此操作完全刪除選單功能。這會將元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 5 | disable()
此操作停用選單。此方法不接受任何引數。 |
| 6 | enable()
此操作啟用選單。此方法不接受任何引數。 |
| 7 | expand( [event ] )
此操作開啟當前活動專案下方的子選單（如果存在）。其中event的型別為Event，表示觸發選單展開的內容。 |
| 8 | focus( [event ], item )
此操作啟用特定選單項，如果存在則開始開啟任何子選單，並觸發選單的focus事件。其中event的型別為Event，表示觸發選單獲得焦點的事件；item是表示要聚焦/啟用的選單項的 jQuery 物件。 |
| 9 | isFirstItem()
此操作返回一個boolean值，該值指示當前活動選單項是否為第一個選單項。此方法不接受任何引數。 |
| 10 | isLastItem()
此操作返回一個boolean值，該值指示當前活動選單項是否為最後一個選單項。此方法不接受任何引數。 |
| 11 | next( [event ] )
此操作將活動狀態委託給下一個選單項。其中event的型別為Event，表示觸發焦點移動的內容。 |
| 12 | nextPage( [event ] )
此操作將活動狀態移動到可滾動選單底部下方的第一個選單項，如果不可滾動，則移動到最後一項。其中event的型別為Event，表示觸發焦點移動的內容。 |
| 13 | option( optionName )
此操作獲取當前與指定的optionName關聯的值。其中optionName的型別為String，表示要獲取的選項的名稱。 |
| 14 | option()
此操作獲取包含表示當前選單選項雜湊的鍵/值對的物件。 |
| 15 | option( optionName, value )
此操作設定與指定的 optionName 關聯的選單選項的值。其中optionName的型別為String，表示要設定的選項的名稱；value的型別為Object，表示要為選項設定的值。 |
| 16 | option( options )
此操作為選單設定一個或多個選項。其中options的型別為Object，表示要設定的選項-值對對映。 |
| 17 | previous( [event ] )
此操作將活動狀態移動到上一個選單項。其中event的型別為Event，表示觸發焦點移動的內容。 |
| 18 | previousPage( [event ] )
此操作將活動狀態移動到可滾動選單頂部上方的第一個選單項，如果不可滾動，則移動到第一項。其中event的型別為Event，表示觸發焦點移動的內容。 |
| 19 | refresh()
此操作初始化尚未初始化的子選單和選單項。此方法不接受任何引數。 |
| 20 | select( [event ] )
此操作選擇當前活動的選單項，摺疊所有子選單並觸發選單的select事件。其中event的型別為Event，表示觸發選擇的事件。 |
| 21 | widget()
此操作返回包含選單的 jQuery 物件。此方法不接受任何引數。 |
以下示例演示如何使用上表中給出的操作。
disable 方法的使用
以下示例演示了disable()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-3" ).menu();
$( "#menu-3" ).menu("disable");
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-3">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
</ul>
</body>
</html>
讓我們將上述程式碼儲存在名為menuexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出：
在上面的示例中，您可以看到選單被停用了。
focus 和 collapseAll 方法的使用
以下示例演示了focus()和collapseAll方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
var menu = $("#menu-4").menu();
$( "#menu-4" ).menu(
"focus", null, $( "#menu-4" ).menu().find( ".ui-menu-item:last" ));
$(menu).mouseleave(function () {
menu.menu('collapseAll');
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-4">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
</ul>
</body>
</html>
讓我們將上述程式碼儲存在名為menuexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出：
在上面的示例中，您可以看到焦點位於最後一個選單項上。現在展開子選單，當滑鼠離開子選單時，子選單將關閉。
選單元素上的事件管理
除了我們在前面幾節中看到的 menu (options) 方法外，JqueryUI 還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | blur(event, ui)
當選單失去焦點時觸發此事件。 |
| 2 | create(event, ui)
建立選單時觸發此事件。 |
| 3 | focus(event, ui)
當選單獲得焦點或啟用任何選單項時觸發此事件。 |
| 4 | select(event, ui)
選擇選單項時觸發此事件。 |
示例
以下示例演示了選單小部件功能的事件方法用法。此示例演示了事件create、blur和focus的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Menu functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.ui-menu {
width: 200px;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#menu-5" ).menu({
create: function( event, ui ) {
var result = $( "#result" );
result.append( "Create event<br>" );
},
blur: function( event, ui ) {
var result = $( "#result" );
result.append( "Blur event<br>" );
},
focus: function( event, ui ) {
var result = $( "#result" );
result.append( "focus event<br>" );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<ul id = "menu-5">
<li><a href = "#">Spring</a></li>
<li><a href = "#">Hibernate</a></li>
<li><a href = "#">JSF</a></li>
<li><a href = "#">HTML5</a></li>
<li><a href = "#">Java</a>
<ul>
<li><a href = "#">Java IO</a></li>
<li><a href = "#">Swing</a></li>
<li><a href = "#">Jaspr Reports</a></li>
</ul>
</li>
</ul>
<span id = "result"></span>
</body>
</html>
讓我們將上述程式碼儲存在名為menuexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，您還應該看到以下輸出：
在上例中，我們根據觸發的事件列印訊息。
jQuery UI - 進度條
進度條指示操作或程序的完成百分比。我們可以將進度條分為**確定性進度條**和**非確定性進度條**。
**確定性進度條**僅應在系統能夠準確更新當前狀態的情況下使用。確定性進度條不應該在一個程序中從左到右填充，然後又迴圈回到空狀態。
如果無法計算實際狀態，則應使用**非確定性進度條**來提供使用者反饋。
jQueryUI 提供了一個易於使用的進度條小部件，我們可以使用它來讓使用者知道我們的應用程式正在努力執行請求的操作。jQueryUI 提供 progressbar() 方法來建立進度條。
語法
progressbar() 方法可以以兩種形式使用：
$(selector, context).progressbar (options) 方法
progressbar (options) 方法宣告一個 HTML 元素可以以進度條的形式進行管理。options 引數是一個物件，用於指定進度條的外觀和行為。
語法
$(selector, context).progressbar (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).progressbar({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | disabled
將此選項設定為 true 將停用進度條。預設值為false。 |
| 2 | max
此選項設定進度條的最大值。預設值為100。 |
| 3 | value
此選項指定進度條的初始值。預設值為0。 |
以下部分將向您展示幾個進度條功能的實際示例。
預設功能
以下示例演示了進度條功能的一個簡單示例，未向progressbar() 方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-1" ).progressbar({
value: 30
});
});
</script>
</head>
<body>
<div id = "progressbar-1"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為progressbarexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試著修改結果：
此示例演示了使用progressbar() 方法建立進度條。這是一個預設的確定性進度條。
max 和 value 的使用
以下示例演示了在 JqueryUI 的 progressbar 函式中使用兩個選項values 和max。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar-2" );
$( "#progressbar-2" ).progressbar({
value: 30,
max:300
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id = "progressbar-2"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為progressbarexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試著修改結果：
在這裡您可以看到，進度條從右到左填充，並在值達到 300 時停止。
$(selector, context).progressbar ("action", params) 方法
progressbar ("action", params) 方法可以在進度條上執行操作，例如更改填充百分比。操作在第一個引數中指定為字串（例如，更改填充百分比為“value”）。請查看下錶中可以傳遞的操作。
語法
$(selector, context).progressbar ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作完全刪除元素的進度條功能。元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 2 | destroy（銷燬）
此操作完全刪除元素的進度條功能。元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 3 | disable（停用）
此操作停用元素的進度條功能。此方法不接受任何引數。 |
| 4 | enable（啟用）
此操作啟用進度條功能。此方法不接受任何引數。 |
| 5 | option( optionName )
此操作檢索當前與指定的optionName關聯的值。其中optionName 是一個字串。 |
| 6 | option（選項）
此操作獲取一個包含鍵/值對的物件，表示當前的進度條選項雜湊。此方法不接受任何引數。 |
| 7 | option( optionName, value )
此操作設定與指定的optionName關聯的進度條選項的值。 |
| 8 | option( options )
此操作為進度條設定一個或多個選項。引數options 是要設定的選項-值對的對映。 |
| 9 | value
此操作檢索options.value 的當前值，即進度條的填充百分比。 |
| 10 | value( value )
此操作為進度條中填充的百分比指定一個新值。引數value 可以是數字或布林值。 |
| 11 | widget（元件）
此操作返回包含進度條的 jQuery 物件。此方法不接受任何引數。 |
示例
現在讓我們來看一個使用上表中操作的示例。以下示例演示了disable()和option(optionName, value)方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
</style>
<script>
$(function() {
$( "#progressbar-3" ).progressbar({
value: 30
});
$( "#progressbar-3" ).progressbar('disable');
$( "#progressbar-4" ).progressbar({
value: 30
});
var progressbar = $( "#progressbar-4" );
$( "#progressbar-4" ).progressbar( "option", "max", 1024 );
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<h3>Disabled Progressbar</h3>
<div id = "progressbar-3"></div><br>
<h3>Progressbar with max value set</h3>
<div id = "progressbar-4"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為progressbarexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出：
停用的進度條
設定了最大值的進度條
進度條元素上的事件管理
除了我們在前面幾節中看到的 progressbar (options) 方法外，JqueryUI 還提供了針對特定事件觸發的事件方法。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | change(event, ui)
每當進度條的值更改時，都會觸發此事件。其中event 的型別為Event，ui 的型別為Object。 |
| 2 | complete(event, ui)
當進度條達到最大值時，將觸發此事件。其中event 的型別為Event，ui 的型別為Object。 |
| 3 | create(event, ui)
每當建立進度條時，都會觸發此事件。其中event 的型別為Event，ui 的型別為Object。 |
示例
以下示例演示了在進度條功能期間事件方法的使用。此示例演示了change 和complete 事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI ProgressBar functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.ui-widget-header {
background: #cedc98;
border: 1px solid #DDDDDD;
color: #333333;
font-weight: bold;
}
.progress-label {
position: absolute;
left: 50%;
top: 13px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar-5" );
progressLabel = $( ".progress-label" );
$( "#progressbar-5" ).progressbar({
value: false,
change: function() {
progressLabel.text(
progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "Loading Completed!" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id = "progressbar-5">
<div class = "progress-label">
Loading...
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為progressbarexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出：
在這裡您可以看到，隨著進度條的變化，其更改的值會被打印出來，並且在完成事件後，“載入完成！”訊息會顯示。
jQuery UI - 滑塊
當需要獲取某個範圍內的一個數值時，可以使用滑塊。與文字輸入相比，滑塊的優點是使用者不可能輸入無效的值。他們可以使用滑塊選擇的任何值都是有效的。
jQueryUI 透過滑塊小部件為我們提供了一個滑塊控制元件。jQueryUI 提供 slider() 方法來更改頁面中 HTML 元素的外觀，新增新的 CSS 類以賦予它們適當的樣式。
語法
slider () 方法可以以兩種形式使用：
$(selector, context).slider (options) 方法
slider (options) 方法宣告一個 HTML 元素應作為滑塊進行管理。options 引數是一個物件，用於指定滑塊的外觀和行為。
語法
$(selector, context).slider (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).slider({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | animate
將此選項設定為 true 時，會在使用者直接點選軸時建立動畫效果。預設值為false。 |
| 2 | disabled
將此選項設定為 true 時，將停用滑塊。預設值為false。 |
| 3 | max
此選項指定滑塊可以達到的範圍的上限值——當控制代碼移動到最右邊（對於水平滑塊）或頂部（對於垂直滑塊）時表示的值。預設值為100。 |
| 4 | min
此選項指定滑塊可以達到的範圍的下限值——當控制代碼移動到最左邊（對於水平滑塊）或底部（對於垂直滑塊）時表示的值。預設值為0。 |
| 5 | orientation
此選項指示滑塊的水平或垂直方向。預設值為horizontal。 |
| 6 | range
此選項指定滑塊是否表示一個範圍。預設值為false。 |
| 7 | step
此選項指定滑塊允許表示的最小值和最大值之間的離散間隔。預設值為1。 |
| 8 | value
此選項指定單控制代碼滑塊的初始值。如果有多個控制代碼（參見 values 選項），則指定第一個控制代碼的值。預設值為1。 |
| 9 | values
此選項的型別為陣列，它會導致建立多個控制代碼，並指定這些控制代碼的初始值。此選項應為可能的值得陣列，每個控制代碼一個。預設值為null。 |
以下部分將向您展示幾個滑塊功能的實際示例。
預設功能
以下示例演示了滑塊功能的一個簡單示例，未向slider() 方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-1" ).slider();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-1"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為sliderexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試著修改結果：
在上例中，它是一個基本的水平滑塊，並帶有一個可以用滑鼠或箭頭鍵移動的控制代碼。
value、animate 和 orientation 的使用
以下示例演示了在 JqueryUI 的 slider 函式中使用三個選項(a) value (b) animate 和(c) orientation。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-2" ).slider({
value: 60,
animate:"slow",
orientation: "horizontal"
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-2"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為sliderexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試著修改結果：
在上例中，滑塊的value（即初始值）設定為 60，因此您會看到控制代碼位於 60 的初始值處。現在只需直接點選軸即可看到動畫效果。
Range、Min、Max 和 Values 的使用
以下示例演示了在 JqueryUI 的 slider 函式中使用三個選項(a) range, (b) min、(c) max 和(d) values。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-3" ).slider({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
slide: function( event, ui ) {
$( "#price" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#price" ).val( "$" + $( "#slider-3" ).slider( "values", 0 ) +
" - $" + $( "#slider-3" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<!-- HTML -->
<p>
<label for = "price">Price range:</label>
<input type = "text" id = "price"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-3"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為sliderexample.htm 的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試著修改結果：
在上例中，我們將 range 選項設定為 true 以使用兩個拖動控制代碼捕獲一系列值。控制代碼之間的空間填充了不同的背景顏色，以指示這些值已被選中。
$ (selector, context).slider ("action", params) 方法
slider ("action", params) 方法允許對滑塊執行操作，例如將游標移動到新位置。操作以字串形式指定在第一個引數中（例如，“value”表示游標的新值）。請查看下錶中可以傳遞的操作。
語法
$(selector, context).slider ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作會完全銷燬元素的滑塊功能。元素將恢復到其初始化之前的狀態。此方法不接受任何引數。 |
| 2 | disable（停用）
此操作停用滑塊功能。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作啟用滑塊功能。此方法不接受任何引數。 |
| 4 | option( optionName )
此操作檢索指定 param 選項的值。此選項對應於slider (options)中使用的選項之一。其中optionName是要獲取的選項的名稱。 |
| 5 | option()
此操作獲取一個物件，其中包含表示當前滑塊選項雜湊的鍵值對。 |
| 6 | option( optionName, value )
此操作設定與指定的optionName關聯的滑塊選項的值。引數optionName是要設定的選項的名稱，value是要為選項設定的值。 |
| 7 | option( options )
此操作設定滑塊的一個或多個選項。引數options是要設定的選項-值對的對映。 |
| 8 | value
此操作檢索options.value（滑塊）的當前值。僅當滑塊唯一時才使用（如果不是，請使用slider ("values")）。此簽名不接受任何引數。 |
| 9 | value( value )
此操作設定滑塊的值。 |
| 10 | values
此操作檢索options.values的當前值（滑塊的值以陣列形式）。此簽名不接受任何引數。 |
| 11 | values( index )
此操作獲取指定滑塊控制代碼的值。其中index的型別為整數，是控制代碼的基於零的索引。 |
| 12 | values( index, value )
此操作設定指定滑塊控制代碼的值。其中index是控制代碼的基於零的索引，value是要設定的值。 |
| 13 | values( values )
此操作設定所有控制代碼的值。 |
| 14 | widget（元件）
此操作返回包含滑塊的 jQuery 物件。此方法不接受任何引數。 |
示例
現在讓我們來看一個使用上表中操作的示例。以下示例演示了disable()和value()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-4" ).slider({
orientation:"vertical"
});
$( "#slider-4" ).slider('disable');
$( "#slider-5" ).slider({
orientation:"vertical",
value:50,
slide: function( event, ui ) {
$( "#minval" ).val( ui.value );
}
});
$( "#minval" ).val( $( "#slider-5" ).slider( "value" ) );
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-4"></div>
<p>
<label for = "minval">Minumum value:</label>
<input type = "text" id = "minval"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<div id = "slider-5"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為sliderexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：
在上例中，第一個滑塊被停用，第二個滑塊的值被設定為50。
滑塊元素上的事件管理
除了我們在前面章節中看到的slider (options)方法之外，JqueryUI還提供了事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | change(event, ui)
當控制代碼的值發生更改時觸發此事件，無論是透過使用者操作還是以程式設計方式。 |
| 2 | create(event, ui)
建立滑塊時觸發此事件。 |
| 3 | slide(event, ui)
每當控制代碼在滑塊上拖動時，此事件都會針對滑鼠移動事件觸發。返回false會取消滑動。 |
| 4 | start(event, ui)
使用者開始滑動時觸發此事件。 |
| 5 | stop(event, ui)
滑動停止時觸發此事件。 |
示例
以下示例演示了滑塊功能期間事件方法的使用。此示例演示了start、stop、change和slide事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Slider functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#slider-6" ).slider({
range:true,
min: 0,
max: 500,
values: [ 35, 200 ],
start: function( event, ui ) {
$( "#startvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
stop: function( event, ui ) {
$( "#stopvalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
change: function( event, ui ) {
$( "#changevalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
},
slide: function( event, ui ) {
$( "#slidevalue" )
.val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "slider-6"></div>
<p>
<label for = "startvalue">Start:</label>
<input type = "text" id = "startvalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "stopvalue">Stop:</label>
<input type = "text" id = "stopvalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "changevalue">Change:</label>
<input type = "text" id = "changevalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
<p>
<label for = "slidevalue">Slide:</label>
<input type = "text" id = "slidevalue"
style = "border:0; color:#b9cd6d; font-weight:bold;">
</p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為sliderexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出：
jQuery UI - 微調器
微調器部件在輸入框左側添加了一個向上/向下箭頭，從而允許使用者增加/減少輸入框中的值。它允許使用者直接鍵入值，或透過鍵盤、滑鼠或滾輪旋轉來修改現有值。它還有一個步進功能來跳過值。除了基本的數字功能外，它還支援全球化的格式化選項（即貨幣、千位分隔符、小數等），從而提供了一個方便的國際化掩碼輸入框。
以下示例依賴於Globalize。您可以從https://github.com/jquery/globalize獲取Globalize檔案。單擊releases連結，選擇所需的版本，然後下載.zip或tar.gz檔案。解壓檔案並將以下檔案複製到示例所在的資料夾。
這些檔案也存在於jquery-ui庫的external資料夾中。
jQueryUI提供spinner()方法來建立一個微調器。
語法
spinner()方法可以用兩種形式使用：
$ (selector, context).spinner (options) 方法
spinner (options)方法宣告HTML元素及其內容應被視為和管理為微調器。options引數是一個物件，用於指定所涉及的微調器元素的外觀和行為。
語法
$(selector, context).spinner (options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).spinner({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | culture
此選項設定用於解析和格式化值的區域設定。預設值為null，這意味著使用Globalize中當前設定的區域設定。 |
| 2 | disabled
如果此選項設定為true，則停用微調器。預設值為false。 |
| 3 | icons
此選項設定用於按鈕的圖示，與jQuery UI CSS框架提供的圖示匹配。預設值為{ down: "ui-icon-triangle-1-s", up: "ui-icon-triangle-1-n" }。 |
| 4 | incremental
此選項控制按住旋轉按鈕時採取的步數。預設值為true。 |
| 5 | max
此選項指示允許的最大值。預設值為null，這意味著沒有強制最大值。 |
| 6 | min
此選項指示允許的最小值。預設值為null，這意味著沒有強制最小值。 |
| 7 | numberFormat
此選項指示傳遞給Globalize（如果可用）的數字格式。最常見的是“n”（十進位制數）和“C”（貨幣值）。預設值為null。 |
| 8 | page
此選項指示透過pageUp/pageDown方法分頁時要執行的步數。預設值為10。 |
| 9 | step
此選項指示透過按鈕或stepUp()/stepDown()方法旋轉時要執行的步進大小。如果存在元素的step屬性並且未顯式設定此選項，則使用該屬性。 |
下一節將向您展示一些微調器部件功能的工作示例。
預設功能
以下示例演示了微調器部件功能的一個簡單示例，未向spinner()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-1 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-1" ).spinner();
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-1" value = "0" />
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
Min、Max和Step選項的使用
以下示例演示了在JqueryUI的微調器部件中使用三個選項min、max和step。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-2,#spinner-3 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-2" ).spinner({
min: -10,
max: 10
});
$('#spinner-3').spinner({
step: 100,
min: -1000000,
max: 1000000
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
Spinner Min, Max value set:
<input type = "text" id = "spinner-2" value = "0" /><br><br>
Spinner increments/decrements in step of of 100:
<input type = "text" id = "spinner-3" value = "0" />
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
在上例中，您可以看到在第一個微調器中，max和min值分別設定為10和-10。因此，超過這些值，微調器將停止遞增/遞減。在第二個微調器中，微調器值以100為步進遞增/遞減。
圖示選項的使用
以下示例演示了在 JqueryUI 的 spinner 小部件中使用選項icons。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-5 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-5" ).spinner({
icons: {
down: "custom-down-icon", up: "custom-up-icon"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-5" value = "0" />
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
在上面的示例中，您可以注意到 spinner 的影像已更改。
culture、numberFormat 和 page 選項的使用
以下示例演示了在 JqueryUI 的 spinner 小部件中使用三個選項culture、numberFormat 和 page。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/jquery.mousewheel.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.js"></script>
<script src = "/jqueryui/jquery-ui-1.10.4/external/globalize.culture.de-DE.js"></script>
<script>
$(function() {
$( "#spinner-4" ).spinner({
culture:"de-DE",
numberFormat:"C",
step:2,
page:10
});
});
</script>
</head>
<body>
<p>
<label for = "spinner-4">Amount to donate:</label>
<input id = "spinner-4" name = "spinner" value = "5">
</p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為spinnerexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您還應該看到以下輸出。現在，您可以使用結果：
在上面的示例中，您可以看到 spinner 以貨幣格式顯示數字，因為numberFormat 設定為“C”，而culture 設定為“de-DE”。這裡我們使用了 jquery-ui 庫中的 Globalize 檔案。
$ (selector, context).spinner ("action", params) 方法
spinner ("action", params) 方法可以對 spinner 元素執行操作，例如啟用/停用 spinner。操作在第一個引數中指定為字串（例如，“disable”停用 spinner）。請查看下錶中可以傳遞的操作。
語法
$(selector, context).spinner ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作會完全銷燬元素的 spinner 功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 2 | disable（停用）
此操作停用 spinner 功能。此方法不接受任何引數。 |
| 3 | enable（啟用）
此操作啟用 spinner 功能。此方法不接受任何引數。 |
| 4 | option( optionName )
此操作獲取當前與指定的 optionName 關聯的值。其中 optionName 是要獲取的選項的名稱。 |
| 5 | option（選項）
此操作獲取一個物件，其中包含表示當前 spinner 選項雜湊的鍵/值對。此方法不接受任何引數。 |
| 6 | option( optionName, value )
此操作設定與指定的optionName關聯的 spinner 選項的值。 |
| 7 | option( options )
此操作設定 spinner 的一個或多個選項。 |
| 8 | pageDown( [pages ] )
此操作根據 page 選項定義，將值減小指定頁數。 |
| 9 | pageUp( [pages ] )
此操作根據 page 選項定義，將值增加指定頁數。 |
| 10 | stepDown( [steps ] )
此操作將值減小指定步數。 |
| 11 | stepUp( [steps ] )
此操作將值增加指定步數。 |
| 12 | value
此操作獲取當前值作為數字。該值將根據 numberFormat 和 culture 選項進行解析。此方法不接受任何引數。 |
| 13 | value( value )
此操作設定值。如果傳遞了 value，則根據 numberFormat 和 culture 選項解析 value。 |
| 14 | widget（元件）
此操作返回 spinner 小部件元素；即標註有ui-spinner 類名的元素。 |
以下示例演示如何使用上表中給出的操作。
使用 action stepUp、stepDown、pageUp 和 pageDown
以下示例演示了stepUp、stepDown、pageUp 和 pageDown 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-6 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#spinner-6").spinner();
$('button').button();
$('#stepUp-2').click(function () {
$("#spinner-6").spinner("stepUp");
});
$('#stepDown-2').click(function () {
$("#spinner-6").spinner("stepDown");
});
$('#pageUp-2').click(function () {
$("#spinner-6").spinner("pageUp");
});
$('#pageDown-2').click(function () {
$("#spinner-6").spinner("pageDown");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id = "spinner-6" />
<br/>
<button id = "stepUp-2">Increment</button>
<button id = "stepDown-2">Decrement</button>
<button id = "pageUp-2">Increment Page</button>
<button id = "pageDown-2">Decrement Page</button>
</body>
</html>
讓我們將以上程式碼儲存在名為spinnerexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您還應該看到以下輸出：
在上面的示例中，使用相應的按鈕來增加/減少 spinner 的值。
使用 action enable 和 disable
以下示例演示了enable 和 disable 方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-7 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$("#spinner-7").spinner();
$('button').button();
$('#stepUp-3').click(function () {
$("#spinner-7").spinner("enable");
});
$('#stepDown-3').click(function () {
$("#spinner-7").spinner("disable");
});
});
</script>
</head>
<body>
<!-- HTML -->
<input id = "spinner-7" />
<br/>
<button id = "stepUp-3">Enable</button>
<button id = "stepDown-3">Disable</button>
</body>
</html>
讓我們將以上程式碼儲存在名為spinnerexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該看到以下輸出：
在上面的示例中，使用啟用/停用按鈕來啟用或停用 spinner。
Spinner 元素的事件管理
除了我們在上一節中看到的 spinner (options) 方法外，JqueryUI 還提供了在特定事件觸發時觸發的事件方法。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | change(event, ui)
當 spinner 的值發生更改且輸入不再聚焦時，將觸發此事件。 |
| 2 | create(event, ui)
建立 spinner 時將觸發此事件。 |
| 3 | spin(event, ui)
在遞增/遞減期間將觸發此事件。 |
| 4 | start(event, ui)
此事件在旋轉之前觸發。可以取消，從而阻止旋轉發生。 |
| 5 | stop(event, ui)
此事件在旋轉後觸發。 |
示例
以下示例演示了 spinner 小部件中的事件方法用法。此示例演示了spin、change 和 stop 事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Spinner functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style type = "text/css">
#spinner-8 input {width: 100px}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#spinner-8" ).spinner({
spin: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Spin Value: "+$( "#spinner-8" ).spinner("value") );
},
change: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Change value: "+$( "#spinner-8" ).spinner("value") );
},
stop: function( event, ui ) {
var result = $( "#result-2" );
result.append( "Stop value: "+$( "#spinner-8" ).spinner("value") );
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<div id = "example">
<input type = "text" id = "spinner-8" value = "0" />
</div>
<span id = "result-2"></span>
</body>
</html>
讓我們將以上程式碼儲存在名為spinnerexample.htm 的 HTML 檔案中，並在支援 javascript 的標準瀏覽器中開啟它，您也應該看到以下輸出：
在上面的示例中，更改 spinner 的值，然後檢視為 spin 和 stop 事件顯示的訊息。現在更改 spinner 的焦點，您將看到在 change 事件上顯示的訊息。
擴充套件點
spinner 小部件使用 widget 工廠構建，可以擴充套件。要擴充套件小部件，我們可以覆蓋或新增到現有方法的行為。以下方法提供了與 spinner 方法相同的 API 穩定性的擴充套件點。列在上表中。
| 序號 | 方法和描述 |
|---|---|
| 1 | _buttonHtml(event)
此方法返回一個表示 HTML 的字串。此 HTML 可用於 spinner 的遞增和遞減按鈕。每個按鈕都必須具有 ui-spinner-button 類名才能使關聯的事件生效。此方法不接受任何引數。 |
| 2 | _uiSpinnerHtml(event)
此方法確定用於包裝 spinner 的 <input> 元素的 HTML。此方法不接受任何引數。 |
jQuery UI Widget 工廠是一個可擴充套件的基礎，所有 jQuery UI 的小部件都是基於它構建的。使用 Widget 工廠構建外掛提供了狀態管理的便利，以及針對常見任務（例如公開外掛方法和在例項化後更改選項）的約定。
jQuery UI - 標籤頁
選項卡是一組邏輯上分組的內容，允許我們快速地在它們之間切換。選項卡允許我們像手風琴一樣節省空間。為了使選項卡正常工作，需要使用以下標記：
jQueryUI 提供了 tabs () 方法，它會徹底改變頁面內 HTML 元素的外觀。此方法（在 jQuery UI 內部）遍歷 HTML 程式碼，並向相關元素（此處為選項卡）新增新的 CSS 類，以賦予它們適當的樣式。
語法
tabs () 方法可以使用兩種形式：
$ (selector, context).tabs (options) 方法
tabs (options) 方法宣告 HTML 元素及其內容應作為選項卡進行管理。options 引數是一個物件，用於指定選項卡的外觀和行為。
語法
$(selector, context).tabs (options);
您可以使用 JavaScript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).tabs({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | active
此選項指定當前活動的選項卡/面板。預設值為0。 |
| 2 | collapsible
此選項設定為true 時，允許取消選擇選項卡。設定為 false（預設值）時，單擊選定的選項卡不會取消選擇（它仍然被選中）。預設值為false。 |
| 3 | disabled
此選項使用陣列指示停用的選項卡索引（因此無法選擇）。例如，使用 [0, 1] 停用前兩個選項卡。預設值為false。 |
| 4 | event
此選項是允許使用者選擇新選項卡的事件的名稱。例如，如果此選項設定為“mouseover”，則將滑鼠懸停在選項卡上將選擇它。預設值為“click”。 |
| 5 | heightStyle
此選項控制選項卡小部件和每個面板的高度。預設值為“content”。 |
| 6 | hide
此選項指定如何動畫隱藏面板。預設值為null。 |
| 7 | 顯示
此選項指定如何動畫顯示面板。預設值為null。 |
下一節將向您展示一些關於選項卡功能的有效示例。
預設功能
以下示例演示了選項卡功能的一個簡單示例，沒有向tabs() 方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
" rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-1" ).tabs();
});
</script>
<style>
#tabs-1{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-1">
<ul>
<li><a href = "#tabs-2">Tab 1</a></li>
<li><a href = "#tabs-3">Tab 2</a></li>
<li><a href = "#tabs-4">Tab 3</a></li>
</ul>
<div id = "tabs-2">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-4">
<p>
ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tabsexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你應該會看到以下輸出。現在，你可以嘗試一下結果：
在上面的例子中，點選選項卡在內容之間切換。
heightStyle、collapsible和hide的使用
以下示例演示了在JqueryUI的tabs函式中使用三個選項(a) heightStyle (b) collapsible和(c) hide。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-5" ).tabs({
heightStyle:"fill",
collapsible:true,
hide:"slideUp"
});
});
</script>
<style>
#tabs-5{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-5">
<ul>
<li><a href = "#tabs-6">Tab 1</a></li>
<li><a href = "#tabs-7">Tab 2</a></li>
<li><a href = "#tabs-8">Tab 3</a></li>
</ul>
<div id = "tabs-6">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-8">
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tabsexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試一下結果：
點選選定的選項卡以切換其內容的開啟/關閉狀態。你還可以看到選項卡關閉時“slideUp”的動畫效果。
事件的使用
以下示例演示了在JqueryUI的tabs函式中使用選項event。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-9" ).tabs({
event:"mouseover"
});
});
</script>
<style>
#tabs-9{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-9">
<ul>
<li><a href = "#tabs-10">Tab 1</a></li>
<li><a href = "#tabs-11">Tab 2</a></li>
<li><a href = "#tabs-12">Tab 3</a></li>
</ul>
<div id = "tabs-10">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit... </p>
</div>
<div id = "tabs-11">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-12">
<p>
ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tabsexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試一下結果：
在上面的例子中，滑鼠懸停在選項卡上可以切換各個部分的開啟/關閉狀態。
$ (selector, context).tabs ("action", params) 方法
tabs ("action", params) 方法允許對選項卡執行操作（透過JavaScript程式），例如選擇、停用、新增或刪除選項卡。操作在第一個引數中指定為字串（例如，“add”用於新增新的選項卡）。請查看下錶中可以傳遞的操作。
語法
$(selector, context).tabs ("action", params);;
下表列出了此方法可以使用不同的actions：
| 序號 | 操作和描述 |
|---|---|
| 1 | destroy（銷燬）
此操作將完全銷燬元素的tabs功能。元素將恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 2 | disable（停用）
此操作將停用所有選項卡。此方法不接受任何引數。 |
| 3 | disable( index )
此操作停用指定的選項卡。其中index是要停用的選項卡的索引。 |
| 4 | enable（啟用）
此操作啟用所有選項卡。此方法不接受任何引數。 |
| 5 | enable( index )
此操作啟用指定的選項卡。其中index是要啟用的選項卡的索引。 |
| 6 | load( index )
此操作強制重新載入索引選項卡，忽略快取。其中index是要載入的選項卡的索引。 |
| 7 | option( optionName )
此操作獲取當前與指定的optionName關聯的值。 |
| 8 | option（選項）
此操作獲取一個物件，該物件包含表示當前選項卡選項雜湊的鍵值對。 |
| 9 | option( optionName, value )
此操作設定與指定的optionName關聯的選項卡選項的值。引數optionName是要設定的選項的名稱，而value是要為該選項設定的值。 |
| 10 | option( options )
此操作為選項卡設定一個或多個選項。 |
| 11 | refresh
當直接在DOM中新增或刪除任何選項卡時，此操作會重新計算選項卡面板的高度。結果取決於內容和heightStyle選項。 |
| 12 | widget（元件）
此操作返回用作選項卡小部件的元素，並標註有ui-tabs類名。 |
Action Disable() 的使用
現在讓我們看看一個使用上表中操作的示例。以下示例演示了disable()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-13" ).tabs();
$( "#tabs-13" ).tabs("disable");
});
</script>
<style>
#tabs-13{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-13">
<ul>
<li><a href = "#tabs-14">Tab 1</a></li>
<li><a href = "#tabs-15">Tab 2</a></li>
<li><a href = "#tabs-16">Tab 3</a></li>
</ul>
<div id = "tabs-14">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-15">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-16">
<p>
ed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tabsexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你同樣應該會看到以下輸出：
在這裡你可以看到所有選項卡都被停用了。
Action Disable(index) 的使用
現在讓我們看看一個使用上表中操作的示例。以下示例演示了disable(index)方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-17" ).tabs();
$( "#tabs-17" ).tabs("disable",2);
});
</script>
<style>
#tabs-17{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
</style>
</head>
<body>
<div id = "tabs-17">
<ul>
<li><a href = "#tabs-18">Tab 1</a></li>
<li><a href = "#tabs-19">Tab 2</a></li>
<li><a href = "#tabs-20">Tab 3</a></li>
</ul>
<div id = "tabs-18">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-19">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-20">
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tabsexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你應該會看到以下輸出：
在上面的例子中，你會注意到選項卡3被停用了。
選項卡元素的事件管理
除了我們在前面幾節中看到的tabs（選項）方法之外，JqueryUI還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | activate(event, ui)
此事件在選項卡啟用後（動畫完成後）觸發。 |
| 2 | beforeActivate(event, ui)
此事件在選項卡啟用之前觸發。 |
| 3 | beforeLoad(event, ui)
在beforeActivate事件之後，當即將載入遠端選項卡時觸發此事件。此事件在發出Ajax請求之前觸發。 |
| 4 | create(event, ui)
此事件在建立選項卡時觸發。 |
| 5 | load(event, ui)
遠端選項卡載入後觸發此事件。 |
示例
以下示例演示了選項卡小部件中事件方法的使用。此示例演示了activate和create事件的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tabs functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs-21" ).tabs({
activate: function( event, ui ) {
var result = $( "#result-2" ).empty();
result.append( "activated" );
},
create: function( event, ui ) {
var result = $( "#result-1" ).empty();
result.append( "created" );
}
});
});
</script>
<style>
#tabs-21{font-size: 14px;}
.ui-widget-header {
background:#b9cd6d;
border: 1px solid #b9cd6d;
color: #FFFFFF;
font-weight: bold;
}
.resultarea {
background: #cedc98;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
color: #333333;
font-size:14px;
}
</style>
</head>
<body>
<div id = "tabs-21">
<ul>
<li><a href = "#tabs-22">Tab 1</a></li>
<li><a href = "#tabs-23">Tab 2</a></li>
<li><a href = "#tabs-24">Tab 3</a></li>
</ul>
<div id = "tabs-22">
<p>
Neque porro quisquam est qui dolorem ipsum quia dolor
sit amet, consectetur, adipisci velit...
</p>
</div>
<div id = "tabs-23">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div id = "tabs-24">
<p>
ed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
</p>
</div>
</div><br>
<span class = "resultarea" id = result-1></span><br>
<span class = "resultarea" id = result-2></span>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tabsexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你應該會看到以下輸出：
點選選項卡以檢視下方列印的特定於事件的訊息。
jQuery UI - 工具提示
jQueryUI 的工具提示小部件替換了原生工具提示。此小部件添加了新的主題並允許自定義。首先讓我們瞭解什麼是工具提示？工具提示可以附加到任何元素。要顯示工具提示，只需向輸入元素新增title屬性，並且title屬性值將用作工具提示。當您將滑鼠懸停在元素上時，標題屬性將顯示在元素旁邊的一個小框中。
jQueryUI 提供了tooltip() 方法，可以將工具提示新增到任何想要顯示工具提示的元素上。與僅僅切換可見性相比，這預設情況下會提供淡入淡出動畫以顯示和隱藏工具提示。
語法
tooltip() 方法可以以兩種形式使用：
$ (selector, context).tooltip (options) 方法
tooltip (options) 方法宣告可以將工具提示新增到HTML元素。options引數是一個物件，用於指定工具提示的行為和外觀。語法
$(selector, context).tooltip(options);
您可以使用 Javascript 物件一次提供一個或多個選項。如果要提供多個選項，則使用逗號分隔它們，如下所示：
$(selector, context).tooltip({option1: value1, option2: value2..... });
下表列出了可與此方法一起使用的不同 options：
| 序號 | 選項及描述 |
|---|---|
| 1 | content
此選項表示工具提示的內容。預設值為返回title屬性的函式。 |
| 2 | disabled
此選項設定為true時將停用工具提示。預設值為false。 |
| 3 | hide
此選項表示隱藏工具提示時的動畫效果。預設值為true。 |
| 4 | items
此選項指示哪些專案可以顯示工具提示。預設值為[title]。 |
| 5 | position
此選項決定工具提示相對於關聯目標元素的位置。預設值為返回title屬性的函式。可能的值為：my, at, of, collision, using, within. |
| 6 | 顯示
此選項表示如何為工具提示設定顯示動畫。預設值為true。 |
| 7 | tooltipClass
此選項是一個類，可以新增到工具提示小部件中，用於警告或錯誤之類的工具提示。預設值為null。 |
| 8 | track
此選項設定為true時，工具提示將跟隨/跟蹤滑鼠。預設值為false。 |
以下部分將向您展示一些關於工具提示功能的實際示例。
預設功能
以下示例演示了一個簡單的工具提示功能示例，未向tooltip()方法傳遞任何引數。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-1").tooltip();
$("#tooltip-2").tooltip();
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Name:</label>
<input id = "tooltip-1" title = "Enter You name">
<p><a id = "tooltip-2" href = "#" title = "Nice tooltip">
I also have a tooltip</a></p>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你應該會看到以下輸出。現在，你可以嘗試一下結果：
在上例中，懸停在上面的連結上或使用Tab鍵迴圈切換每個元素的焦點。
內容、跟蹤和停用選項的使用
以下示例演示了在JqueryUI的工具提示函式中三個重要選項(a) content (b) track和(c) disabled 的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-3" ).tooltip({
content: "<strong>Hi!</strong>",
track:true
}),
$( "#tooltip-4" ).tooltip({
disabled: true
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Message:</label>
<input id = "tooltip-3" title = "tooltip"><br><br><br>
<label for = "name">Tooltip disabled for me:</label>
<input id = "tooltip-4" title = "tooltip">
</body>
</html>
讓我們將上述程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你應該會看到以下輸出。現在，你可以嘗試一下結果：
在上例中，第一個框的工具提示內容使用content選項設定。您還可以注意到工具提示跟隨滑鼠移動。第二個輸入框的工具提示被停用。
位置選項的使用
以下示例演示了在JqueryUI的工具提示函式中position選項的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
body {
margin-top: 100px;
}
.ui-tooltip-content::after, .ui-tooltip-content::before {
content: "";
position: absolute;
border-style: solid;
display: block;
left: 90px;
}
.ui-tooltip-content::before {
bottom: -10px;
border-color: #AAA transparent;
border-width: 10px 10px 0;
}
.ui-tooltip-content::after {
bottom: -7px;
border-color: white transparent;
border-width: 10px 10px 0;
}
</style>
<!-- Javascript -->
<script>
$(function() {
$( "#tooltip-7" ).tooltip({
position: {
my: "center bottom",
at: "center top-10",
collision: "none"
}
});
});
</script>
</head>
<body>
<!-- HTML -->
<label for = "name">Enter Date of Birth:</label>
<input id = "tooltip-7" title = "Please use MM.DD.YY format.">
</body>
</html>
讓我們將上述程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，你應該會看到以下輸出。現在，你可以嘗試一下結果：
在上例中，工具提示位置設定在輸入框的頂部。
$(selector, context).tooltip ("action", [params]) 方法
tooltip (action, params) 方法可以對工具提示元素執行操作，例如停用工具提示。action在第一個引數中指定為字串，並且可以根據給定的action選擇性地提供一個或多個params。
基本上，這裡的 action 只是我們可以以字串形式使用的 jQuery 方法。
語法
$(selector, context).tooltip ("action", [params]);
下表列出了此方法的操作 -
| 序號 | 操作和描述 |
|---|---|
| 1 | close()
此操作關閉工具提示。此方法不接受任何引數。 |
| 2 | destroy()
此操作完全移除工具提示功能。這將使元素恢復到其初始化前的狀態。此方法不接受任何引數。 |
| 3 | disable()
此操作停用工具提示。此方法不接受任何引數。 |
| 4 | enable()
此操作啟用工具提示。此方法不接受任何引數。 |
| 5 | open()
此操作以程式設計方式開啟工具提示。此方法不接受任何引數。 |
| 6 | option( optionName )
此操作獲取與工具提示的optionName關聯的值。此方法不接受任何引數。 |
| 7 | option()
此操作獲取一個物件，其中包含表示當前工具提示選項雜湊的鍵值對。此方法不接受任何引數。 |
| 8 | option( optionName, value )
此操作設定與指定的optionName關聯的工具提示選項的值。 |
| 9 | option( options )
此操作設定工具提示的一個或多個選項。 |
| 10 | widget()
此操作返回包含原始元素的jQuery物件。此方法不接受任何引數。 |
示例
現在讓我們看看一個使用上表中操作的示例。以下示例演示了 disable 和 enable 操作的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$("#tooltip-8").tooltip({
//use 'of' to link the tooltip to your specified input
position: { of: '#myInput', my: 'left center', at: 'left center' },
}),
$('#myBtn').click(function () {
$('#tooltip-8').tooltip("open");
});
});
</script>
</head>
<body style = "padding:100px;">
<!-- HTML -->
<a id = "tooltip-8" title = "Message" href = "#"></a>
<input id = "myInput" type = "text" name = "myInput" value = "0" size = "7" />
<input id = "myBtn" type = "submit" name = "myBtn" value = "myBtn" class = "myBtn" />
</body>
</html>
讓我們將上述程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出：
在上例中，點選myBtn按鈕，將彈出工具提示。
工具提示元素的事件管理
除了我們在前面章節中看到的tooltip (options) 方法外，JqueryUI還提供事件方法，這些方法會在特定事件觸發時被觸發。這些事件方法列在下面：
| 序號 | 事件方法和描述 |
|---|---|
| 1 | create(event, ui)
在建立工具提示時觸發。其中event型別為Event，ui型別為Object。 |
| 2 | close(event, ui)
在關閉工具提示時觸發。通常在focusout或mouseleave時觸發。其中event型別為Event，ui型別為Object。 |
| 3 | open(event, ui)
在顯示工具提示時觸發。通常在focusin或mouseover時觸發。其中event型別為Event，ui型別為Object。 |
示例
以下示例演示了在工具提示功能期間事件方法的用法。此示例演示了open和close事件的用法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Tooltip functionality</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->
<script>
$(function() {
$('.tooltip-9').tooltip({
items: 'a.tooltip-9',
content: 'Hello welcome…',
show: "slideDown", // show immediately
open: function(event, ui) {
ui.tooltip.hover(
function () {
$(this).fadeTo("slow", 0.5);
});
}
});
});
$(function() {
$('.tooltip-10').tooltip({
items: 'a.tooltip-10',
content: 'Welcome to TutorialsPoint…',
show: "fold",
close: function(event, ui) {
ui.tooltip.hover(function() {
$(this).stop(true).fadeTo(500, 1);
},
function() {
$(this).fadeOut('500', function() {
$(this).remove();
});
});
}
});
});
</script>
</head>
<body style = "padding:100px;">
<!-- HTML -->
<div id = "target">
<a href = "#" class = "tooltip-9">Hover over me!</a>
<a href = "#" class = "tooltip-10">Hover over me too!</a>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為tooltipexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出：
在上例中，Hover over me!的工具提示會立即消失，而Hover over me too!的工具提示會在1000毫秒後淡出。
jQuery UI - 新增類
本章將討論addClass()方法，它是用於管理jQueryUI視覺效果的方法之一。addClass()方法允許為CSS屬性更改新增動畫效果。
addClass()方法在為所有樣式更改新增動畫效果的同時，將指定的類新增到匹配的元素。
語法
新增到jQueryUI 1.0版本
addClass()方法的基本語法如下：
.addClass( className [, duration ] [, easing ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | className 這是一個包含一個或多個CSS類（用空格分隔）的字串。 |
| 2 | duration 此引數的型別為數字或字串，表示效果的毫秒數。值為0表示元素直接採用新樣式，無需過渡。其預設值為400。 |
| 3 | easing 此引數的型別為字串，表示效果的過渡方式。其預設值為swing。可能的取值請見此處。 |
| 4 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
新增到jQueryUI 1.9版本
在1.9版本中，此方法現在支援children選項，該選項還將為子元素新增動畫效果。
.addClass( className [, options ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | className 這是一個包含一個或多個CSS類（用空格分隔）的字串。 |
| 2 | options 此引數表示所有動畫設定。所有屬性都是可選的。可能的取值如下： |
示例
以下示例演示了addClass()方法的用法。
傳遞單個類
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI addClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button class = "button" id = "add">Add Class</button>
<button class = "button" id = "remove">Remove Class</button>
</body>
</html>
讓我們將上述程式碼儲存在一個名為addclassexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以嘗試不同的結果：
點選Add Class和Remove Class按鈕檢視類對盒子效果的影響。
傳遞多個類
此示例演示如何將多個類傳遞給addClass方法。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI addClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.red { color: red; }
.big { font-size: 5em; }
.spaced { padding: 1em; }
</style>
<script>
$(document).ready(function() {
$('.button-1').click(function() {
$( "#welcome" ).addClass( "red big spaced", 3000 );
});
});
</script>
</head>
<body>
<p id = "welcome">Welcome to Tutorials Point!</p>
<button class = "button-1">Click me</button>
</body>
</html>
讓我們將上述程式碼儲存在一個名為addclassexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以嘗試不同的結果：
jQuery UI - 顏色動畫
jQueryUI擴充套件了一些核心jQuery方法，以便您可以為元素設定不同的動畫過渡效果。其中之一是animate方法。jQueryUI擴充套件了jQuery的animate方法，以新增對顏色動畫的支援。您可以為定義元素顏色的幾種CSS屬性之一新增動畫。以下是animate方法支援的CSS屬性。
語法
以下是jQueryUI animate方法的語法：
$( "#selector" ).animate(
{ backgroundColor: "black",
color: "white"
}
);
您可以在此方法中設定任意數量的屬性，用,（逗號）分隔。
示例
以下示例演示了addClass()方法的用法。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI addClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('#button-1').click(function() {
$('#animTarget').animate({
backgroundColor: "black",
color: "white"
})
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button id = "button-1">Click Me</button>
</body>
</html>
讓我們將上述程式碼儲存在一個名為animateexample.htm的HTML檔案中，並在支援javascript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以嘗試不同的結果：
點選按鈕，檢視盒子的動畫變化。
jQuery UI - 效果
本章將討論effect()方法，它是用於管理jQueryUI視覺效果的方法之一。effect()方法將動畫效果應用於元素，而無需顯示或隱藏它。
語法
effect()方法具有以下語法：
.effect( effect [, options ] [, duration ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | effect 這是一個字串，指示要用於過渡的效果。 |
| 2 | options 這是一個物件，指示特定於效果的設定和緩動函式。此外，每個效果都有自己的一組選項，這些選項可以在表jQueryUI Effects中描述的多個效果中指定。 |
| 3 | duration 此引數的型別為數字或字串，表示效果的毫秒數。其預設值為400。 |
| 4 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
jQueryUI 效果
下表描述了可與effects()方法一起使用的各種效果：
| 序號 | 效果及描述 |
|---|---|
| 1 | blind 以百葉窗的方式顯示或隱藏元素：透過上下移動下邊緣或左右移動右邊緣，具體取決於指定的direction和mode。 |
| 2 | bounce 使元素在垂直或水平方向上看起來像反彈一樣，可以選擇顯示或隱藏元素。 |
| 3 | clip 透過將元素的相對邊框移動到一起直到它們在中間相遇，或反過來顯示或隱藏元素。 |
| 4 | drop 透過使元素看起來像掉到頁面上或從頁面上掉下來來顯示或隱藏它。 |
| 5 | explode 透過將其分割成多個在徑向方向上移動的碎片來顯示或隱藏元素，就好像內爆到頁面上或從頁面上爆炸一樣。 |
| 6 | fade 透過調整其不透明度來顯示或隱藏元素。這與核心淡入淡出效果相同，但沒有選項。 |
| 7 | fold 透過調整進出相對邊框，然後對另一組邊框執行相同的操作來顯示或隱藏元素。 |
| 8 | highlight 透過暫時更改其背景顏色來引起對元素的注意，同時顯示或隱藏元素。 |
| 9 | puff 在調整其不透明度的同時，在適當位置擴充套件或收縮元素。 |
| 10 | pulsate 在確保元素按指定顯示或隱藏之前，開啟和關閉元素的不透明度。 |
| 11 | scale 按指定百分比擴充套件或收縮元素。 |
| 12 | shake 在垂直或水平方向上前後搖動元素。 |
| 13 | size 將元素調整為指定的寬度和高度。類似於scale，但目標大小的指定方式不同。 |
| 14 | slide 移動元素，使其看起來像滑到頁面上或從頁面上滑開。 |
| 15 | transfer 此方法會建立一個短暫的輪廓元素動畫效果，使元素看起來像轉移到另一個元素。輪廓元素的外觀必須透過 CSS 規則為 ui-effects-transfer 類定義，或者透過選項指定類。 |
示例
下面的例子演示了使用effect()方法以及上表中列出的不同效果。
效果 - 抖動 (Shake)
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI effect Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#box-1 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-1').click(function() {
$( "#box-1" ).effect( "shake", {
times: 10,
distance: 100
}, 3000, function() {
$( this ).css( "background", "#cccccc" );
});
});
});
</script>
</head>
<body>
<div id = "box-1">Click On Me</div>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為effectexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你應該會看到以下輸出。現在，你可以嘗試修改結果 -
效果 - 爆炸 (explode)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI effect Example</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
#box-2 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-2').click(function() {
$( "#box-2" ).effect({
effect: "explode",
easing: "easeInExpo",
pieces: 4,
duration: 5000
});
});
});
</script>
</head>
<body>
<div id="box-2"></div>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為effectexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
jQuery UI - 隱藏
本章將討論hide()方法，這是用於管理 jQueryUI 視覺效果的方法之一。effect() 方法應用動畫效果來隱藏元素。
語法
hide() 方法具有以下語法：
.hide( effect [, options ] [, duration ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | effect 這是一個字串，指示要用於過渡的效果。 |
| 2 | options 這是一個物件，指示特定於效果的設定和緩動函式。此外，每個效果都有自己的一組選項，這些選項可以在表jQueryUI Effects中描述的多個效果中指定。 |
| 3 | duration 此引數的型別為數字或字串，表示效果的毫秒數。其預設值為400。 |
| 4 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
jQueryUI 效果
下表描述了可與hide()方法一起使用的各種效果：
| 序號 | 效果及描述 |
|---|---|
| 1 | blind 以百葉窗的方式顯示或隱藏元素：透過上下移動下邊緣或左右移動右邊緣，具體取決於指定的direction和mode。 |
| 2 | bounce 使元素在垂直或水平方向上看起來像反彈一樣，可以選擇顯示或隱藏元素。 |
| 3 | clip 透過將元素的相對邊框移動到一起直到它們在中間相遇，或反過來顯示或隱藏元素。 |
| 4 | drop 透過使元素看起來像掉到頁面上或從頁面上掉下來來顯示或隱藏它。 |
| 5 | explode 透過將其分割成多個在徑向方向上移動的碎片來顯示或隱藏元素，就好像內爆到頁面上或從頁面上爆炸一樣。 |
| 6 | fade 透過調整其不透明度來顯示或隱藏元素。這與核心淡入淡出效果相同，但沒有選項。 |
| 7 | fold 透過調整進出相對邊框，然後對另一組邊框執行相同的操作來顯示或隱藏元素。 |
| 8 | highlight 透過暫時更改其背景顏色來引起對元素的注意，同時顯示或隱藏元素。 |
| 9 | puff 在調整其不透明度的同時，在適當位置擴充套件或收縮元素。 |
| 10 | pulsate 在確保元素按指定顯示或隱藏之前，開啟和關閉元素的不透明度。 |
| 11 | scale 按指定百分比擴充套件或收縮元素。 |
| 12 | shake 在垂直或水平方向上前後搖動元素。 |
| 14 | size 將元素調整為指定的寬度和高度。類似於scale，但目標大小的指定方式不同。 |
| 15 | slide 移動元素，使其看起來像滑到頁面上或從頁面上滑開。 |
| 16 | transfer 此方法會建立一個短暫的輪廓元素動畫效果，使元素看起來像轉移到另一個元素。輪廓元素的外觀必須透過 CSS 規則為 ui-effects-transfer 類定義，或者透過選項指定類。 |
示例
下面的例子演示了使用hide()方法以及上表中列出的不同效果。
效果 - 垂直百葉窗 (Blind)
以下示例演示了使用hide()方法和blind效果。點選Blind Effect Hide按鈕，檢視元素隱藏前的垂直百葉窗效果。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI hide Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為hideexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你應該會看到以下輸出。現在，你可以嘗試修改結果 -
效果 - 抖動 (Shake)
以下示例演示了使用shake()方法和blind效果。點選Shake Effect Hide按鈕，檢視元素隱藏前的抖動效果。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI hide Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler-1 { width: 500px; height: 200px; }
#button-1 { padding: .5em 1em; text-decoration: none; }
#effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
$( "#button-1" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler-1">
<div id = "effect-1" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為hideexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
jQuery UI - 移除類
本章將討論removeClass()方法，這是用於管理 jQueryUI 視覺效果的方法之一。removeClass() 方法從元素中移除應用的類。
removeClass() 方法在動畫化所有樣式更改的同時，從匹配的元素中移除指定的類。
語法
新增到jQueryUI 1.0版本
removeClass() 方法的基本語法如下：
.removeClass( className [, duration ] [, easing ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | className 這是一個字串，包含一個或多個要移除的 CSS 類（用空格分隔）。 |
| 2 | duration 此引數的型別為數字或字串，表示效果的毫秒數。值為0表示元素直接採用新樣式，無需過渡。其預設值為400。 |
| 3 | easing 此引數的型別為字串，表示效果的過渡方式。其預設值為swing。可能的取值請見此處。 |
| 4 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
新增到jQueryUI 1.9版本
在1.9版本中，此方法現在支援children選項，該選項還將為子元素新增動畫效果。
.removeClass( className [, options ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | className 這是一個包含一個或多個CSS類（用空格分隔）的字串。 |
| 2 |
options 此引數表示所有動畫設定。所有屬性都是可選的。可能的取值如下： |
示例
以下示例演示了removeClass()方法的使用。
傳遞單個類
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI removeClass Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.elemClass {
width: 200px;
height: 50px;
background-color: #b9cd6d;
}
.myClass {
font-size: 40px; background-color: #ccc; color: white;
}
</style>
<script type = "text/javascript">
$(document).ready(function() {
$('.button').click(function() {
if (this.id == "add") {
$('#animTarget').addClass("myClass", "fast")
} else {
$('#animTarget').removeClass("myClass", "fast")
}
})
});
</script>
</head>
<body>
<div id = animTarget class = "elemClass">
Hello!
</div>
<button class = "button" id = "add">Add Class</button>
<button class = "button" id = "remove">Remove Class</button>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為removeclassexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
點選Add Class和Remove Class按鈕檢視類對盒子效果的影響。
jQuery UI - 顯示
本章將討論show()方法，這是用於管理 jQueryUI 視覺效果的方法之一。show() 方法使用指示的效果顯示專案。
show() 方法使用指定的效果切換包裝元素的可見性。
語法
show() 方法具有以下語法：
.show( effect [, options ] [, duration ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | effect 這是一個字串，指示要用於轉換的效果。這是一個字串，表示在調整元素可見性時要使用的效果。下表列出了這些效果。 |
| 2 | options 這是一個物件，指示特定於效果的設定和緩動函式。此外，每個效果都有自己的一組選項，這些選項可以在表jQueryUI Effects中描述的多個效果中指定。 |
| 3 | duration 這是一個數字或字串型別，決定動畫執行的時長。其預設值為400。 |
| 4 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
jQueryUI 效果
下表描述了可與effects()方法一起使用的各種效果：
| 序號 | 效果及描述 |
|---|---|
| 1 | blind 以百葉窗的方式顯示或隱藏元素：透過上下移動下邊緣或左右移動右邊緣，具體取決於指定的direction和mode。 |
| 2 | bounce 使元素在垂直或水平方向上看起來像反彈一樣，可以選擇顯示或隱藏元素。 |
| 3 | clip 透過將元素的相對邊框移動到一起直到它們在中間相遇，或反過來顯示或隱藏元素。 |
| 4 | drop 透過使元素看起來像掉到頁面上或從頁面上掉下來來顯示或隱藏它。 |
| 5 | explode 透過將其分割成多個在徑向方向上移動的碎片來顯示或隱藏元素，就好像內爆到頁面上或從頁面上爆炸一樣。 |
| 6 | fade 透過調整其不透明度來顯示或隱藏元素。這與核心淡入淡出效果相同，但沒有選項。 |
| 7 | fold 透過調整進出相對邊框，然後對另一組邊框執行相同的操作來顯示或隱藏元素。 |
| 8 | highlight 透過暫時更改其背景顏色來引起對元素的注意，同時顯示或隱藏元素。 |
| 9 | puff 在調整其不透明度的同時，在適當位置擴充套件或收縮元素。 |
| 10 | pulsate 在確保元素按指定顯示或隱藏之前，開啟和關閉元素的不透明度。 |
| 11 | scale 按指定百分比擴充套件或收縮元素。 |
| 12 | shake 在垂直或水平方向上前後搖動元素。 |
| 13 | size 將元素調整為指定的寬度和高度。類似於scale，但目標大小的指定方式不同。 |
| 14 | slide 移動元素，使其看起來像滑到頁面上或從頁面上滑開。 |
| 15 | transfer 此方法會建立一個短暫的輪廓元素動畫效果，使元素看起來像轉移到另一個元素。輪廓元素的外觀必須透過 CSS 規則為 ui-effects-transfer 類定義，或者透過選項指定類。 |
示例
以下示例演示了show()方法的使用。
帶抖動效果的顯示 (Show with Shake Effect)
以下示例演示了使用show()方法和shake效果。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI show Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// run the effect
$( "#effect" ).show( "shake", {times: 10,distance: 100}, 1000, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Show</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為showexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
點選Add Class和Remove Class按鈕檢視類對盒子效果的影響。
帶垂直百葉窗效果的顯示 (Show with Blind Effect)
以下示例演示了使用show()方法和blind效果。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI show Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
// run the currently selected effect
function runEffect() {
// run the effect
$( "#effect" ).show( "blind", {times: 10,distance: 100}, 1000, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
}, 1000 );
};
// set effect from select menu value
$( "#button" ).click(function() {
runEffect();
return false;
});
$( "#effect" ).hide();
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Show</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Run Effect</a>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為showexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
jQuery UI - 切換類
本章將討論switchClass()方法，這是一個用於操作類的有用方法。switchClass() 方法從一個 CSS 類切換到另一個 CSS 類，併為從一種狀態到另一種狀態的轉換製作動畫。
語法
新增到jQueryUI 1.0版本
switchClass() 方法的基本語法如下：
.switchClass( removeClassName, addClassName [, duration ] [, easing ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | removeClassName 這是一個字串，表示要移除的 CSS 類名，或用空格分隔的類名列表。 |
| 2 | addClassName 這是一個字串型別，表示要新增到每個匹配元素的 class 屬性的一個或多個類名（用空格分隔）。 |
| 3 | duration 這是一個數字或字串型別，可以選擇提供slow、normal、fast之一，或者以毫秒為單位的效果持續時間。如果省略，則 animate() 方法確定預設值。其預設值為400。 |
| 4 | easing 要傳遞給 animate() 方法的緩動函式的名稱。 |
| 5 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
新增到jQueryUI 1.9版本
在1.9版本中，此方法現在支援children選項，該選項還將為子元素新增動畫效果。
.switchClass( removeClassName, addClassName [, options ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | removeClassName 這是一個字串，表示要移除的 CSS 類名，或用空格分隔的類名列表。 |
| 2 | addClassName 這是一個字串型別，表示要新增到每個匹配元素的 class 屬性的一個或多個類名（用空格分隔）。 |
| 3 |
options 此引數表示所有動畫設定。所有屬性都是可選的。可能的取值如下： |
示例
以下示例演示了switchClass()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.LargeClass {
font-family: Arial;
font-size: large;
font-weight: bold;
color: Red;
}
.NormalClass {
font-family: Arial;
font-size: small;
font-weight: bold;
color: Blue;
}
</style>
<script>
$(function() {
$('#btnSwitch').click(function() {
$(".NormalClass").switchClass("NormalClass","LargeClass",'fast');
$(".LargeClass").switchClass("LargeClass","NormalClass",'fast');
return false;
});
});
</script>
</head>
<body>
<div class = "NormalClass">
Tutorials Point Rocks!!!
</div>
<div class = "NormalClass">
Welcome to Tutorials Point!!!
</div>
<br />
<input type = "button" id = "btnSwitch" value = "Switch Class" />
</body>
</html>
讓我們將上面的程式碼儲存在一個名為switchclassexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
點選Switch Class按鈕，檢視類對框的影響。
jQuery UI - 切換
本章將討論 jQueryUI 視覺效果的toggle()方法。toggle() 方法根據元素是否隱藏來切換 show() 或 hide() 方法。
語法
toggle() 方法具有以下語法：
.toggle( effect [, options ] [, duration ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | effect 這是一個字串，指示要用於轉換的效果。這是一個字串，表示在調整元素可見性時要使用的效果。下表列出了這些效果。 |
| 2 | options 這是一個物件，指示特定於效果的設定和緩動函式。此外，每個效果都有自己的一組選項，這些選項可以在表jQueryUI Effects中描述的多個效果中指定。 |
| 3 | duration 這是一個數字或字串型別，決定動畫執行的時長。其預設值為400。 |
| 4 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
jQueryUI 效果
下表描述了可與effects()方法一起使用的各種效果：
| 序號 | 效果及描述 |
|---|---|
| 1 | blind 以百葉窗的方式顯示或隱藏元素：透過上下移動下邊緣或左右移動右邊緣，具體取決於指定的direction和mode。 |
| 2 | bounce 使元素在垂直或水平方向上看起來像反彈一樣，可以選擇顯示或隱藏元素。 |
| 3 | clip 透過將元素的相對邊框移動到一起直到它們在中間相遇，或反過來顯示或隱藏元素。 |
| 4 | drop 透過使元素看起來像掉到頁面上或從頁面上掉下來來顯示或隱藏它。 |
| 5 | explode 透過將其分割成多個在徑向方向上移動的碎片來顯示或隱藏元素，就好像內爆到頁面上或從頁面上爆炸一樣。 |
| 6 | fade 透過調整其不透明度來顯示或隱藏元素。這與核心淡入淡出效果相同，但沒有選項。 |
| 7 | fold 透過調整進出相對邊框，然後對另一組邊框執行相同的操作來顯示或隱藏元素。 |
| 8 | highlight 透過暫時更改其背景顏色來引起對元素的注意，同時顯示或隱藏元素。 |
| 9 | puff 在調整其不透明度的同時，在適當位置擴充套件或收縮元素。 |
| 10 | pulsate 在確保元素按指定顯示或隱藏之前，開啟和關閉元素的不透明度。 |
| 11 | scale 按指定百分比擴充套件或收縮元素。 |
| 12 | shake 在垂直或水平方向上前後搖動元素。 |
| 13 | size 將元素調整為指定的寬度和高度。類似於scale，但目標大小的指定方式不同。 |
| 14 | slide 移動元素，使其看起來像滑到頁面上或從頁面上滑開。 |
| 15 | transfer 此方法會建立一個短暫的輪廓元素動畫效果，使元素看起來像轉移到另一個元素。輪廓元素的外觀必須透過 CSS 規則為 ui-effects-transfer 類定義，或者透過選項指定類。 |
示例
以下示例演示了使用toggle()方法以及上表中列出的不同效果。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Toggle Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect" ).toggle('explode', 300);
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Toggle</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Toggle</a>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為toggleexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
點選切換按鈕，檢視類是如何顯示和隱藏的。
jQuery UI - 切換類
本章將討論toggleClass()方法，這是一個用於操作類的有用方法。toggleClass() 方法向匹配元素集中每個元素新增或移除一個或多個類。
語法
新增到 jQueryUI 1.0 版本中
toggleClass() 方法的基本語法如下：
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | className 這是一個字串，表示要新增、移除或切換的 CSS 類名，或用空格分隔的類名列表。 |
| 2 | switch 這是一個布林值型別，如果指定，則強制toggleClass()方法在為true時新增類，或在為false時移除類。 |
| 3 | duration 這是一個數字或字串型別，可以選擇提供slow、normal、fast之一，或者以毫秒為單位的效果持續時間。如果省略，則 animate() 方法確定預設值。其預設值為400。 |
| 4 | easing 要傳遞給 animate() 方法的緩動函式的名稱。 |
| 5 | complete 此引數是一個回撥方法，在該元素的效果完成時為每個元素呼叫。 |
新增到jQueryUI 1.9版本
在1.9版本中，此方法現在支援children選項，該選項還將為子元素新增動畫效果。
.toggleClass( className [, switch ] [, options ] )
| 序號 | 引數及描述 |
|---|---|
| 1 | className 這是一個字串，表示要新增、移除或切換的 CSS 類名，或用空格分隔的類名列表。 |
| 2 | switch 這是一個布林值型別，如果指定，則強制toggleClass()方法在為true時新增類，或在為false時移除類。 |
| 3 | options 此引數表示所有動畫設定。所有屬性都是可選的。可能的取值如下： |
示例
以下示例演示了toggleClass()方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI Switch Class Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.class1 {
border-width : 10px;
border-color : grey;
background-color : #cedc98;
color : black;
}
</style>
<script>
function toggle () {
$("#para").toggleClass ("class1", 1000);
}
</script>
</head>
<body>
<button onclick = toggle()> Toggle </button>
<p id = "para" style = border-style:solid> Welcome to Tutorials Point </p>
</body>
</html>
讓我們將上面的程式碼儲存在一個名為toggleclassexample.htm的 HTML 檔案中，並在支援 JavaScript 的標準瀏覽器中開啟它，你同樣應該會看到以下輸出。現在，你可以嘗試修改結果 -
點選Toggle按鈕，檢視文字的 CSS 類是如何變化的。
jQuery UI - 定位
本章我們將瞭解 jQueryUI 的一個實用方法，即position()方法。position()方法允許你相對於另一個元素或滑鼠事件來定位元素。
jQuery UI 擴充套件了 jQuery 核心中的 .position() 方法，使你可以像自然地向他人描述一樣描述你想要如何定位元素。無需使用數字和數學計算，你可以使用有意義的詞語（如左和右）和關係。
語法
以下是position()方法的語法：
.position( options )
其中options是物件型別，提供指定如何定位包裝集元素的資訊。下表列出了可與此方法一起使用的不同options：
| 序號 | 選項及描述 |
|---|---|
| 1 | my
此選項指定要與目標元素或位置對齊的包裝元素（正在重新定位的元素）的位置。其預設值為center。 |
| 2 | at
此選項是字串型別，指定要與其對齊重新定位元素的目標元素的位置。採用與my選項相同的取值。其預設值為center。 |
| 3 | of
這是一個選擇器、元素、jQuery 或事件型別。它標識要與其重新定位包裝元素的目標元素，或包含要用作目標位置的滑鼠座標的事件例項。其預設值為null。 |
| 4 | collision
此選項是字串型別，指定在定位元素在任何方向上超出視窗時要應用的規則。其預設值為flip。 |
| 5 | 使用
此選項是一個函式，它替換了更改元素位置的內部函式。對於每個包裝的元素，都會呼叫該函式一次，引數是一個物件雜湊，其中left和top屬性設定為計算出的目標位置，函式上下文設定為該元素。預設值為null。 |
| 6 | 在…之內
此選項是一個選擇器、元素或 jQuery 元素，允許您指定哪個元素用作碰撞檢測的邊界框。如果您需要將定位元素包含在頁面特定區域內，這將非常有用。預設值為window。 |
示例
以下示例演示了position方法的使用。
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI position method Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.positionDiv {
position: absolute;
width: 75px;
height: 75px;
background: #b9cd6d;
}
#targetElement {
width: 300px;
height: 500px;
padding-top:50px;
}
</style>
<script>
$(function() {
// Position the dialog offscreen to the left, but centered vertically
$( "#position1" ).position({
my: "center",
at: "center",
of: "#targetElement"
});
$( "#position2" ).position({
my: "left top",
at: "left top",
of: "#targetElement"
});
$( "#position3" ).position({
my: "right-10 top+10",
at: "right top",
of: "#targetElement"
});
$( document ).mousemove(function( event ) {
$( "#position4" ).position({
my: "left+3 bottom-3",
of: event,
collision: "fit"
});
});
});
</script>
</head>
<body>
<div id = "targetElement">
<div class = "positionDiv" id = "position1">Box 1</div>
<div class = "positionDiv" id = "position2">Box 2</div>
<div class = "positionDiv" id = "position3">Box 3</div>
<div class = "positionDiv" id = "position4">Box 4</div>
</div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為positionmethodexample.htm的HTML檔案中，並在支援JavaScript的標準瀏覽器中開啟它，您應該看到以下輸出。現在，您可以試著修改結果了−
在這個例子中，我們看到−
jQuery UI - 小部件工廠
早期，在jQuery中編寫自定義控制元件的唯一方法是擴充套件$.fn名稱空間。這對於簡單的部件很有效。假設您構建更多有狀態的部件，它很快就會變得很麻煩。為了幫助構建部件，jQuery UI中引入了部件工廠，它消除了通常與管理部件相關的許多樣板程式碼。
jQuery UI部件工廠只是一個函式 ($.widget)，它接受一個字串名稱和一個物件作為引數，並建立一個jQuery外掛和一個“類”來封裝其功能。
語法
以下是jQuery UI部件工廠方法的語法−
jQuery.widget( name [, base ], prototype )
name − 它是一個字串，包含要建立的部件的名稱空間和部件名稱（用點分隔）。
base − 要從中繼承的基部件。這必須是一個可以使用`new`關鍵字例項化的建構函式。預設為jQuery.Widget。
prototype − 用作要從中繼承的部件原型的物件。例如，jQuery UI有一個“滑鼠”外掛，其餘的互動外掛都是基於它的。為了實現這一點，draggable、droppable等都像這樣從滑鼠外掛繼承：jQuery.widget( "ui.draggable", $.ui.mouse, {...} ); 如果您不提供此引數，則部件將直接從“基部件”jQuery.Widget繼承（注意小寫“w”jQuery.widget和大寫“W”jQuery.Widget之間的區別）。
基部件
基部件是部件工廠使用的部件。
選項
下表列出了可與基部件一起使用的不同選項−
| 序號 | 選項及描述 |
|---|---|
| 1 | disabledhide
如果設定為true，此選項將停用部件。預設值為false。 |
| 2 | hide
此選項確定如何動畫隱藏元素。預設值為null。 |
| 3 | 顯示
此選項確定如何動畫顯示元素。預設值為null。 |
方法
下表列出了可與基部件一起使用的不同方法−
| 序號 | 操作和描述 |
|---|---|
| 1 | _create()
此方法是部件的建構函式。沒有引數，但this.element和this.options已設定。 |
| 2 | _delay( fn [, delay ] )
此方法在指定的延遲後呼叫提供的函式。返回用於clearTimeout()的超時 ID。 |
| 3 | _destroy()
公共的destroy()方法清理所有公共資料、事件等，然後委託給此_destroy()方法進行自定義的、特定於部件的清理。 |
| 4 | _focusable( element )
此方法設定元素以在聚焦時應用ui-state-focus類。事件處理程式會在銷燬時自動清理。 |
| 5 | _getCreateEventData()
所有部件都會觸發create事件。預設情況下，事件中不提供資料，但此方法可以返回一個物件，該物件將作為create事件的資料傳遞。 |
| 6 | _getCreateOptions()
此方法允許部件定義一個自定義方法，用於在例項化期間定義選項。使用者提供的選項會覆蓋此方法返回的選項，而此方法又會覆蓋預設選項。 |
| 7 | _hide( element, option [, callback ] )
此方法使用內建動畫方法或自定義效果立即隱藏元素。有關可能的選項值，請參見hide選項。 |
| 8 | _hoverable( element )
此方法設定元素以在懸停時應用ui-state-hover類。事件處理程式會在銷燬時自動清理。 |
| 9 | _init()
任何時候，當外掛沒有引數或只有一個選項雜湊呼叫時，部件都會被初始化；這包括建立部件時。 |
| 10 | _off( element, eventName )
此方法取消繫結指定元素的事件處理程式。 |
| 11 | _on( [suppressDisabledCheck ] [, element ], handlers )
將事件處理程式繫結到指定的元素。透過事件名稱內的選擇器支援委託，例如“click .foo”。 |
| 12 | _setOption( key, value )
此方法從_setOptions()方法為每個單獨的選項呼叫。應根據更改更新部件狀態。 |
| 13 | _setOptions( options )
無論option()方法呼叫的形式如何，只要呼叫option()方法，就會呼叫此方法。 |
| 14 | _show( element, option [, callback ] )
使用內建動畫方法或自定義效果立即顯示元素。有關可能的選項值，請參見show選項。 |
| 15 | _super( [arg ] [, ... ] )
此方法使用任何指定的引數呼叫父部件中同名的方法。基本上是.call()。 |
| 16 | _superApply( arguments )
使用引數陣列呼叫父部件中同名的方法。 |
| 17 | _trigger( type [, event ] [, data ] )
此方法觸發事件及其關聯的回撥。名稱等於type的選項將作為回撥呼叫。 |
| 18 | destroy()
此方法完全刪除部件功能。這將使元素恢復到其初始化前的狀態。 |
| 19 | disable()
此方法停用部件。 |
| 20 | enable()
此方法啟用部件。 |
| 21 | option( optionName )
此方法獲取當前與指定的optionName關聯的值。 |
| 22 | option()
此方法獲取一個物件，其中包含表示當前部件選項雜湊的鍵/值對。 |
| 23 | option( optionName, value )
此方法設定與指定的optionName關聯的部件選項的值。 |
| 24 | option( options )
此方法設定部件的一個或多個選項。 |
| 25 | widget()
此方法返回一個jQuery物件，其中包含原始元素或其他相關的生成元素。 |
事件
| 序號 | 事件方法和描述 |
|---|---|
| 1 | create( event, ui )
建立部件時會觸發此事件。 |
jQuery UI部件工廠生命週期
jQuery UI部件工廠提供了一種面向物件的方式來管理部件的生命週期。這些生命週期活動包括−
建立和銷燬部件：例如，
$( "#elem" ).progressbar();
更改部件選項：例如
$( "#elem" ).progressbar({ value: 20 });
在子類部件中進行“super”呼叫：例如
$( "#elem" ).progressbar( "value" ); or $( "#elem" ).progressbar( "value", 40 );
事件通知：例如
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});
示例
現在讓我們在下面的例子中建立一個自定義部件。我們將建立一個按鈕部件。在下面的例子中，我們將看到如何在部件中建立選項、方法和事件−
建立自定義部件
讓我們首先建立一個簡單的自定義部件。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI Widget - Default functionality</title>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$.widget("iP.myButton", {
_create: function() {
this._button = $("<button>");
this._button.text("My first Widget Button");
this._button.width(this.options.width)
this._button.css("background-color", this.options.color);
this._button.css("position", "absolute");
this._button.css("left", "100px");
$(this.element).append(this._button);
},
});
$("#button1").myButton();
});
</script>
</head>
<body>
<div id = "button1"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為widgetfactoryexample.htm的HTML檔案中，並在支援JavaScript的標準瀏覽器中開啟它，您應該看到以下輸出−
向自定義部件新增選項
在前面的示例中，我們使用_create函式來建立自定義控制元件。但是使用者通常希望透過設定和修改選項來自定義控制元件。我們可以定義一個選項物件，該物件儲存您定義的所有選項的預設值。為此目的使用_setOption函式。它會為使用者設定的每個單獨選項呼叫。在這裡，我們設定按鈕的width和background-color。
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI Widget - Default functionality</title>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$.widget("iP.myButton", {
_create: function() {
this._button = $("<button>");
this._button.text("My first Widget Button");
this._button.width(this.options.width)
this._button.css("background-color", this.options.color);
this._button.css("position", "absolute");
this._button.css("left", "100px");
$(this.element).append(this._button);
},
_setOption: function(key, value) {
switch (key) {
case "width":
this._button.width(value);
break;
case "color":
this._button.css("background-color",value);
break;
}
},
});
$("#button2").myButton();
$("#button2").myButton("option", {width:100,color:"#cedc98"});
});
</script>
</head>
<body>
<div id = "button2"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為widgetfactoryexample.htm的HTML檔案中，並在支援JavaScript的標準瀏覽器中開啟它，您應該看到以下輸出−
向自定義部件新增方法
在下面的示例中，我們將新增使用者可以使用的可以輕鬆構建到框架中的方法。我們將編寫一個Move方法，它將按鈕移動指定的水平距離。為了使此方法有效，我們還需要在_create函式中設定position和left屬性−
this._button.css("position", "absolute");
this._button.css("left", "100px");
此後，使用者現在可以按照通常的jQuery UI方式呼叫您的方法−
this._button.css("position", "absolute");
this._button.css("left", "100px");
$("button3").myButton("move", 200);
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI Widget - Default functionality</title>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$.widget("iP.myButton", {
_create: function() {
this._button = $("<button>");
this._button.text("My first Widget Button");
this._button.width(this.options.width)
this._button.css("background-color", this.options.color);
this._button.css("position", "absolute");
this._button.css("left", "100px");
$(this.element).append(this._button);
},
move: function(dx) {
var x = dx + parseInt(this._button.css("left"));
this._button.css("left", x);
if(x>400) { this._trigger("outbounds",{}, {position:x}); }
}
});
$("#button3").myButton();
$("#button3").myButton("move", 200);
});
</script>
</head>
<body>
<div id = "button3"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為widgetfactoryexample.htm的HTML檔案中，並在支援JavaScript的標準瀏覽器中開啟它，您應該看到以下輸出−
向自定義部件新增事件
在這個例子中，我們將演示如何建立一個事件。要建立事件，您只需使用_trigger方法。第一個引數是事件的名稱，第二個是您想要傳遞的任何標準事件物件，第三個是您想要傳遞的任何自定義事件物件。
如果按鈕移動到x=400以外，我們在這裡觸發一個事件。您只需新增到move函式中−
if(x<400) { this._trigger("outbounds",{}, {position:x}); }
在這種情況下，事件被稱為outbounds，並傳遞一個空事件物件和一個自定義事件物件，該物件僅將其位置作為其唯一屬性。
整個move函式是−
move: function(dx) {
var x = dx + parseInt(this._button.css("left"));
this._button.css("left", x);
if(x<400) { this._trigger("outbounds",{}, {position:x}); }
}
使用者可以透過簡單地定義同名選項來設定事件處理函式。
$("button4").myButton("option", {
width: 100,
color: "red",
outbounds:function(e,ui) {
alert(ui.position);}
});
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>jQuery UI Widget - Default functionality</title>
<link rel = "stylesheet" href = "//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$.widget("iP.myButton", {
_create: function() {
this._button = $("<button>");
this._button.text("My first Widget Button");
this._button.width(this.options.width)
this._button.css("background-color", this.options.color);
this._button.css("position", "absolute");
this._button.css("left", "100px");
$(this.element).append(this._button);
},
move: function(dx) {
var x = dx + parseInt(this._button.css("left"));
this._button.css("left", x);
if(x>400) { this._trigger("outbounds",{}, {position:x}); }
}
});
$("#button4").myButton();
$("#button4").on("mybuttonoutbounds", function(e, ui) {
alert("out");
});
$("#button4").myButton("move", 500);
});
</script>
</head>
<body>
<div id = "button4"></div>
</body>
</html>
讓我們將上述程式碼儲存在一個名為widgetfactoryexample.htm的HTML檔案中，並在支援JavaScript的標準瀏覽器中開啟它，將會彈出一個警報框。