JQuery UI
- Paul Bakaus
- Scott González
- Jörn Zaefferer
- Felix Nagel
- Mike Sherov
- Rafael Xavier de Souza[1]
- 1.13.3 (2024年4月26日;穩定版本)[2][3]
- 1.14.0-beta.2 (2024年6月14日;测试版本)[4]
![編輯維基數據鏈接](http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/10px-OOjs_UI_icon_edit-ltr-progressive.svg.png)
- github
.com /jquery /jquery-ui
![編輯維基數據鏈接](http://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/10px-OOjs_UI_icon_edit-ltr-progressive.svg.png)
jQuery UI是一套JavaScript 函式庫,提供抽象化、可自訂主題的GUI控制項與動畫效果。基於jQuery JavaScript函式庫,可用來建構互動式的網際網路應用程式。在2007年9月約翰·雷西格於jquery.com部落格裡的一篇文章裡正式公諸於世[6]。最新的版本需要jQuery 2.1.1或更新的版本。[7]
功能
以1.9.0版本為例[8]。
互動
- 拖曳(Draggable)–讓元素可以用滑鼠拖曳。
- 拖放(Droppable)–讓控制項可以接受其他拖曳進來的元素。
- 調整大小(Resizable)–讓元素可以調整大小[9]。
- 選取(Selectable)–提供進階的大量元素選擇功能。
- 排序(Sortable)–讓列表可以更容易排序。
控制項
jQuery UI的所有控制項都能自訂主題樣式[10]。
- 手風琴式選單(Accordion)–如手風琴般可伸縮的控制項。
- 自動完成(Autocomplete)–根據使用者的輸入來自動完成文字欄。
- 按鈕(Button)–增強按鈕外觀,將單選與複選控制項轉變成按鈕型式。
- 日期選擇器(Datepicker)–進階的日期選擇工具。
- 對話框(Dialog) –在頁面最上層顯示對話框。
- 選單(Menu) - 顯示多階層式的選單。
- 進度條(Progressbar) –動態與靜態的進度指示條。
- 滑動條(Slider)–完全可以自訂的滑動條與各種功能[11]。
- 微調選擇器(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元素。
参考文献
- ^ jQuery UI Team. jqueryui.com. The jQuery Foundation. [5 February 2016]. (原始内容存档于2012-02-29).
- ^ 2.0 2.1 2.2 Release 1.13.3. 2024年4月26日 [2024年5月2日].
- ^ 3.0 3.1 3.2 https://registry.npmjs.com/jquery-ui; 检索日期: 2024年5月2日.
- ^ "jQuery UI 1.14.0-beta.2 released"; 作者姓名字符串: Michał Gołębiowski-Owczarek; 作品或名稱使用語言: 英語; 出版日期: 2024年6月14日; 检索日期: 2024年6月15日.
- ^ License. jQuery.com. The jQuery Foundation. [2014-06-12]. (原始内容存档于2021-01-23).
- ^ John Resig. jQuery UI: Interractions and plug-ins. jQuery blog. 17 September 2007 [12 August 2012]. (原始内容存档于2012-08-18).
- ^ Build Your Download. [2012-09-02]. (原始内容存档于2021-02-04).
- ^ jQuery UI Demos. jQuery UI. [14 October 2012]. (原始内容存档于2012-05-13).
- ^ Jquery UI Examples – Crop Images With Jquery Resize. Innovative PHP. 16 June 2011 [12 August 2012]. (原始内容存档于2011年12月13日).
- ^ jQuery UI: ThemeRoller. jQuery UI. [12 August 2012].
- ^ Jquery UI Examples – Creating a Page Content Slider. Innovative PHP. 21 July 2011 [12 August 2012]. (原始内容存档于2012年7月27日).
外部連結
- 官方網站(页面存档备份,存于互联网档案馆)(英文)