JQuery tooltip 的基本用法，可以把所有元素的的 title 属性做为 Toolbar 显示，比如：<!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"><
支持收缩和展开缺省情况下，标签页是展开的，可以通过设置 collapsible 为 true 使得标签页支持收缩和展开。<script> $(function () { $("#tabs").tabs({ collapsible: true }); });</script>
Tab 显示多个标签页，每个标签含有一个标签头和一个 Panel（显示标签的内容）。基本用法首先使用 HTML 定义用来作为 Tab，一般使用列表（ul ,li) 来定义标签页的标题，每个标题使用href 链接到每个页面的内容页，比如下例定义了三个标签页：<div id="tabs"> <ul> <li><a href="#tabs-1">Nunc tincidunt</a></li>
Spinner 主要用来输入各种格式的数字，可以使用鼠标滚轮，键盘方向键来修改输入值，也支持直接键入数字。支持本地化的输入金额和时间。基本用法下面代码显示了 Spinner 的基本用法，设置和取得 Spinner 的当前值。<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <
前面的 slider 例子 Slider 都是水平顯示的，Slider 也可以顯示成垂直的，這可以通過配置orientation ，將其值設為「vertical」。基本用法<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
jQuery Slider 组件可以把选中的 HTML 元素变成滑动条 UI 控件，滑动条可以支持多个滑块用来设置单个值或一个值域。基本用法<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" /> <
前面在介绍 jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过 Progessbar 用法。在使用进度条时，如果可以预知进度的大小，可以设置 Max 大小，如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。基本用法<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos<
jQuery Menu 组件可以应用到任何具有父/子关系的元素，就其变为菜单，但通常使用 u>,li ,如果你希望使用除 ul,li 之外的元素，可以通过 menus 来配置。下例使用缺省的 ui 和 li菜单支持选择事件 select，因此可以为菜单添加事件处理。基本用法<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>
本篇使用 Dialog 构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <link rel="stylesheet" href="themes/trontastic/jquery-ui.css" />
模式对话框如想对话框显示为模式的，可以通过配置 modal: true 来设置。<!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>
jQuery Dialog 组件用来显示对话框，模式或非模式的。基本用法<!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> <
设置可以选择的日期范围有时希望用户在给定的日期内选择，比如预约会议的时间，只能在当天开始的一个月带10天以内。这时可以通过配置 minDate 和 maxDate 来设置，如果 minDate 或 maxDate 没有配置，表示没有最小日期或最大日期的限制。<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>
DatePicker 支持使用另外的按钮控制日期选择界面显示，可以通过自定义的图标来显示这个按钮。<!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.
格式化日期可以通過日期格式重新定義 Datepicker 顯示日期時的格式。<!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>
显示月份和年份选择下拉框changeMonth 和 changeYear 选择可以打开和关闭月份和年份下拉选择框。<!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.
jQuery UI 提供的 Datepicker 是一个有着非常灵活配置的选择日期的 UI 组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。基本用法如下：< !doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <
本例为使用 jQuery 的一个实用的例子，显示媒体播放器的控制条。其中按钮的图标使用 jQuery 库自带的 CSS 定义的一些图标（比如 ui-icon-seek-end 等）。<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <link rel="stylesheet" href="themes/trontastic/jquery-ui.
jQuery Button 组件可以增强表单（Form) 中的 Buttons，Inputs 和 Anchor元素，使其具有按钮显示风格，能够正确对鼠标滑动做出反应。基本用法下例显示把表单中的 button,input 和 anchor 元素都变为按钮风格的 jQuery Button 组件。<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos<
AutoComplete 在用戶輸入時，可以根據用戶輸入給出提示。其數據源可以來自本地，也可以使用遠程數據源，AutoComplete 的 DataSource 可以使用一個 Function，本篇中的 Function，我們使用 JSONP 查詢。 當數據源為 Function 時，其函數定義為：Function( Object request, Function response( Object data））其中 request 為請求，它含有一個 term 屬性，為當前用戶輸入。
如果一個輸入框可以接受多個輸入項，比如選擇你喜歡的語言，以逗號隔開，這是也可以使用 AutoComplete 為每個輸入項提供輸入提示。不過此時除了設置數據源外，還需要添加一些事件處理。<!doctype html><html lang="en"><head> <meta charset="utf-8" /> <title>jQuery UI Demos</title> <
关注时代Java
