跳转到内容

JQuery UI：修订间差异

本页使用了标题或全文手工转换
维基百科，自由的百科全书
以互动方式浏览历史
←上一版本
删除的内容 添加的内容
可视化wikitext
无编辑摘要
InternetArchiveBot（留言 | 贡献）
机器人
2,018,781次编辑
补救1个来源，并将0个来源标记为失效。) #IABot (v2.0.8.9
 
（未显示8个用户的16个中间版本）
第1行： 第1行：
{{Lowercase|jQuery UI}}
{{Lowercase|jQuery UI}}
{{NoteTA|G1=IT|G2=FL}}
{{Infobox software
{{Infobox software
| name = jQuery UI
| name = jQuery UI
| logo =
| logo =
| developer = The jQuery Project
| developer = {{Plainlist|
* Paul Bakaus
* Scott González
⚫
* Jörn Zaefferer
* Felix Nagel
* Mike Sherov
* 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>
}}
⚫
| latest release version = {{LSR/wikidata}}
| latest release date =
| status = 活躍
| status = 活躍
⚫
| latest release version = 1.11.0
| latest release date = {{Start date and age|2014|6|26}}<ref>{{cite web
| first = Jörn
⚫
| last = Zaefferer
| date = 2014-06-26
| url = http://blog.jqueryui.com/2014/06/jquery-ui-1-11-0/
| title = jQuery UI 1.11.0
}}</ref>
| genre = [[Web應用框架]]外掛
| programming language = [[JavaScript]]
| programming language = [[JavaScript]]
| genre = [[插件]]
| license = [[GNU General Public License|GPL]]與[[MIT License|MIT]]
| 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>
| website = http://jqueryui.com/
| website = https://jqueryui.com/
}}
}}
'''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}}</ref>。最新的版本需要[[jQuery]] 2.1.1或更新的版本。<ref>[http://jqueryui.com/download Build Your Download]</ref>
'''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>


== 功能 ==
== 功能 ==
以1.9.0版本為例<ref>{{cite web| url = http://jqueryui.com/demos/| title = jQuery UI Demos |accessdate=14 October 2012|publisher=jQuery UI}}</ref>。
以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>。
=== 互動 ===
=== 互動 ===
* '''拖曳（Draggable）'''–讓元素可以用滑鼠拖曳。
* '''拖曳（Draggable）'''–讓元素可以用滑鼠拖曳。
* '''拖放（Droppable）'''–讓控制項可以接受其他拖曳進來的元素。
* '''拖放（Droppable）'''–讓控制項可以接受其他拖曳進來的元素。
* '''調整大小（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}}</ref>。
* '''調整大小（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>。
* '''選取（Selectable）'''–提供進階的大量元素選擇功能。
* '''選取（Selectable）'''–提供進階的大量元素選擇功能。
* '''排序（Sortable）'''–讓列表可以更容易排序。
* '''排序（Sortable）'''–讓列表可以更容易排序。
第37行： 第39行：
* '''選單（Menu）''' - 顯示多階層式的選單。
* '''選單（Menu）''' - 顯示多階層式的選單。
* '''進度條（Progressbar）''' –動態與靜態的進度指示條。
* '''進度條（Progressbar）''' –動態與靜態的進度指示條。
* '''滑動條（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>。
* '''滑動條（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
}}</ref>。
* '''微調選擇器（Spinner）''' - 上下控制的數字微調輸入欄。
* '''微調選擇器（Spinner）''' - 上下控制的數字微調輸入欄。
* '''頁籤（Tabs）'''–頁籤切換控制項，可以內嵌或動態載入內容。
* '''頁籤（Tabs）'''–頁籤切換控制項，可以內嵌或動態載入內容。
第54行： 第53行：


== 範例 ==
== 範例 ==
<source lang = "javascript">
<syntaxhighlight lang="javascript">
⚫
// 讓#draggable可以拖曳
<script type="text/javascript">
⚫
$(function() {
⚫
// 讓#draggable可以拖曳
⚫
$("#draggable").draggable();

⚫
});
⚫
$(function(){
</syntaxhighlight>
⚫
$("#draggable").draggable();
<syntaxhighlight lang="html">
⚫
});
⚫
<div id="draggable" style="width:150px;height:150px;padding:0.5em" class="ui-widget-content">
</script>
⚫
<p>Drag me around</p>
</source>
<source lang="html4strict">
⚫
<div id="draggable" style = "width: 150px; height: 150px; padding: 0.5em;" class="ui-widget-content">
⚫
<p>Drag me around</p>
</div>
</div>


</syntaxhighlight>
</source>


這段程式碼會讓使用者的滑鼠游標可以拖曳ID為「draggable」的DIV元素。
這段程式碼會讓使用者的滑鼠游標可以拖曳ID為「draggable」的DIV元素。


