JQuery教程自学笔记（二） -- JQuery UI
查看doc文档可在
http://download.csdn.net/detail/liangbinny/5858701
下载，免费.
续上一篇，
三、JQuery UI39
3.1概述...39
3.2 JQuery UI基本工作过程...41
3.2.1初始化...41
3.2.2方法...42
3.2.3通用方法...42
3.2.4事件...43
3.2.5共有事件...43
3.3 JQuery UI示例...44
3.3.1 Accordion组件（手风琴似折叠）...44
3.3.2 JQuery UI Autocomplete（自动完成）...56
3.3.3 JQuery UI Button（按钮）...63
3.3.4 JQuery UI Datepicker (时间控件)69
3.3.5 JQuery UI Dialog (对话框)79
3.3.6 JQuery UI Menu（JQuery菜单）...88
3.3.7 JQuery UI Progressbar (进度条)92
3.3.8 JQuery UI Slider (滑动条)96
3.3.9 JQuery UI Spiner (微调框)101
3.3.10 JQuery UI Tab (标签页)103
3.3.11 JQuery UI Tooltip (提示条)111
三、JQuery UI
3.1概述
前面介绍了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）–根据另一个元素来设定目标元素的位置（对齐）。
JQueryUI下载地址为：
http://jqueryui.com/download/
在下载页，选择一个你想要的主题，或者点“design a custom theme”，自己定义一个主题
这里选择已经有的“trontastic”主题，点下载即可。
部署jqueryui，整个项目结构如下：
index.jsp内容如下：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
script>
head>
<body>
body>
body>
html>
3.2 JQuery UI基本工作过程
以进程条（Progressbar)为例介绍JQuery UI组件工作的基本过程
3.2.1初始化
大部分JQuery Ui组件都可以保持其状态，因此为了能够跟踪UI组件的状态，JQuery UI组件也有一个生命周期，这个生命周期从初始化开始，为了初始化一个UI组件，一般在某个HTML元素调用UI组件（插件）方法。，比如
$( "#elem" ).progressbar();
这个方法初始化id=elem的元素，因为我们调用progressbar没有带参数，因此将使用缺省属性来初始化进程条。我们可以通过传入配置的方法为JQuery UI组件修改缺省值。比如：
$( "#elem" ).progressbar({ value: 20 });
也可以一次传入多个参数来初始化JQuery UI组件，其它没有配置的属性还是使用其缺省值。这些属性也属于JQuery UI组件状态的一部分。初始化之后，如果需要修改这些属性，可以通过option方法来改变。
3.2.2方法
初始化JQuery UI组件之后，我们可以查询UI组件的状态属性，每个初始化过的UI组件都可以调用其方法，调用方法是通过传入方法名称，比如, 调用进程条的value方法如下：
$( "#elem" ).progressbar( "value" );
如果这个方法可以有参数，直接在方法名之后传入参数，比如，设置value值为40
$( "#elem" ).progressbar( "value", 40 );
和前面介绍的JQuery 方法链一样，JQuery UI的方法也支持多个方法串接在一起，比如：
$( "#elem" ).progressbar( "value", 90 ).addClass( "almost-done" );
3.2.3通用方法
对于大多数JQuery UI组件来说，有些方法是都支持的，比如：
option方法
正如前面说的，在UI组件初始化之后，如果需要修改一些属性值，可以通过option方法，比如，修改progressbar的value值，
$( "#elem" ).progressbar( "option", "value", 30 );
注意这和前面调用value方法不同，这个例子是想修改配置项value为30.
如果需要取得某个配置项的值，则使用不带参数的调用：如：
$( "#elem" ).progressbar( "option", "value" );
除此之外，如果需要一次修改多个配置项，可以通过传入对象的方法，如：
$( "#elem" ).progressbar( "option", {
value: 100,
disabled: true
});
disable方法
这个方法disable某个UI组件，比如：
$( "#elem" ).progressbar( "disable" );
这个方法disable进程条，并修改其Style使其看起来无效。这个方法等同于设置的disable属性为true.
enable方法
enable UI 组件，比如：
$( "#elem" ).progressbar( "enable" );
这个方法等同于设置disable属性为false.
destroy方法
如果你不再需要某个UI组件，可以调用destroy()方法，这将使的对应的HTML元素恢复原状（没有使用JQuery之前的标记显示）。这也终结JQuery UI的生命周期。一旦你终止UI组件，你就不能再调用UI组件的方法。如果你删除该HTML元素，JQuery自动终止。
widget方法
某些UI组件创建一个wrapper元素或者和原先元素无关联的新元素。在这种情况下，widget方法返回生成的新元素。对于Progressbar来说，没有生成的HTML元素，这个方法返回原先的HTML元素。
$( "#elem" ).progressbar( "widget" );
3.2.4事件
所有UI组件都具有事件来通知其状态发生变化。对于大部分UI组件来说，某个事件发生时，事件名以UI组件名为前缀。比如当Progressbar值发生变化时绑定一个事件处理方法：
$( "#elem" ).bind( "progressbarchange", function() {
alert( "The value has changed!" );
});
每个事件都有对应的回调函数，是作为一个配置项来定义的，因此我们可以直接挂到Progressbar的change回调函数而不要绑定到Progressbarchange事件，比如
$( "#elem" ).progressbar({
change: function() {
alert( "The value has changed!" );
}
});
3.2.5共有事件
虽然每个UI组件支持的事件不同，但create事件是每个UI组件都支持的，这个事件在UI组件创建好后立即触发。
3.3 JQuery UI示例
3.3.1 Accordion组件（手风琴似折叠）
3.3.1.1基本用法
JQuery Accordion UI组件可以把一个包含有具有Header (标题头）和Content（内容）对的容器转变成Accordion组件。
比如如下一个Id=”accordion”Div HTML元素。
<divid="accordion">
<h1>Section 1h1>
<div>
<p>Description 1p>
div>
<h2>Section 2h2>
<div>
<p>Description 3p>
div>
<h3>Section 3h3>
<div>
<p>Description 3p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
div>
对于＜div id=”accordion”>里面的元素，According允许使用任意的标记，只要是一个Header紧接着一个Content，比如上面的H3，你可以换成H1，H2等其它标记，或者通过Header选项来配置。有了这样的HTML元素，然后对其使用Accordion方法，就将该HTML元素变成Accordion样式了
$("#accordion").accordion();
完整代码如下：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function(){
$("#accordion").accordion();
});
script>
head>
<body>
<divid="accordion">
<h1>Section 1h1>
<div>
<p>Description 1p>
div>
<h2>Section 2h2>
<div>
<p>Description 3p>
div>
<h3>Section 3h3>
<div>
<p>Description 3p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
div>
body>
body>
html>
显示效果如下：
3.3.1.2折叠内容
Accordion 组件缺省情况下总有一项内容是展开的，如说图Section1的内容是可见的，点击其它部分的标题，该部分内容可见，但无法将所有内容都折叠起来，如果要支持所有部分都可以折叠，可以通过配置collapsible属性，如：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function(){
$( "#accordion" ).accordion({
collapsible: true
});
});
script>
head>
<body>
<divid="accordion">
<h1>Section 1h1>
<div>
<p>Description 1p>
div>
<h2>Section 2h2>
<div>
<p>Description 3p>
div>
<h3>Section 3h3>
<div>
<p>Description 3p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
div>
body>
body>
html>
3.3.1.3 自定义图标
可以自定义Accordion 组件标题前的图标，缺省的图标为箭头（未展开是箭头向右，展开时向下），使用JQuery CSS框架中定义的类或是通过自定义背景图像类，可以重新配置这两个图标：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$("#accordion").accordion({
icons: icons
});
$("#toggle").button().click(function() {
if ($("#accordion").accordion("option","icons")) {
$("#accordion").accordion("option","icons",null);
} else {
$("#accordion").accordion("option","icons",icons);
}
});
});
script>
head>
<body>
<divid="accordion">
<h1>Section 1h1>
<div>
<p>Description 1p>
div>
<h2>Section 2h2>
<div>
<p>Description 3p>
div>
<h3>Section 3h3>
<div>
<p>Description 3p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
div>
<buttonid="toggle">Toggle iconsbutton>
body>
body>
html>
3.3.1.4 设置HeightStyle
因为Accordion由“Block级”元素组成（可以参加CSS的display)，因此它缺省在水平方向占据父元素的宽度，为了在高度方向也能充满其父容器，可以通过配置heightStyle 为fill .HeightStyle 可以使用的值如下：
•"auto": 所有Panel使用最高的那个Panel的高度.
•"fill": 根据父容器的高度来填充.
•"content": 每个Penel的高度取决于其内容.
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function () {
$("#accordion").accordion({
heightStyle: "fill"
});
});
$(function () {
$("#accordion-resizer").resizable({
minHeight: 140,
minWidth: 200,
resize: function () {
$("#accordion").accordion("refresh");
}
});
});
script>
<style>
#accordion-resizer {
padding:10px;
width:350px;
height:300px;
}
style>
head>
<body>
<h3class="docs">Resize the outer container:h3>
<divid="accordion-resizer"class="ui-widget-content">
<divid="accordion">
<h3>Section 1h3>
<div>
<p>Maurismauris ante, blandit et,
ultrices a,suscipit eget,
quam. Integerut neque. Vivamus nisi metus,
molestie vel,gravida in,
condimentum sitamet, nunc. Nam a nibh.
Donec suscipit eros.Nam mi.
Proin viverra leo ut odio.
Curabitur malesuada.
Vestibulum avelit eu ante
scelerisque vulputate.p>
div>
<h3>Section 2h3>
<div>
<p>Sed nonurna. Donec et ante.
Phasellus eu ligula.
Vestibulum sitamet purus.
Vivamus hendrerit,
dolor ataliquet laoreet,
mauris turpis porttitor velit,
faucibus interdum tellus
libero ac justo.
Vivamus non quam.
In suscipit faucibus urna.p>
div>
<h3>Section 3h3>
<div>
<p>Nam enim risus, molestie et,
porta ac,
aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa.
Aenean in pede. Phasellus
ac libero ac tellus
pellentesque semper.
Sed ac felis. Sed commodo,
magna quis lacinia ornare,
quam ante aliquam nisi,
eu iaculis leo purus
venenatis dui.p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
<h3>Section 4h3>
<div>
<p>Cras dictum. Pellentesque
habitant morbi
tristique senectus et netus
et malesuada
fames ac turpis egestas.
Vestibulum
ante ipsum primis in faucibus
orci luctus
et ultrices posuere cubilia
Curae;
Aenean lacinia mauris
vel est. p>
<p>Suspendisse eu nisl. Nullam ut libero.
Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora
torquent per conubia nostra,
per inceptos himenaeos.p>
div>
div>
div>
body>
body>
html>
3.3.1.5 鼠标移动式自动打开内容
缺省情况下，打开Accordion某个部分内容，是点击该部分标题，如果需要实现移动鼠标到该部分自动展开内容，可以设置event属性，例如：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function () {
$("#accordion").accordion({
heightStyle: "fill",
event: "mouseover"
});
});
$(function () {
$("#accordion-resizer").resizable({
minHeight: 140,
minWidth: 200,
resize: function () {
$("#accordion").accordion("refresh");
}
});
});
script>
<style>
#accordion-resizer {
padding:10px;
width:350px;
height:300px;
}
style>
head>
<body>
<h3class="docs">Resize the outer container:h3>
<divid="accordion-resizer"class="ui-widget-content">
<divid="accordion">
<h3>Section 1h3>
<div>
<p>Maurismauris ante, blandit et,
ultrices a,suscipit eget,
quam. Integerut neque. Vivamus nisi metus,
molestie vel,gravida in,
condimentum sitamet, nunc. Nam a nibh.
Donec suscipit eros.Nam mi.
Proin viverra leo ut odio.
Curabitur malesuada.
Vestibulum avelit eu ante
scelerisque vulputate.p>
div>
<h3>Section 2h3>
<div>
<p>Sed nonurna. Donec et ante.
Phasellus eu ligula.
Vestibulum sitamet purus.
Vivamus hendrerit,
dolor ataliquet laoreet,
mauris turpis porttitor velit,
faucibus interdum tellus
libero ac justo.
Vivamus non quam.
In suscipit faucibus urna.p>
div>
<h3>Section 3h3>
<div>
<p>Nam enim risus, molestie et,
porta ac,
aliquam ac, risus. Quisque lobortis.
Phasellus pellentesque purus in massa.
Aenean in pede. Phasellus
ac libero ac tellus
pellentesque semper.
Sed ac felis. Sed commodo,
magna quis lacinia ornare,
quam ante aliquam nisi,
eu iaculis leo purus
venenatis dui.p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
<h3>Section 4h3>
<div>
<p>Cras dictum. Pellentesque
habitant morbi
tristique senectus et netus
et malesuada
fames ac turpis egestas.
Vestibulum
ante ipsum primis in faucibus
orci luctus
et ultrices posuere cubilia
Curae;
Aenean lacinia mauris
vel est. p>
<p>Suspendisse eu nisl. Nullam ut libero.
Integer dignissim consequat lectus.
Class aptent taciti sociosqu ad litora
torquent per conubia nostra,
per inceptos himenaeos.p>
div>
div>
div>
body>
body>
html>
3.3.1.6 支持调整顺序
使用sortable方法允许重新调整Accordion每个部分的顺序，可以通过拖放的方法调整顺序：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function () {
$("#accordion").accordion({
header: "> div > h3",
collapsible: true
}).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});;
});
script>
<style>
.group {
zoom:1;
}
style>
head>
<body>
<divid="accordion">
<divclass="group">
<h3>Section 1h3>
<div>
<p>Description 1p>
div>
div>
<divclass="group">
<h3>Section 2h3>
<div>
<p>Description 2p>
div>
div>
<divclass="group">
<h3>Section 3h3>
<div>
<p>Description 3p>
<ul>
<li>List item oneli>
<li>List item twoli>
<li>List item threeli>
ul>
div>
div>
<divclass="group">
<h3>Section 4h3>
<div>
<p>Description 4p>
div>
div>
div>
body>
body>
html>
3.3.2 JQuery UI Autocomplete（自动完成）
AutoComplete 在获取焦点后，随着用户键入的内容，可以在预订的数据源中查找和已输入的内容相匹配的内容列表供用户选择。这可以用作之前输入过的内容也可以用作自动填充相关内容，比如根据城市名，自动填充邮编等。你可以使用本地数据源或是远程数据源，本地数据一般使用小数据集合，比如包含50条记录的通讯录，远程数据源一般为保护大量记录的数据库。
3.3.2.1 基本用法
本例为使用AutoComplete的基本用法，通过本地数据源（数组）定义一组语言列表，用户输入字母后，包含该字母的语言会作为列表显示出来：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#tags").autocomplete({
source: availableTags
});
});
script>
head>
<body>
<divclass="ui-widget">
<labelfor="tags">Tags:label><inputid="tags"/>
div>
body>
body>
html>
3.3.2.2 语调支持
某些语言支持语调字符，比如Jörn中的ö，希望在输入o时，也能显示包含ö的内容，AutoComplete支持使用function来定义Source属性：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<scripttype="text/javascript">
$(function () {
var names = ["Jörn Zaefferer","Scott González","John Resig"];
var accentMap = {
"á":"a",
"ö":"o"
};
var normalize =function (term) {
var ret ="";
for (var i = 0; i< term.length; i++) {
ret += accentMap[term.charAt(i)]
|| term.charAt(i);
}
return ret;
};
$("#developer").autocomplete({
source: function (request, response) {
var matcher =new RegExp($.ui.autocomplete.escapeRegex(request.term),"i");
response($.grep(names,function (value) {
value = value.label || value.value || value;
return matcher.test(value) || matcher.test(normalize(value));
}));
}
});
});
script>
head>
<body>
<divclass="ui-widget">
<labelfor="developer">Developer:label><inputid="developer"/>
div>
body>
body>
html>
3.3.2.3 分类支持
本例是提供简单扩展AutoComplete 组件实现了一个自定义的custom.catcomplete UI组件以支持AutoComplete的分类支持。自定义组件有兴趣的可以参见JQuery 的Widget Factory。一般无需自定义UI组件，如果需要，可以在网站查找是否有人已经实现你需要的UI组件，实在不行才自定义UI组件，使用Widget Factory自定义组件的方法并不十分直观（这是因为JavaScript使用了面向“原型”的面向对象方法，而非通常的使用类的面向对象方法）。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<style>
.ui-autocomplete-category {
font-weight:bold;
padding:.2em .4em;
margin:.8em 0 .2em;
line-height:1.5;
}
style>
<script>
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function (ul, items) {
var that =this,currentCategory ="";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("
currentCategory = item.category;
}
that._renderItemData(ul, item);
});
}
});
script>
<script>
$(function () {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$("#search").catcomplete({
delay: 0,
source: data
});
});
script>
head>
<body>
<divclass="ui-widget">
<labelfor="search">Search:label><inputid="search"/>
div>
body>
body>
html>
3.3.2.4 添加事件
如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外，还需要添加一些事件处理。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
// don't navigate away from the field on tab
//when selecting an item
$("#tags")
.bind("keydown",function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("ui-autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete,
// but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
returnfalse;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the
//comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
returnfalse;
}
});
});
script>
head>
<body>
<divclass="ui-widget">
<labelfor="tags">Tag programming languages:label>
<inputid="tags"size="50"/>
div>
body>
body>
html>
3.3.3 JQuery UI Button（按钮）
JQuery Button 组件可以增强表单（Form)中的Buttons，Inputs和Anchor元素，使其具有按钮显示风格，能够正确对鼠标滑动做出反应。
3.3.3.1 基本用法
下例显示把表单中的button,input和anchor元素都变为按钮风格的JQuery Button组件。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
//执行了
$("input[type=submit], a, button").button().click(function (event) {
event.preventDefault();
});
});
script>
head>
<body>
<button>A button elementbutton>
<inputtype="submit"value="A submit button"/>
<ahref="#">An anchora>
body>
body>
html>
3.3.3.2 显示图标
按钮也可以添加图标，可以支持多个图标，分别使用primary和secondary来指明。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("button:first").button({
icons: {
primary: "ui-icon-locked"
},
text: false
}).next().button({
icons: {
primary: "ui-icon-locked"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
}
}).next().button({
icons: {
primary: "ui-icon-gear",
secondary: "ui-icon-triangle-1-s"
},
text: false
});
});
script>
head>
<body>
<button>Button with icon onlybutton>
<button>Button with icon on the leftbutton>
<button>Button with two iconsbutton>
<button>Button with two icons and no textbutton>
body>
body>
html>
3.3.3.3 Radio单选钮
同样，JQuery也把type为radio的一组Radio按钮构成一组单选钮，使用.buttonset将多个单选钮定义为一个组，其中只有一个可以是选中状态。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#radio").buttonset();
});
script>
head>
<body>
<form>
<divid="radio">
<inputtype="radio"id="radio1"name="radio"/>
<labelfor="radio1">Choice 1label>
<inputtype="radio"id="radio2"name="radio"checked="checked"/>
<labelfor="radio2">Choice 2label>
<inputtype="radio"id="radio3"name="radio"/>
<labelfor="radio3">Choice 3label>
div>
form>
body>
body>
html>
3.3.3.4 制作媒体播放条
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#beginning").button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$("#rewind").button({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
$("#play").button({
text: false,
icons: {
primary: "ui-icon-play"
}
}).click(function () {
var options;
if ($(this).text() ==="play") {
options = {
label: "pause",
icons: {
primary: "ui-icon-pause"
}
};
} else {
options = {
label: "play",
icons: {
primary: "ui-icon-play"
}
};
}
$(this).button("option", options);
});
$("#stop").button({
text: false,
icons: {
primary: "ui-icon-stop"
}
}).click(function () {
$("#play").button("option", {
label: "play",
icons: {
primary: "ui-icon-play"
}
});
});
$("#forward").button({
text: false,
icons: {
primary: "ui-icon-seek-next"
}
});
$("#end").button({
text: false,
icons: {
primary: "ui-icon-seek-end"
}
});
$("#shuffle").button();
$("#repeat").buttonset();
});
script>
head>
<body>
<divid="toolbar"class="ui-widget-header ui-corner-all">
<buttonid="beginning">go to beginningbutton>
<buttonid="rewind">rewindbutton>
<buttonid="play">playbutton>
<buttonid="stop">stopbutton>
<buttonid="forward">fast forwardbutton>
<buttonid="end">go to endbutton>
<inputtype="checkbox"id="shuffle"/>
<labelfor="shuffle">Shufflelabel>
<spanid="repeat">
<inputtype="radio"id="repeat0"name="repeat"checked="checked"/>
<labelfor="repeat0">No Repeatlabel>
<inputtype="radio"id="repeat1"name="repeat"/>
<labelfor="repeat1">Oncelabel>
<inputtype="radio"id="repeatall"name="repeat"/>
<labelfor="repeatall">Alllabel>
span>
div>
body>
body>
html>
3.3.4 JQuery UI Datepicker (时间控件)
JQuery UI提供的Datepicker 是一个有着非常灵活配置的选择日期的UI组件，你可以配置显示日期的格式，语言，限制所能选择的日期范围，添加按钮等。
3.3.4.1 基本用法
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker();
});
script>
head>
<body>
<p>Date:<input type="text"id="datepicker"/>p>
body>
body>
html>
3.3.4.2 使用动画效果
显示和隐藏DatePicker组件支持配置使用不同的动画效果，下列使用一个列表框来选择DatePicker可以支持的动画效果。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker();
$("#anim").change(function () {
$("#datepicker").datepicker("option",
"showAnim", $(this).val());
});
});
script>
head>
<body>
<p>Date:<inputtype="text"id="datepicker"size="30"/>p>
<p>Animations:<br/>
<select id="anim">
<option value="show">Show (default)option>
<option value="slideDown">Slide downoption>
<option value="fadeIn">Fade inoption>
<option value="blind">Blind (UI Effect)option>
<option value="bounce">Bounce (UI Effect)option>
<option value="clip">Clip (UI Effect)option>
<option value="drop">Drop (UI Effect)option>
<option value="fold">Fold (UI Effect)option>
<option value="slide">Slide (UI Effect)option>
<option value="">Noneoption>
select>
p>
body>
body>
html>
3.3.4.3 显示月份和年份选择下拉框
changeMonth 和changeYear 选择可以打开和关闭月份和年份下拉选择框。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true
});
});
script>
head>
<body>
<p>
Date:
<inputtype="text"id="datepicker"/>
p>
body>
body>
html>
3.3.4.4 显示多个月份
选项numberOfMonths 可以用控制同时显示几个月份：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
script>
head>
<body>
<p>
Date:
<inputtype="text"id="datepicker"/>
p>
body>
body>
html>
3.3.4.5 格式化日期
可以通过日期格式重新定义Datepicker显示日期时的格式。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker();
$("#format").change(function () {
$("#datepicker").datepicker("option",
"dateFormat", $(this).val());
});
});
script>
head>
<body>
<p>Date:<inputtype="text"id="datepicker"size="30"/>p>
<p>Format options:<br/>
<select id="format">
<option value="mm/dd/yy">Default -mm/dd/yyoption>
<option value="yy-mm-dd">ISO 8601 -yy-mm-ddoption>
<option value="d M, y">Short - d M, yoption>
<option value="d MM, y">Medium - d MM, yoption>
<option value="DD, d MM, yy">Full - DD, d MM,yyoption>
<option value="'day' d 'of' MM 'in the year' yy">
With text - 'day' d 'of' MM 'in the year'yy
option>
select>
p>
body>
body>
html>
3.3.4.6 本地化支持
Datepicker缺省使用英语显示，可以通过配置修改显示语言。
如果需要支持不同语言，可以添加，如：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$.datepicker.regional['zh-CN'] = {
closeText: '关闭',
prevText: '<上月',
nextText: '下月>',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy/mm/dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear:true,
yearSuffix: '年'
};
$("#datepicker").datepicker($.datepicker.regional["zh-CN"]);
});
script>
head>
<body>
<p>
Date:
<inputtype="text"id="datepicker"/>
p>
body>
body>
html>
3.3.4.7 自定义显示时间图标
DatePicker支持使用另外的按钮控制日期选择界面显示，可以通过自定义的图标来显示这个按钮。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
script>
head>
<body>
<p>
Date:
<inputtype="text"id="datepicker"/>
p>
body>
body>
html>
3.3.4.8 设置可以选择的日期范围
有时希望用户在给定的日期内选择，比如预约会议的时间，只能在当天开始的一个月带10天以内。这时可以通过配置minDate和maxDate 来设置，如果minDate或maxDate 没有配置，表示没有最小日期或最大日期的限制。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#datepicker").datepicker({
minDate: 0,
maxDate: "+1M +10D"
});
});
script>
head>
<body>
<p>
Date:
<inputtype="text"id="datepicker"/>
p>
body>
body>
html>
可以看到小于当天的日期变灰且无法选择。
3.3.4.9 设置日期范围
可以使用两个DatePicker配合使用，用户可以选择一个开始日期和一个终止日期。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#from").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#to").datepicker("option","minDate", selectedDate);
}
});
$("#to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function (selectedDate) {
$("#from").datepicker("option","maxDate", selectedDate);
}
});
});
script>
head>
<body>
<labelfor="from">Fromlabel>
<inputtype="text"id="from"name="from"/>
<labelfor="to">tolabel>
<inputtype="text"id="to"name="to"/>
body>
body>
html>
3.3.5 JQuery UI Dialog (对话框)
JQuery Dialog组件用来显示对话框，模式或非模式的。
3.3.5.1 基本用法
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#dialog").dialog();
});
script>
head>
<body>
<divid="dialog"title="Basic dialog">
<p>This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.p>
div>
body>
body>
html>
对话框的缺省显示有“X”关闭按钮，可以缩放，移动。
3.3.5.2 动画显示效果
可以为对话框显示和关闭添加动画效果，如果不希望对话框一开始就显示（这可能是大部分情况，在点击按钮或是某个事件发生后再显示对话框）可以通过配置autoOpen=false来设置。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#dialog").dialog({
autoOpen : false,
//添加动画效果
show : {
effect : "blind",
duration : 1000
},
hide : {
effect : "explode",
duration : 1000
}
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
script>
head>
<body>
<divid="dialog"title="Basic dialog">
<p>This is the default dialog which is useful for displaying
information. The dialog window can be moved, resized and closed with
the 'x' icon.p>
div>
<buttonid="opener">Open Dialogbutton>
body>
body>
html>
3.3.5.3 模式对话框
如想对话框显示为模式的，可以通过配置modal: true来设置。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#dialog-modal").dialog({
height : 140,
modal : true
});
});
script>
head>
<body>
<divid="dialog-modal"title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more
prominent because it dims out the page content.p>
div>
<p>
Sed vel diam id libero <a href="http://example.com">rutrum
convallisa>.Donec aliquet leo vel magna. Phasellus rhoncus faucibus
ante. Etiam bibendum,enim faucibus aliquet rhoncus, arcu felis
ultricies neque, sitamet auctor elit eros a lectus.
p>
body>
body>
html>
3.3.5.4 添加确认和取消按钮
可以通过配置主按钮，和从按钮的方法来为对话框添加按钮，此时如果需要把”X”从右上角去掉，可以通过CSS来实现，具体可以参考下例：使用dialogClass:“no-close”
3.3.5.5 综合实例
构造一个比较实用的对话框，它可以内嵌一个表单用来接受用户输入，每个输入框支持数据校验，部分使用正则表达式来检验。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
var name = $("#name"), email = $("#email"), password = $("#password"), allFields = $(
[]).add(name).add(email).add(password), tips = $(".validateTips");
function updateTips(t) {
tips.text(t).addClass("ui-state-highlight");
setTimeout(function() {
tips.removeClass("ui-state-highlight", 1500);
}, 500);
}
function checkLength(o, n, min, max) {
if (o.val().length > max || o.val().length< min) {
o.addClass("ui-state-error");
updateTips("Length of " + n +" must be between " + min
+ " and " + max + ".");
returnfalse;
} else {
returntrue;
}
}
function checkRegexp(o, regexp, n) {
if (!(regexp.test(o.val()))) {
o.addClass("ui-state-error");
updateTips(n);
returnfalse;
} else {
returntrue;
}
}
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Create an account" :function() {
var bValid =true;
allFields.removeClass("ui-state-error");
bValid = bValid
&& checkLength(name,"username", 3,
16);
bValid = bValid
&& checkLength(email,"email", 6,
80);
bValid = bValid
&& checkLength(password,
"password", 5, 16);
bValid = bValid
&& checkRegexp(
name,
/^[a-z]([0-9a-z_])+$/i,
"Username may consist of a-z, 0-9, "
+ "underscores, begin with a letter.");
// From jquery.validate.js (by joern),
// contributed by Scott Gonzalez:
// http://projects.scottsplayground.com/email_address_validation/
bValid = bValid
&& checkRegexp(
email,
/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,
"eg. [email protected]");
bValid = bValid
&& checkRegexp(password,
/^([0-9a-zA-Z])+$/,
"Password field only allow : a-z 0-9");
if (bValid) {
$("#users tbody").append(" " " " "" +
");" + name.val() +" " +
" + email.val() +" " +
" + password.val() +" " +
$(this).dialog("close");
}
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
allFields.val("").removeClass("ui-state-error");
}
});
$("#create-user").button().click(function () {
$("#dialog-form").dialog("open");
});
});
script>
<styletype="text/css">
body {
font-size:62.5%;
}
label,input {
display:block;
}
input.text {
margin-bottom:12px;
width:95%;
padding:.4em;
}
fieldset {
padding:0;
border:0;
margin-top:25px;
}
h1 {
font-size:1.2em;
margin:.6em 0;
}
div#users-contain {
width:350px;
margin:20px 0;
}
div#users-containtable {
margin:1em 0;
border-collapse:collapse;
width:100%;
}
div#users-containtable td,div#users-contain table th {
border:1px solid #eee;
padding:.6em 10px;
text-align:left;
}
.ui-dialog.ui-state-error {
padding:.3em;
}
.validateTips {
border:1px solid transparent;
padding:0.3em;
}
style>
head>
<body>
<divid="dialog-form"title="Create new user">
<pclass="validateTips">All form fields are required.p>
<form>
<fieldset>
<labelfor="name">Namelabel><inputtype="text"name="name"
id="name"class="text ui-widget-content ui-corner-all"/><label
for="email">Emaillabel><inputtype="text"name="email"
id="email"value=""class="text ui-widget-content ui-corner-all"/>
<labelfor="password">Passwordlabel><inputtype="password"
name="password"id="password"value=""
class="text ui-widget-content ui-corner-all"/>
fieldset>
form>
div>
<divid="users-contain"class="ui-widget">
<h1>Existing Users:h1>
<tableid="users"class="ui-widget ui-widget-content">
<thead>
<trclass="ui-widget-header ">
<th>Nameth>
<th>Emailth>
<th>Passwordth>
tr>
thead>
<tbody>
<tr>
<td>JohnDoetd>
<td>john.doe@example.comtd>
<td>johndoe1td>
tr>
tbody>
table>
div>
<buttonid="create-user">Create new userbutton>
body>
body>
html>
3.3.6 JQuery UI Menu（JQuery菜单）
JQuery Menu 组件可以应用到任何具有父/子关系的元素，就其变为菜单，但通常使用ul,li ,如果你希望使用除 ul,li之外的元素，可以通过menus 来配置。下例使用缺省的 ul和 li菜单支持选择事件select，因此可以为菜单添加事件处理。
3.3.6.1 基本用法
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#menu").menu({
select : function(event, ui) {
alert(ui.item.context.innerText);
}
});
});
script>
<styletype="text/css">
.ui-menu {
width:150px;
}
style>
head>
<body>
<ulid="menu">
<liclass="ui-state-disabled"><ahref="#">Aberdeena>li>
<li><ahref="#">Adaa>li>
<li><ahref="#">Adamsvillea>li>
<li><ahref="#">Addystona>li>
<li><ahref="#">Delphia>
<ul>
<liclass="ui-state-disabled"><ahref="#">Adaa>li>
<li><ahref="#">Saarlanda>li>
<li><ahref="#">Salzburga>li>
ul>li>
<li><ahref="#">Saarlanda>li>
<li><ahref="#">Salzburga>
<ul>
<li><ahref="#">Delphia>
<ul>
<li><ahref="#">Adaa>li>
<li><ahref="#">Saarlanda>li>
<li><ahref="#">Salzburga>li>
ul>li>
<li><ahref="#">Delphia>
<ul>
<li><ahref="#">Adaa>li>
<li><ahref="#">Saarlanda>li>
<li><ahref="#">Salzburga>li>
ul>li>
<li><ahref="#">Percha>li>
ul>li>
<liclass="ui-state-disabled"><ahref="#">Amesvillea>li>
ul>
body>
body>
html>
3.3.6.2 添加图标
可以为菜单项添加图标，这是通过定义不同的CSS类来添加的。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#menu").menu();
});
script>
<styletype="text/css">
.ui-menu {
width:150px;
}
style>
head>
<body>
<ulid="menu">
<li>
<ahref="#">
<spanclass="ui-icon ui-icon-disk">span>Save
a>
li>
<li>
<ahref="#">
<spanclass="ui-icon ui-icon-zoomin">span>Zoom In
a>
li>
<li>
<ahref="#">
<spanclass="ui-icon ui-icon-zoomout">span>Zoom Out
a>
li>
<liclass="ui-state-disabled">
<ahref="#">
<spanclass="ui-icon ui-icon-print">span>Print...
a>li>
<li>
<ahref="#">Playbacka>
<ul>
<li>
<ahref="#">
<spanclass="ui-icon ui-icon-seek-start">span>Prev
a>
li>
<li>
<ahref="#">
<spanclass="ui-icon ui-icon-stop">span>Stop
a>li>
<li>
<a href="#">
<span class="ui-icon ui-icon-play">span>Play
a>
li>
<li>
<ahref="#">
<spanclass="ui-icon ui-icon-seek-end">span>Next
a>
li>
ul>
li>
ul>
body>
body>
html>
3.3.7 JQuery UI Progressbar (进度条)
在使用进度条时，如果可以预知进度的大小，可以设置Max大小，如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。
3.3.7.1 基本用法
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#progressbar").progressbar({
value: 37
});
});
script>
head>
<body>
<divid="progressbar">div>
body>
body>
html>
3.3.7.2 显示进度
可以在显示进度条的同时显示当前的百分比（实际上可以显示任意文字），这是通过两个嵌套的div元素来实现，本例使用一个定时器来模拟进度条的动态效果。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
var progressbar = $("#progressbar"),
progressLabel = $(".progress-label");
progressbar.progressbar({
value : false,
change : function() {
progressLabel.text(progressbar.progressbar("value") +"%");
},
complete : function() {
progressLabel.text("Complete!");
}
});
function progress() {
var val = progressbar.progressbar("value") || 0;
progressbar.progressbar("value", val + 1);
if (val< 99) {
setTimeout(progress, 100);
}
}
setTimeout(progress, 3000);
});
script>
<styletype="text/css">
.progress-label {
float:left;
margin-left:50%;
margin-top:5px;
font-weight:bold;
text-shadow:1px 1px 0 #fff;
}
style>
head>
<body>
<divid="progressbar">
<divclass="progress-label">Loading...div>
div>
body>
body>
html>
3.3.7.3 “中间过渡”状态条
可以通过设置 value=false将进度条显示为“过渡”状态的进度条，此外也可以通过配置来修改进度条的颜色。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#progressbar").progressbar({
value: false
});
$("button").on("click",function (event) {
var target = $(event.target),
progressbar = $("#progressbar"),
progressbarValue = progressbar.find(".ui-progressbar-value");
if (target.is("#numButton")) {
progressbar.progressbar("option", {
value: Math.floor(Math.random() * 100)
});
} elseif (target.is("#colorButton")) {
progressbarValue.css({
"background":'#' + Math.floor(Math.random() * 16777215).toString(16)
});
} elseif (target.is("#falseButton")) {
progressbar.progressbar("option","value", false);
}
});
});
script>
<styletype="text/css">
#progressbar.ui-progressbar-value {
background-color:#ccc;
}
style>
head>
<body>
<divid="progressbar">div>
<buttonid="numButton">Random Value - Determinatebutton>
<buttonid="falseButton">Indeterminatebutton>
<buttonid="colorButton">Random Colorbutton>
body>
body>
html>
3.3.8 JQuery UI Slider (滑动条)
JQuery Slider组件可以把选中的HTML元素变成滑动条UI控件，滑动条可以支持多个滑块用来设置单个值或一个值域。
3.3.8.1 基本用法
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function () {
$("#slider").slider();
});
script>
head>
<body>
<divid="slider">div>
body>
body>
html>
3.3.8.2 多个滑块选择值域
Slider支持使用两个滑块来选择一个值域，通过 min,max指定大范围， values 指定当前选择的值域。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#slider-range").slider({
range : true,
min : 0,
max : 500,
values : [ 75, 300 ],
slide : function(event, ui) {
$("#amount").val("$" + ui.values[0]
+ " - $" + ui.values[1]);
}
});
$("#amount").val("$"
+ $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
script>
head>
<body>
<p>
<label for="amount">Price range:label>
<input type="text"id="amount"
style="border:0; color: #f6931f;
font-weight:bold;"/>
p>
<divid="slider-range">div>
body>
body>
html>
3.3.8.3 垂直显示
前面的slider 例子Slider都是水平显示的，Slider也可以显示成垂直的，这可以通过配置orientation ，将其值设为“vertical”。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#slider-vertical").slider({
orientation : "vertical",
range : "min",
min : 0,
max : 100,
value : 60,
slide : function(event, ui) {
$("#amount").val(ui.value);
}
});
$("#amount").val($("#slider-vertical").slider("value"));
});
script>
head>
<body>
<p>
<labelfor="amount">Volume:label><inputtype="text"id="amount"style="border:0; color: #f6931f;font-weight: bold;" />
p>
<divid="slider-vertical"style="height:200px;">div>
body>
body>
html>
3.3.8.4 垂直选择值域
同样，Slider垂直显示时也可以使用两个滑块来选择值域
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#slider-range").slider({
orientation : "vertical",
range : true,
values : [ 17, 67 ],
slide : function(event, ui) {
$("#amount").val("$" + ui.values[0] +" - $" + ui.values[1]);
}
});
$("#amount").val(
"$" + $("#slider-range").slider("values", 0) + " - $"
+ $("#slider-range").slider("values", 1));
});
script>
head>
<body>
<p>
<labelfor="amount">Target sales goal (Millions):label><input
type="text"id="amount"
style="border:0; color: #f6931f;font-weight: bold;" />
p>
<divid="slider-range"style="height:250px;">div>
body>
body>
html>
3.3.9 JQuery UI Spiner (微调框)
Spinner 主要用来输入各种格式的数字，可以使用鼠标滚轮，键盘方向键来修改输入值，也支持直接键入数字。支持本地化的输入金额和时间。
3.3.9.1 基本用法
下面代码显示了Spinner的基本用法，设置和取得Spinner的当前值。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
var spinner = $("#spinner").spinner();
$("#disable").click(function() {
if (spinner.spinner("option","disabled")) {
spinner.spinner("enable");
} else {
spinner.spinner("disable");
}
});
$("#destroy").click(function() {
if (spinner.data("ui-spinner")) {
spinner.spinner("destroy");
} else {
spinner.spinner();
}
});
$("#getvalue").click(function() {
alert(spinner.spinner("value"));
});
$("#setvalue").click(function() {
spinner.spinner("value", 5);
});
$("button").button();
});
script>
head>
<body>
<p>
<labelfor="spinner">Select a value:label>
<inputid="spinner"name="value"/>
p>
<p>
<buttonid="disable">Toggle disable/enablebutton>
<buttonid="destroy">Toggle widgetbutton>
p>
<p>
<buttonid="getvalue">Get valuebutton>
<buttonid="setvalue">Set value to 5button>
p>
body>
body>
html>
3.3.10 JQuery UI Tab (标签页)
Tab 显示多个标签页，每个标签含有一个标签头和一个Panel（显示标签的内容）。
3.3.10.1 基本用法
首先使用HTML定义用来作为Tab，一般使用列表（ul ,li)来定义标签页的标题，每个标题使用href 链接到每个页面的内容页，比如下例定义了三个标签页：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#tabs").tabs();
});
script>
head>
<body>
<divid="tabs">
<ul>
<li><ahref="#tabs-1">Nunctincidunta>li>
<li><ahref="#tabs-2">Proindolora>li>
<li><ahref="#tabs-3">Aeneanlaciniaa>li>
ul>
<divid="tabs-1">
<p>Proinelit arcu, rutrum commodo, vehicula tempus,p>
div>
<divid="tabs-2">
<p>Morbitincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante,p>
div>
<divid="tabs-3">
<p>Mauriseleifend est et turpis. Duis id erat.p>
<p>Duiscursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at,p>
div>
div>
body>
body>
html>
3.3.10.2 支持收缩和展开
缺省情况下，标签页是展开的，可以通过设置collapsible为true使得标签页支持收缩和展开。
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#tabs").tabs({collapsible:true});
});
script>
head>
<body>
<divid="tabs">
<ul>
<li><ahref="#tabs-1">Nunctincidunta>li>
<li><ahref="#tabs-2">Proindolora>li>
<li><ahref="#tabs-3">Aeneanlaciniaa>li>
ul>
<divid="tabs-1">
<p>Proinelit arcu, rutrum commodo, vehicula tempus,p>
div>
<divid="tabs-2">
<p>Morbitincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante,p>
div>
<divid="tabs-3">
<p>Mauriseleifend est et turpis. Duis id erat.p>
<p>Duiscursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at,p>
div>
div>
body>
body>
html>
3.3.10.3鼠标移动自动激活页面
可以通过设置 event:mouseover来实现，这样当鼠标移动到某个页面，该页面则自动展开
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#tabs").tabs({collapsible:true,event:"mouseover"});
});
script>
head>
<body>
<divid="tabs">
<ul>
<li><ahref="#tabs-1">Nunctincidunta>li>
<li><ahref="#tabs-2">Proindolora>li>
<li><ahref="#tabs-3">Aeneanlaciniaa>li>
ul>
<divid="tabs-1">
<p>Proinelit arcu, rutrum commodo, vehicula tempus,p>
div>
<divid="tabs-2">
<p>Morbitincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante,p>
div>
<divid="tabs-3">
<p>Mauriseleifend est et turpis. Duis id erat.p>
<p>Duiscursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at,p>
div>
div>
body>
body>
html>
3.3.10.4 在底部和左边显示标签头
通过CSS和一些JavaScript可以把标签页的标题显示在底部或是左边
标题显示在底部:
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#tabs").tabs();
// fix the classes
$(".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *")
.removeClass("ui-corner-all ui-corner-top").addClass(
"ui-corner-bottom");
// move the nav to the bottom
$(".tabs-bottom .ui-tabs-nav").appendTo(".tabs-bottom");
});
script>
<style>
/* force a height so the tabs don't jump as content height changes */
#tabs.tabs-spacer {
float:left;
height:200px;
}
.tabs-bottom.ui-tabs-nav {
clear:left;
padding:0 .2em .2em .2em;
}
.tabs-bottom.ui-tabs-nav li {
top:auto;
bottom:0;
margin:0 .2em 1px 0;
border-bottom:auto;
border-top:0;
}
.tabs-bottom.ui-tabs-nav li.ui-tabs-active {
margin-top:-1px;
padding-top:1px;
}
style>
head>
<body>
<divid="tabs"class="tabs-bottom">
<ul>
<li><ahref="#tabs-1">Nunctincidunta>li>
<li><ahref="#tabs-2">Proindolora>li>
<li><ahref="#tabs-3">Aeneanlaciniaa>li>
ul>
<divid="tabs-1">
<p>Proinelit arcu, rutrum commodo, vehicula tempus,p>
div>
<divid="tabs-2">
<p>Morbitincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante,p>
div>
<divid="tabs-3">
<p>Mauriseleifend est et turpis. Duis id erat.p>
<p>Duiscursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at,p>
div>
div>
body>
body>
html>
标题显示在左边:
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
$("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
});
script>
<style>
.ui-tabs-vertical {
width:55em;
}
.ui-tabs-vertical.ui-tabs-nav {
padding:.2em .1em .2em .2em;
float:left;
width:12em;
}
.ui-tabs-vertical.ui-tabs-nav li {
clear:left;
width:100%;
border-bottom-width:1px !important;
border-right-width:0 !important;
margin:0 -1px .2em 0;
}
.ui-tabs-vertical.ui-tabs-nav li a {
display:block;
}
.ui-tabs-vertical.ui-tabs-nav li.ui-tabs-active {
padding-bottom:0;
padding-right:.1em;
border-right-width:1px;
border-right-width:1px;
}
.ui-tabs-vertical.ui-tabs-panel {
padding:1em;
float:right;
width:40em;
}
style>
head>
<body>
<divid="tabs">
<ul>
<li><ahref="#tabs-1">Nunctincidunta>li>
<li><ahref="#tabs-2">Proindolora>li>
<li><ahref="#tabs-3">Aeneanlaciniaa>li>
ul>
<divid="tabs-1">
<p>Proinelit arcu, rutrum commodo, vehicula tempus,p>
div>
<divid="tabs-2">
<p>Morbitincidunt, dui sit amet facilisis feugiat, odio metus
gravida ante,p>
div>
<divid="tabs-3">
<p>Mauriseleifend est et turpis. Duis id erat.p>
<p>Duiscursus. Maecenas ligula eros, blandit nec, pharetra at,
semper at,p>
div>
div>
body>
body>
html>
3.3.11 JQuery UI Tooltip (提示条)
3.3.11.1 基本用法
JQuery tooltip 的基本用法，可以把所有元素的的 title属性做为Toolbar显示，比如：
<%@ page language="java"contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%
String contextPath = request.getContextPath();
%>
DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8">
<title>JQuery Learningtitle>
<linkrel="stylesheet"
href="<%=contextPath%>/css/trontastic/jquery-ui-1.10.3.custom.css"/>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-1.9.1.js">script>
<scriptsrc="<%=contextPath%>/js/jquery/jquery-ui-1.10.3.custom.js">script>
<script>
$(function() {
$(document).tooltip();
});
script>
<style>
label {
display:inline-block;
width:5em;
}
style>
head>
<body>
<p><ahref="#"title="That's what this widget is">Tooltipsa> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a nativetooltip.p>
<p>But as it's not a nativetooltip, it can be styled. Any themes built with
<ahref="http://themeroller.com"title="ThemeRoller: JQuery UI's theme builder application">ThemeRollera>
will also style tooltips accordingly.p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.p>
<p><labelfor="age">Your age:label><inputid="age"title="We ask for your age only for statistical purposes."/>p>
<p>Hover the field to see thetooltip.p>
body>
body>
html>
