jQuery UI

维基百科,自由的百科全书
跳转至: 导航搜索
jQuery UI
開發者 The jQuery Project
穩定版本 1.10.4 / 2014年1月17日;5個月前 (2014-01-17)[1]
開發狀態 活躍
编程语言 JavaScript
类型 Web應用框架外掛
许可协议 GPLMIT
網站 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 元素。

參考資料[编辑]

  1. ^ González, Scott. jQuery UI 1.10.4. 2014-1-17. 
  2. ^ John Resig. jQuery UI: Interractions and plug-ins. jQuery blog. 17 September 2007 [12 August 2012]. 
  3. ^ Build Your Download
  4. ^ jQuery UI Demos. jQuery UI. [14 October 2012]. 
  5. ^ Jquery UI Examples – Crop Images With Jquery Resize. Innovative PHP. 16 June 2011 [12 August 2012]. 
  6. ^ jQuery UI: ThemeRoller. jQuery UI. [12 August 2012]. 
  7. ^ Jquery UI Examples – Creating a Page Content Slider. Innovative PHP. 21 July 2011 [12 August 2012]. 

外部連結[编辑]