== 參考資料 ==
== 参考文献 ==
{{Reflist}}
{{Reflist|30em}}


== 外部連結 ==
== 外部連結 ==
* [http://jqueryui.com/ 官方網站]{{en}}
* [http://jqueryui.com/ 官方網站]{{Wayback|url=http://jqueryui.com/ |date=20120225204611 }}{{en}}


{{DEFAULTSORT:Jquery Ui}}
{{DEFAULTSORT:Jquery Ui}}
第82行： 第78行：
[[Category:JavaScript]]
[[Category:JavaScript]]
[[Category:JavaScript函式庫]]
[[Category:JavaScript函式庫]]
[[Category:CSS框架]]

2022年8月7日 (日) 19:01的最新版本

jQuery UI
開發者
  • Paul Bakaus
  • Scott González
  • Jörn Zaefferer
  • Felix Nagel
  • Mike Sherov
  • Rafael Xavier de Souza[1]
当前版本1.14.1[2][3][4][5]在维基数据编辑（2024年10月30日，35天前）
源代码库
編輯維基數據鏈接
编程语言JavaScript
类型插件
许可协议MIT許可證[6]
网站https://jqueryui.com/

jQuery UI是一套JavaScript 函式庫，提供抽象化、可自訂主題的GUI控制項與動畫效果。基於jQuery JavaScript函式庫，可用來建構互動式的網際網路應用程式。在2007年9月約翰·雷西格於jquery.com部落格裡的一篇文章裡正式公諸於世[7]。最新的版本需要jQuery 2.1.1或更新的版本。[8]

功能

[编辑]

以1.9.0版本為例[9]。

互動

[编辑]
  • 拖曳（Draggable）–讓元素可以用滑鼠拖曳。
  • 拖放（Droppable）–讓控制項可以接受其他拖曳進來的元素。
  • 調整大小（Resizable）–讓元素可以調整大小[10]。
  • 選取（Selectable）–提供進階的大量元素選擇功能。
  • 排序（Sortable）–讓列表可以更容易排序。

控制項

[编辑]

jQuery UI的所有控制項都能自訂主題樣式[11]。

  • 手風琴式選單（Accordion）–如手風琴般可伸縮的控制項。
  • 自動完成（Autocomplete）–根據使用者的輸入來自動完成文字欄。
  • 按鈕（Button）–增強按鈕外觀，將單選與複選控制項轉變成按鈕型式。
  • 日期選擇器（Datepicker）–進階的日期選擇工具。
  • 對話框（Dialog） –在頁面最上層顯示對話框。
  • 選單（Menu） - 顯示多階層式的選單。
  • 進度條（Progressbar） –動態與靜態的進度指示條。
  • 滑動條（Slider）–完全可以自訂的滑動條與各種功能[12]。
  • 微調選擇器（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元素。

参考文献

[编辑]
  1. ^ jQuery UI Team. jqueryui.com. The jQuery Foundation. [5 February 2016]. （原始内容存档于2012-02-29）. 
  2. ^ 2.0 2.1 jQuery UI 1.14.1 released. 2024年10月30日 [2024年11月5日]. 
  3. ^ 3.0 3.1 jQuery UI 1.14.1 released. 2024年10月30日 [2024年11月5日]. 
  4. ^ 4.0 4.1 https://registry.npmjs.com/jquery-ui; 检索日期: 2024年11月5日.
  5. ^ 5.0 5.1 https://releases.jquery.com/resources/cdn.json; 检索日期: 2024年11月5日.
  6. ^ License. jQuery.com. The jQuery Foundation. [2014-06-12]. （原始内容存档于2021-01-23）. 
  7. ^ John Resig. jQuery UI: Interractions and plug-ins. jQuery blog. 17 September 2007 [12 August 2012]. （原始内容存档于2012-08-18）. 
  8. ^ Build Your Download. [2012-09-02]. （原始内容存档于2021-02-04）. 
  9. ^ jQuery UI Demos. jQuery UI. [14 October 2012]. （原始内容存档于2012-05-13）. 
  10. ^ Jquery UI Examples – Crop Images With Jquery Resize. Innovative PHP. 16 June 2011 [12 August 2012]. （原始内容存档于2011年12月13日）. 
  11. ^ jQuery UI: ThemeRoller. jQuery UI. [12 August 2012]. 
  12. ^ Jquery UI Examples – Creating a Page Content Slider. Innovative PHP. 21 July 2011 [12 August 2012]. （原始内容存档于2012年7月27日）. 

外部連結

[编辑]
检索自“https://zh.wikipedia.org/zhwiki/w/index.php?title=JQuery_UI&oldid=73110811”