JQuery UI
Template:Lowercase package.lua第80行Lua錯誤：module 'Module:Arguments' not found
頁面Module:Infobox/styles.css沒有內容。
| 腳本錯誤：沒有「InfoboxImage」這個模塊。 | |
| 腳本錯誤：沒有「InfoboxImageVariant」這個模塊。 | |
| 開發者 | 頁面Template:Plainlist/styles.css沒有內容。
|
|---|---|
| 當前版本 | Template:LSR/wikidata |
| 原始碼庫 | 頁面Template:Plainlist/styles.css沒有內容。 |
| 編程語言 | JavaScript |
| 引擎 | 頁面Template:Plainlist/styles.css沒有內容。
|
| 類型 | 插件 |
| 許可協議 | MIT許可證[2] |
| 網站 | https://jqueryui.com/ |
| 腳本錯誤：沒有「Template wrapper」這個模塊。 | |
腳本錯誤：沒有「Check for unknown parameters」這個模塊。
jQuery UI是一套JavaScript 函式庫，提供抽象化、可自訂主題的GUI控制項與動畫效果。基於jQuery JavaScript函式庫，可用來建構互動式的互聯網應用程式。在2007年9月約翰·雷西格於jquery.com部落格裏的一篇文章裏正式公諸於世[3]。最新的版本需要jQuery 2.1.1或更新的版本。[4]
功能[編輯]
以1.9.0版本為例[5]。
互動[編輯]
- 拖曳（Draggable）–讓元素可以用滑鼠拖曳。
- 拖放（Droppable）–讓控制項可以接受其他拖曳進來的元素。
- 調整大小（Resizable）–讓元素可以調整大小[6]。
- 選取（Selectable）–提供進階的大量元素選擇功能。
- 排序（Sortable）–讓列表可以更容易排序。
控制項[編輯]
jQuery UI的所有控制項都能自訂主題樣式[7]。
- 手風琴式選單（Accordion）–如手風琴般可伸縮的控制項。
- 自動完成（Autocomplete）–根據使用者的輸入來自動完成文字欄。
- 按鈕（Button）–增強按鈕外觀，將單選與複選控制項轉變成按鈕型式。
- 日期選擇器（Datepicker）–進階的日期選擇工具。
- 對話框（Dialog） –在頁面最上層顯示對話框。
- 選單（Menu） - 顯示多階層式的選單。
- 進度條（Progressbar） –動態與靜態的進度指示條。
- 滑動條（Slider）–完全可以自訂的滑動條與各種功能[8]。
- 微調選擇器（Spinner） - 上下控制的數字微調輸入欄。
- 頁籤（Tabs）–頁籤切換控制項，可以內嵌或動態載入內容。
- 工具提示（Tooltip） - 彈出式提示框。
效果[編輯]
- 顏色動畫（Color Animation）–產生顏色轉變的動畫效果。
- 切換Class、新增Class、移除Class、開關Class –讓頁面上元素樣式轉變時有動畫效果。
- 效果（Effects）–各種效果（顯示、下拉、爆炸、淡入等等）。
- 切換（Toggle）–切換效果開關。
- 隱藏、顯示 - 使用上述的效果。
工具[編輯]
- 位置（Position） –根據另一個元素來設定目標元素的位置（對齊）。
範例[編輯]
// 讓#draggable可以拖曳
$(function() {
$("#draggable").draggable();
});
<div id="draggable" style="width:150px;height:150px;padding:0.5em" class="ui-widget-content">
<p>Drag me around</p>
</div>
這段程式碼會讓使用者的滑鼠游標可以拖曳ID為「draggable」的DIV元素。