jQuery 入門教程(19): jQuery UI 概述

來源:互聯網
上載者:User

前面介紹了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庫。   

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.