前面介紹了jQuery的基本用法,jQuery UI 是一套 JavaScript 函式庫,提供抽象化、可自訂主題的 GUI 控制項與動畫效果。基於 jQuery JavaScript 函式庫,可用來建構互動式的Web應用。 它的準系統有: 互動拖曳(Draggable) – 讓元素可以用滑鼠拖曳。拖放(Droppable) – 讓控制項可以接受其他拖曳進來的元素。調整大小(Resizable) – 讓元素可以調整大小。選取(Selectable) – 提供進階的大量元素選擇功能。排序(Sortable) – 讓列表可以更容易排序。控制項jQuery UI 的所有控制項都能自訂主題樣式。 手風琴式選單(Accordion) – 如手風琴般可伸縮的控制項。自動完成(Autocomplete) – 根據使用者的輸入來自動完成文字欄。按鈕(Button) – 增強按鈕外觀,將單選與複選控制項轉變成按鈕型式。日期選取器(Datepicker) – 進階的日期選擇工具。對話方塊(Dialog) –在頁面最上層顯示對話方塊。選單(Menu) – 顯示多階層式的選單。進度條(Progressbar) – 動態與靜態進度指示條。滑動條(Slider) – 完全可以自訂的滑動條與各種功能。微調選取器(Spinner) – 上下控制的數字微調輸入欄。頁簽(Tabs) – 頁簽切換控制項,可以內嵌或動態載入內容。工具提示(Tooltip) – 彈出式提示框。效果顏色動畫(Color Animation) – 產生顏色轉變的動畫效果。切換 Class、新增 Class、移除 Class、開關 Class – 讓頁面上元素樣式轉變時有動畫效果。效果(Effects) – 各種效果(顯示、下拉、爆炸、淡入等等)。切換(Toggle) – 轉場效果開關。隱藏、顯示 – 使用上述的效果。工具位置(Position) – 根據另一個元素來設定目標元素的位置(對齊)。為使用jQuery UI一些UI組件
後面的例子,我們依然是visual studio 作為開發IDE,從http://jqueryui.com 現在最新版的 jQuery 庫,並支援的主題,建立一個jQueryUIDemo項目:www.2cto.com
scripts目錄存放jquery core, jquery ui 庫檔案, themes目錄存放jQuery 內建的主題,你可以選擇你喜歡的主題,本教程使用其中的“trontastic”主題。建立一個預設的Default.html 作為測試頁面,如下定義: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>jQuery UI Demos</title> 6 <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> 7 <script src="scripts/jquery-1.9.1.js"></script> 8 <script src="scripts/jquery-ui-1.10.1.custom.js"></script> 9 10 <script> 11 $(function () { 12 13 }); 14 </script> 15 </head> 16 <body> 17 </body> 18 </html> 其中<link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> 指明使用的主題,後面引用jQuery core, jQuery UI庫。