在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ jQuery UI 概述
jQuery UI Tab 示例（一）
jQuery UI Datepicker 示例（四）
jQuery UI 示例
jQuery UI Slider 示例（二）
jQuery UI Dialog 示例（一）
HTML Get
動畫效果
終止動畫
回調(diào)函數(shù)
方法鏈
jQuery UI Button 示例（一）
jQuery UI Autocomplete 示例（三）
jQuery UI Autocomplete 示例（二）
設置或取得元素的 CSS class
jQuery UI 概述
基本語法
jQuery UI Datepicker 示例（一）
jQuery UI Autocomplete 示例（一）
jQuery UI Spiner 示例
jQuery UI Tab 示例（二）
淡入淡出效果
顯示/隱藏內(nèi)容
HTML Set
jQuery UI Tooltip 示例
jQuery UI Slider 示例（一）
讀寫 HTML 元素的 css 屬性
jQuery UI Datepicker 示例（二）
添加HTML元素
操作 HTML 元素的大小
jQuery UI Datepicker 示例（五）
滑動效果
jQuery UI Dialog 示例（二）
jQuery UI Menu 示例
jQuery UI 基本工作過程
jQuery UI Button 示例（二）
jQuery UI Dialog 示例（三）
jQuery UI Datepicker 示例（三）
Selectors
jQuery UI Progressbar 示例
Events
jQuery UI Accordion 示例
刪除HTML元素

jQuery UI 概述

前面介紹了 jQuery 的基本用法，jQuery UI 是一套 JavaScript 函式庫，提供抽象化、可自訂主題的 GUI 控制項與動畫效果?；?jQuery JavaScript 函式庫，可用來建構互動式的 Web 應用。

它的基本功能有：

互動

  • 拖曳（Draggable） – 讓元素可以用滑鼠拖曳。
  • 拖放（Droppable） – 讓控制項可以接受其他拖曳進來的元素。
  • 調(diào)整大?。≧esizable） – 讓元素可以調(diào)整大小。
  • 選?。⊿electable） – 提供進階的大量元素選擇功能。
  • 排序（Sortable） – 讓列表可以更容易排序。

控制項

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

  • 手風琴式選單（Accordion） – 如手風琴般可伸縮的控制項。
  • 自動完成（Autocomplete） – 根據(jù)使用者的輸入來自動完成文字欄。
  • 按鈕（Button） – 增強按鈕外觀，將單選與複選控制項轉(zhuǎn)變成按鈕型式。
  • 日期選擇器（Datepicker） – 進階的日期選擇工具。
  • 對話框（Dialog） –在頁面最上層顯示對話框。
  • 選單（Menu） – 顯示多階層式的選單。
  • 進度條（Progressbar） – 動態(tài)與靜態(tài)的進度指示條。
  • 滑動條（Slider） – 完全可以自訂的滑動條與各種功能。
  • 微調(diào)選擇器（Spinner） – 上下控制的數(shù)字微調(diào)輸入欄。
  • 頁簽（Tabs） – 頁簽切換控制項，可以內(nèi)嵌或動態(tài)載入內(nèi)容。
  • 工具提示（Tooltip） – 彈出式提示框。

效果

  • 顏色動畫（Color Animation） – 產(chǎn)生顏色轉(zhuǎn)變的動畫效果。
  • 切換 Class、新增 Class、移除 Class、開關 Class – 讓頁面上元素樣式轉(zhuǎn)變時有動畫效果。
  • 效果（Effects） – 各種效果（顯示、下拉、爆炸、淡入等等）。
  • 切換（Toggle） – 切換效果開關。
  • 隱藏、顯示 – 使用上述的效果。

工具

  • 位置（Position） – 根據(jù)另一個元素來設定目標元素的位置（對齊）。

下圖為使用 jQuery UI 一些 UI 組件

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/14.png" alt="" />

後面的例子，我們依然是 visual studio 作為開發(fā) IDE，從 http://jqueryui.com 現(xiàn)在最新版的 jQuery 庫，並支持的主題，創(chuàng)建一個 jQueryUIDemo 項目：

http://wiki.jikexueyuan.com/project/jquery-tutorial/images/15.png" alt="" />

scripts 目錄存放 jquery core, jquery ui 庫文件， themes 目錄存放jQuery 自帶的主題，你可以選擇你喜歡的主題，本教程使用其中的「trontastic」主題。創(chuàng)建一個預設的 Default.html 作為測試頁面，如下定義：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Demos</title>
    <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
    <script src="scripts/jquery-1.9.1.js"></script>
    <script src="scripts/jquery-ui-1.10.1.custom.js"></script>

    <script>
        $(function () {

        });
    </script>
</head>
<body>
</body>
</html>

其中 指明使用的主題，後面引用 jQuery core, jQuery UI 庫。