JQuery UI：修订间差异
删除的内容 添加的内容
无编辑摘要 |
→功能： 內容擴充 |
||
| 第21行： | 第21行： | ||
== 功能 == |
== 功能 == |
||
以 1. |
以 1.9.0 版本為例<ref>{{cite web| url = http://jqueryui.com/demos/| title = jQuery UI Demos |accessdate=14 October 2012|publisher=jQuery UI}}</ref>。 |
||
=== 互動 === |
=== 互動 === |
||
* '''拖曳（Draggable）''' – 讓元素可以用滑鼠拖曳。 |
* '''拖曳（Draggable）''' – 讓元素可以用滑鼠拖曳。 |
||
| 第35行： | 第35行： | ||
* '''日期選擇器（Datepicker）''' – 進階的日期選擇工具。 |
* '''日期選擇器（Datepicker）''' – 進階的日期選擇工具。 |
||
* '''對話框（Dialog）''' –在頁面最上層顯示對話框。 |
* '''對話框（Dialog）''' –在頁面最上層顯示對話框。 |
||
* '''選單（Menu）''' - 顯示多階層式的選單。 |
|||
* '''進度條（Progressbar）''' – 動態與靜態的進度指示條。 |
* '''進度條（Progressbar）''' – 動態與靜態的進度指示條。 |
||
* '''滑動條（Slider）''' – 完全可以自訂的滑動條與各種功能<ref>{{cite web |
* '''滑動條（Slider）''' – 完全可以自訂的滑動條與各種功能<ref>{{cite web |
||
| 第40行： | 第41行： | ||
| title = Jquery UI Examples – Creating a Page Content Slider |date=21 July 2011|accessdate=12 August 2012|publisher=Innovative PHP |
| title = Jquery UI Examples – Creating a Page Content Slider |date=21 July 2011|accessdate=12 August 2012|publisher=Innovative PHP |
||
}}</ref>。 |
}}</ref>。 |
||
* '''微調選擇器（Spinner）''' - 上下控制的數字微調輸入欄。 |
|||
* '''頁籤（Tabs）''' – 頁籤切換控制項，可以內嵌或動態載入內容。 |
* '''頁籤（Tabs）''' – 頁籤切換控制項，可以內嵌或動態載入內容。 |
||
* '''工具提示（Tooltip）''' - 彈出式提示框。 |
|||
=== 效果 === |
=== 效果 === |
||
* '''顏色動畫（Color Animation）''' – 產生顏色轉變的動畫效果。 |
* '''顏色動畫（Color Animation）''' – 產生顏色轉變的動畫效果。 |
||
2012年10月14日 (日) 02:16的版本
| 開發者 | The jQuery Project |
|---|---|
| 当前版本 | 1.9.0（2012年10月8日[1]） |
| 源代码库 | |
| 编程语言 | JavaScript |
| 类型 | Web應用框架外掛 |
| 许可协议 | GPL 與 MIT |
| 网站 | http://jqueryui.com/ |
jQuery UI 是一套 JavaScript 函式庫，提供抽象化、可自訂主題的 GUI 控制項與動畫效果。基於 jQuery JavaScript 函式庫，可用來建構互動式的網際網路應用程式。在2007年9月 John Resig 於 jquery.com 部落格裡的一篇文章裡正式公諸於世[2]。最新的版本需要 jQuery 1.6 或更新的版本。[3]
功能
以 1.9.0 版本為例[4]。
互動
- 拖曳（Draggable） – 讓元素可以用滑鼠拖曳。
- 拖放（Droppable） – 讓控制項可以接受其他拖曳進來的元素。
- 調整大小（Resizable） – 讓元素可以調整大小[5] 。
- 選取（Selectable） – 提供進階的大量元素選擇功能。
- 排序（Sortable） – 讓列表可以更容易排序。
控制項
jQuery UI 的所有控制項都能自訂主題樣式[6]。
- 手風琴式選單（Accordion） – 如手風琴般可伸縮的控制項。
- 自動完成（Autocomplete） – 根據使用者的輸入來自動完成文字欄。
- 按鈕（Button） – 增強按鈕外觀，將單選與複選控制項轉變成按鈕型式。
- 日期選擇器（Datepicker） – 進階的日期選擇工具。
- 對話框（Dialog） –在頁面最上層顯示對話框。
- 選單（Menu） - 顯示多階層式的選單。
- 進度條（Progressbar） – 動態與靜態的進度指示條。
- 滑動條（Slider） – 完全可以自訂的滑動條與各種功能[7]。
- 微調選擇器（Spinner） - 上下控制的數字微調輸入欄。
- 頁籤（Tabs） – 頁籤切換控制項，可以內嵌或動態載入內容。
- 工具提示（Tooltip） - 彈出式提示框。
效果
- 顏色動畫（Color Animation） – 產生顏色轉變的動畫效果。
- 切換 Class、新增 Class、移除 Class、開關 Class – 讓頁面上元素樣式轉變時有動畫效果。
- 效果（Effects） – 各種效果（顯示、下拉、爆炸、淡入等等）。
- 切換（Toggle） – 切換效果開關。
- 隱藏、顯示 - 使用上述的效果。
工具
- 位置（Position） – 根據另一個元素來設定目標元素的位置（對齊）。
範例
<script type="text/javascript">
// 讓 #draggable 可以拖曳
$(function() {
$("#draggable").draggable();
});
</script>
<div id="draggable" style = "width: 150px; height: 150px; padding: 0.5em;" class="ui-widget-content">
<p>Drag me around</p>
</div>
這段程式碼會讓使用者的滑鼠游標可以拖曳 ID 為「draggable」的 DIV 元素。
參考資料
- ^ González, Scott. jQuery UI 1.9.0. 2012-10-8.
- ^ John Resig. jQuery UI: Interractions and plug-ins. jQuery blog. 17 September 2007 [12 August 2012].
- ^ Build Your Download
- ^ jQuery UI Demos. jQuery UI. [14 October 2012].
- ^ Jquery UI Examples – Crop Images With Jquery Resize. Innovative PHP. 16 June 2011 [12 August 2012].
- ^ jQuery UI: ThemeRoller. jQuery UI. [12 August 2012].
- ^ Jquery UI Examples – Creating a Page Content Slider. Innovative PHP. 21 July 2011 [12 August 2012].
外部連結
- 官方網站 （英文）