https://arolstar52-zhtest.hf.space/index.php?action=history&feed=atom&title=JQuery_UI
JQuery UI - 版本历史
2026-06-24T12:36:28Z
在这个wiki上该页的修订历史
MediaWiki 1.43.8
https://arolstar52-zhtest.hf.space/index.php?title=JQuery_UI&diff=1870894&oldid=prev
imported>InternetArchiveBot：补救1个来源，并将0个来源标记为失效。) #IABot (v2.0.8.9
2022-08-07T19:01:39Z
<p>补救1个来源，并将0个来源标记为失效。) #IABot (v2.0.8.9</p>
<p><b>新页面</b></p><div>{{Lowercase|jQuery UI}}<br />
{{NoteTA|G1=IT|G2=FL}}<br />
{{Infobox software<br />
| name = jQuery UI<br />
| logo = <br />
| developer = {{Plainlist|<br />
* Paul Bakaus<br />
* Scott González<br />
* Jörn Zaefferer<br />
* Felix Nagel<br />
* Mike Sherov<br />
* Rafael Xavier de Souza<ref>{{cite web |url = http://jqueryui.com/about/#jquery-ui-team |title = jQuery UI Team |website = jqueryui.com |accessdate = 5 February 2016 |publisher = The jQuery Foundation |archive-date = 2012-02-29 |archive-url = https://www.webcitation.org/65nrUByTb?url=http://jqueryui.com/about/#jquery-ui-team |dead-url = no }}</ref><br />
}}<br />
| latest release version = {{LSR/wikidata}}<br />
| latest release date =<br />
| status = 活躍<br />
| programming language = [[JavaScript]]<br />
| genre = [[插件]]<br />
| license = [[MIT許可證]]<ref name="license">{{cite web |url = http://jquery.org/license/ |title = License |website = jQuery.com |accessdate = 2014-06-12 |publisher = The jQuery Foundation |archive-date = 2021-01-23 |archive-url = https://web.archive.org/web/20210123223926/https://jquery.org/license/ |dead-url = no }}</ref><br />
| website = https://jqueryui.com/<br />
}}<br />
'''jQuery UI'''是一套[[JavaScript]] [[函式庫]]，提供抽象化、可自訂主題的[[控制項|GUI控制項]]與動畫效果。基於[[jQuery]] JavaScript函式庫，可用來建構互動式的網際網路應用程式。在2007年9月[[約翰·雷西格]]於jquery.com部落格裡的一篇文章裡正式公諸於世<ref name=release>{{cite web|url=http://blog.jquery.com/2007/09/17/jquery-ui-interactions-and-widgets|title=jQuery UI: Interractions and plug-ins|author=John Resig|date=17 September 2007|accessdate=12 August 2012|publisher=jQuery blog|archive-date=2012-08-18|archive-url=https://web.archive.org/web/20120818212248/http://blog.jquery.com/2007/09/17/jquery-ui-interactions-and-widgets/|dead-url=no}}</ref>。最新的版本需要[[jQuery]] 2.1.1或更新的版本。<ref>{{Cite web |url=http://jqueryui.com/download |title=Build Your Download |accessdate=2012-09-02 |archive-date=2021-02-04 |archive-url=https://web.archive.org/web/20210204153555/https://jqueryui.com/download/ |dead-url=no }}</ref><br />
<br />
== 功能 ==<br />
以1.9.0版本為例<ref>{{cite web|url=http://jqueryui.com/demos/|title=jQuery UI Demos|accessdate=14 October 2012|publisher=jQuery UI|archive-date=2012-05-13|archive-url=https://www.webcitation.org/67d3fbw41?url=http://jqueryui.com/demos/|dead-url=yes}}</ref>。<br />
=== 互動 ===<br />
* '''拖曳（Draggable）'''–讓元素可以用滑鼠拖曳。<br />
* '''拖放（Droppable）'''–讓控制項可以接受其他拖曳進來的元素。<br />
* '''調整大小（Resizable）'''–讓元素可以調整大小<ref>{{cite web|url=http://www.innovativephp.com/blog/2011/06/15/crop-images-using-php-gd-library-and-jquery-resize/|title=Jquery UI Examples – Crop Images With Jquery Resize|date=16 June 2011|accessdate=12 August 2012|publisher=Innovative PHP|deadurl=yes|archiveurl=https://web.archive.org/web/20111213172118/http://www.innovativephp.com/blog/2011/06/15/crop-images-using-php-gd-library-and-jquery-resize/|archivedate=2011年12月13日}}</ref>。<br />
* '''選取（Selectable）'''–提供進階的大量元素選擇功能。<br />
* '''排序（Sortable）'''–讓列表可以更容易排序。<br />
=== 控制項 ===<br />
jQuery UI的所有控制項都能自訂主題樣式<ref>{{cite web| url = http://jqueryui.com/themeroller/ThemeRoller| title = jQuery UI: ThemeRoller|accessdate=12 August 2012|publisher=jQuery UI}}</ref>。<br />
* '''手風琴式選單（Accordion）'''–如手風琴般可伸縮的控制項。<br />
* '''自動完成（Autocomplete）'''–根據使用者的輸入來自動完成文字欄。<br />
* '''按鈕（Button）'''–增強按鈕外觀，將單選與複選控制項轉變成按鈕型式。<br />
* '''日期選擇器（Datepicker）'''–進階的日期選擇工具。<br />
* '''對話框（Dialog）''' –在頁面最上層顯示對話框。<br />
* '''選單（Menu）''' - 顯示多階層式的選單。<br />
* '''進度條（Progressbar）''' –動態與靜態的進度指示條。<br />
* '''滑動條（Slider）'''–完全可以自訂的滑動條與各種功能<ref>{{cite web|url=http://www.innovativephp.com/jquery-featured-page-content-slider-plugin-tutorial-for-beginners/|title=Jquery UI Examples – Creating a Page Content Slider|date=21 July 2011|accessdate=12 August 2012|publisher=Innovative PHP|deadurl=yes|archiveurl=https://web.archive.org/web/20120727051508/http://www.innovativephp.com/jquery-featured-page-content-slider-plugin-tutorial-for-beginners/|archivedate=2012年7月27日}}</ref>。<br />
* '''微調選擇器（Spinner）''' - 上下控制的數字微調輸入欄。<br />
* '''頁籤（Tabs）'''–頁籤切換控制項，可以內嵌或動態載入內容。<br />
* '''工具提示（Tooltip）''' - 彈出式提示框。<br />
=== 效果 ===<br />
* '''顏色動畫（Color Animation）'''–產生顏色轉變的動畫效果。<br />
* '''切換Class'''、'''新增Class'''、'''移除Class'''、'''開關Class''' –讓頁面上元素樣式轉變時有動畫效果。<br />
* '''效果（Effects）'''–各種效果（顯示、下拉、爆炸、淡入等等）。<br />
* '''切換（Toggle）'''–切換效果開關。<br />
* '''隱藏'''、'''顯示''' - 使用上述的效果。<br />
=== 工具 ===<br />
* '''位置（Position）''' –根據另一個元素來設定目標元素的位置（對齊）。<br />
<br />
== 範例 ==<br />
<syntaxhighlight lang="javascript"><br />
// 讓#draggable可以拖曳<br />
$(function() {<br />
$("#draggable").draggable();<br />
});<br />
</syntaxhighlight><br />
<syntaxhighlight lang="html"><br />
<div id="draggable" style="width:150px;height:150px;padding:0.5em" class="ui-widget-content"><br />
<p>Drag me around</p><br />
</div><br />
<br />
</syntaxhighlight><br />
<br />
這段程式碼會讓使用者的滑鼠游標可以拖曳ID為「draggable」的DIV元素。<br />
<br />
== 参考文献 ==<br />
{{Reflist|30em}}<br />
<br />
== 外部連結 ==<br />
* [http://jqueryui.com/ 官方網站]{{Wayback|url=http://jqueryui.com/ |date=20120225204611 }}{{en}}<br />
<br />
{{DEFAULTSORT:Jquery Ui}}<br />
[[Category:網站開發]]<br />
[[Category:JavaScript]]<br />
[[Category:JavaScript函式庫]]<br />
[[Category:CSS框架]]</div>
imported>InternetArchiveBot