jQuery UI

JavaScript函式庫 来自维基百科,自由的百科全书

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

快速預覽 開發者, 目前版本 ...
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日,5個月前)
原始碼庫 編輯維基數據鏈結
程式語言JavaScript
類型外掛程式
授權條款MIT授權條款[6]
網站https://jqueryui.com/
關閉

功能

以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元素。

參考文獻

外部連結

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.