juery 插件使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form Plugin</title>
<style type="text/css">
<!--
form{
margin:0px; padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
input, select{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
table{
border:1px solid #00328f;
border-collapse:collapse;
background-color:#d4e3ff;
}
table td{
border:1px solid #00328f;
padding:4px 6px 4px 6px;
}
input[type=text], input[type=password], input[type=submit], input[type=button], input[type=reset],textarea, select{
border:1px solid #00328f;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
function checkFiledValue(){
var aFieldValue = $("#myForm *").fieldValue();
//获取整个表单有用元素的值
alert(aFieldValue.join());
}
</script>
</head>
<body>
<form id="myForm" name="myForm">
<table cellspacing="0" id="formTable">
<input type="hidden" name="Hidden" value="secret">
<tr><td>用户</td><td><input name="Name" type="text"></td></tr>
<tr><td>密码</td><td><input name="Password" type="password"></td></tr>
<tr><td>性别</td>
<td><label><input type="radio" name="Radio" value="male">男</label>
<label><input type="radio" name="Radio" value="female">女</label></td>
</tr>
<tr><td>多选</td><td>
<select name="Multiple" multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td></tr>
<tr><td>单选</td><td>
<select name="Single">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td></tr>
<tr><td>爱好</td>
<td><label><input type="checkbox" name="Check" value="roaming">逛街</label>
<label><input type="checkbox" name="Check" value="balls">打球</label>
<label><input type="checkbox" name="Check" value="TV">看电视</label></td></tr>
<tr><td>收入</td>
<td><label><input type="checkbox" name="Check2" value="below5k">5000以下(不含)</label>
<label><input type="checkbox" name="Check2" value="above5k">大于5000</label></td>
</tr>
<tr><td>留言</td><td><textarea name="Text" rows="2" cols="20"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="sub" value="Submit">
<input type="reset" name="resetButton" value="Reset">
<input type="button" name="btn" value="FieldValue" onclick="checkFiledValue()"></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form Plugin格式化数据</title>
<style type="text/css">
<!--
form{
margin:0px; padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
input, select{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
table{
border:1px solid #00328f;
border-collapse:collapse;
background-color:#d4e3ff;
}
table td{
border:1px solid #00328f;
padding:4px 6px 4px 6px;
}
input[type=text], input[type=password], input[type=submit], input[type=button], input[type=reset],textarea, select{
border:1px solid #00328f;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
function checkFormSerialize(){
var sQuery = $("#myForm").formSerialize();
//将表单中的有用值格式化
alert(sQuery);
//后面可以接Ajax语句
//$.get(url,sQuery)
}
</script>
</head>
<body>
<form id="myForm" name="myForm">
<table cellspacing="0" id="formTable">
<input type="hidden" name="Hidden" value="secret">
<tr><td>用户</td><td><input name="Name" type="text"></td></tr>
<tr><td>密码</td><td><input name="Password" type="password"></td></tr>
<tr><td>性别</td>
<td><label><input type="radio" name="Radio" value="male">男</label>
<label><input type="radio" name="Radio" value="female">女</label></td>
</tr>
<tr><td>多选</td><td>
<select name="Multiple" multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td></tr>
<tr><td>单选</td><td>
<select name="Single">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td></tr>
<tr><td>爱好</td>
<td><label><input type="checkbox" name="Check" value="roaming">逛街</label>
<label><input type="checkbox" name="Check" value="balls">打球</label>
<label><input type="checkbox" name="Check" value="TV">看电视</label></td></tr>
<tr><td>收入</td>
<td><label><input type="checkbox" name="Check2" value="below5k">5000以下(不含)</label>
<label><input type="checkbox" name="Check2" value="above5k">大于5000</label></td>
</tr>
<tr><td>留言</td><td><textarea name="Text" rows="2" cols="20"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="sub" value="Submit">
<input type="reset" name="resetButton" value="Reset">
<input type="button" name="btn" value="FormSerialize" onclick="checkFormSerialize()"></td></tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form Plugin 重置和清除</title>
<style type="text/css">
<!--
form{
margin:0px; padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
input, select{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
table{
border:1px solid #00328f;
border-collapse:collapse;
background-color:#d4e3ff;
}
table td{
border:1px solid #00328f;
padding:4px 6px 4px 6px;
}
input[type=text], input[type=password], input[type=button], textarea, select{
border:1px solid #00328f;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
$(function(){
$("input[type=button]:eq(0)").click(function(){
$("#myForm").clearForm();
});
$("input[type=button]:eq(1)").click(function(){
$("#myForm").resetForm();
});
});
</script>
</head>
<body>
<form id="myForm" name="myForm">
<table cellspacing="0" id="formTable">
<input type="hidden" name="Hidden" value="secret">
<tr><td>用户</td><td><input name="Name" type="text" value="输入用户名"></td></tr>
<tr><td>密码</td><td><input name="Password" type="password"></td></tr>
<tr><td>性别</td>
<td><label><input type="radio" name="Radio" value="male" checked="checked">男</label>
<label><input type="radio" name="Radio" value="female">女</label></td>
</tr>
<tr><td>多选</td><td>
<select name="Multiple" multiple="multiple">
<option>One</option>
<option selected="selected">Two</option>
<option>Three</option>
</select>
</td></tr>
<tr><td>单选</td><td>
<select name="Single">
<option>One</option>
<option>Two</option>
<option selected="selected">Three</option>
</select>
</td></tr>
<tr><td>爱好</td>
<td><label><input type="checkbox" name="Check" value="roaming">逛街</label>
<label><input type="checkbox" name="Check" value="balls">打球</label>
<label><input type="checkbox" name="Check" value="TV" checked="checked">看电视</label></td></tr>
<tr><td>收入</td>
<td><label><input type="checkbox" name="Check2" value="below5k">5000以下(不含)</label>
<label><input type="checkbox" name="Check2" value="above5k" checked="checked">大于5000</label></td>
</tr>
<tr><td>留言</td><td><textarea name="Text" rows="2" cols="20"></textarea></td></tr>
<tr><td colspan="2" align="center"><input type="button" name="Clear" value="Clear">
<input type="button" name="Reset" value="Reset">
</td></tr>
</table>
</form>
</body>
</html>
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
Response.Write("User:" + Request["Name"] + " Password:" + Request["Password"]);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form Plugin ajaxSubmit</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #00328f;
}
table{
border:1px solid #00328f;
border-collapse:collapse;
background-color:#d4e3ff;
}
table td{
border:1px solid #00328f;
padding:4px 7px 4px 7px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
$(function(){
$("input[type=button]:eq(0)").click(function(){
var options = {
target: "#myTargetDiv"
};
//ajax一步上传表单
$("#myForm").ajaxSubmit(options);
});
});
</script>
</head>
<body>
<form id="myForm" name="myForm" action="15-4.aspx">
<table cellspacing="0" id="formTable">
<tr><td>用户</td><td><input name="Name" type="text"></td></tr>
<tr><td>密码</td><td><input name="Password" type="password"></td></tr>
<tr><td colspan="2" align="center"><input type="button" name="ajaxSub" value="AjaxSubmit">
<input type="submit" name="Sub" value="NormalSubmit">
</td></tr>
</table>
</form>
<div id="myTargetDiv"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Form Plugin ajaxForm</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
input{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #00328f;
}
table{
border:1px solid #00328f;
border-collapse:collapse;
background-color:#d4e3ff;
}
table td{
border:1px solid #00328f;
padding:4px 7px 4px 7px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
$(function(){
var options = {
target: "#myTargetDiv"
};
//表单的ajax化
$("#myForm").ajaxForm(options);
});
</script>
</head>
<body>
<form id="myForm" name="myForm" action="15-4.aspx">
<table cellspacing="0" id="formTable">
<tr><td>用户</td><td><input name="Name" type="text"></td></tr>
<tr><td>密码</td><td><input name="Password" type="password"></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="Sub" value="NormalSubmit"></td></tr>
</table>
</form>
<div id="myTargetDiv"></div>
</body>
</html>
<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>
<%@ Import Namespace="System.Data" %>
<%
Response.CacheControl = "no-cache";
Response.AddHeader("Pragma","no-cache");
string back = "";
back += "<p>你认为中国足球的前景如何？</p><p> </p>";
back += "<p>一片光明: 5%</p><p>困难重重: 61%</p><p>前途未卜: 34%</p>";
Response.Write(back);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>模拟搜狐热门调查</title>
<style type="text/css">
<!--
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
form{
margin:0px; padding:0px;
}
div{
border:1px solid #004585;
float:left; margin:6px;
background:url(bg2.jpg) repeat-x;
}
#myTargetDiv{
padding:10px; margin:0px;
border:none;
background:none;
}
input.btn{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
border:1px solid #00328f;
}
p{
margin:0px; padding:3px;
}
p.title{
color:#FFFFFF;
font-weight:bold;
text-align:center;
background:url(bg1.jpg) repeat-x;
padding:5px;
}
ul{
margin:12px; padding:0px;
list-style:none;
}
ul li{
margin:0px; padding:1px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript" src="jquery.form.js"></script>
<script language="javascript">
$(function(){
var options = {
//目标为调查内容本身所处的div块
target: "#myTargetDiv"
};
$("input[type=button]").click(function(){
$("#myForm").ajaxSubmit(options);
});
});
</script>
</head>
<body>
<div>
<p class="title">新闻集锦</p>
<ul>
<li>中国队0:3负于乌兹别克斯坦队，亚洲杯小组未出现</li>
<li>中国队1:1逼平泰国队，无言以对</li>
<li>再次遭淘汰，冲出亚洲梦再度破灭</li>
<li>中国队7:0大胜中国香港，依然被淘汰</li>
<li>颜面扫地，踢假球都被淘汰？</li>
<li>国足的未来让人担忧...</li>
</ul>
</div>
<div>
<p class="title">热点调查</p>
<div id="myTargetDiv">
<form id="myForm" name="myForm" action="15-6.aspx">
<p>你认为中国足球的前景如何？</p>
<p><label><input type="radio" name="Football" value="1">一片光明</label><br>
<label><input type="radio" name="Football" value="2">困难重重</label><br>
<label><input type="radio" name="Football" value="3">前途未卜</label></p>
<p><input type="button" name="Sub" value="提交" class="btn"> <input type="button" name="Sub" value="查看" class="btn"></p>
</form>
</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>鼠标拖拽Draggable</title>
<style type="text/css">
<!--
body{
background:#ffe7bc;
}
.block{
border:2px solid #760000;
background-color:#ffb5b5;
width:80px; height:25px;
margin:5px; float:left;
padding:20px; text-align:center;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.draggable.min.js"></script>
<script language="javascript">
$(function(){
for(var i=0;i<3;i++){
//添加三个透明的<div>块
$(document.body).append($("<div class='block'>Div"+i.toString()+"</div>").css("opacity",0.6));
}
//直接调用拖拽方法
$(".block").draggable();
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>控制鼠标拖拽</title>
<style type="text/css">
<!--
body{
background:#ffe7bc;
padding:0px; margin:0px;
font-size:14px;
font-family:Arial, Helvetica, sans-serif;
}
#x, #y, #parent{
border:2px solid #760000;
background-color:#ffb5b5;
width:80px; height:25px;
padding:20px; text-align:center;
}
#x{ margin-left:260px;}
#y{ margin-top:200px;}
#two, #three{
background-color:#b1d4ff;
padding:0px;
position:absolute;
}
#one{
background-color:#b1d4ff;
border-bottom:1px dashed #000000;
border-top:1px dashed #000000;
}
#two{
left:10px; top:0px;
border-left:1px dashed #000000;
border-right:1px dashed #000000;
height:1200px;
}
#three{
position:absolute;
width:200px; height:150px;
left:220px; top:140px;
background-color:#b1d4ff;
border:1px dashed #000000;
}
-->
</style>
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.draggable.min.js"></script>
<script language="javascript">
$(function(){
$("#one").add("#two").add("#three").add("#x").css("opacity",0.7);
$("#x").draggable({axis:"x"}); //只能在x方向拖拽
$("#y").draggable({axis:"y"}); //只能在y方向拖拽
$("#parent").draggable({containment:"parent"}); //只能在父元素中拖拽
});
</script>
</head>
<body>
<br>
<div id="one"><div id="x">x轴</div></div>
<div id="two"><div id="y">y轴</div></div>
<div id="three"><div id="parent">父元素</div></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>控制鼠标拖拽</title>
<style type="text/css">
<!--
body{
background:#ffe7bc;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
div{
border:2px solid #760000;
background-color:#ffb5b5;
width:90px; height:35px; margin:5px;
padding:15px; text-align:center;
float:left;
}
input{
border:1px solid #003a5f;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
p{
margin:0px; padding:2px;
background:#2badff;
cursor:move;
}
-->
</style>
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.draggable.min.js"></script>
<script language="javascript">
$(function(){
$("div:eq(0)").draggable({dragPrevention:"input"});
$("div:eq(1)").draggable({grid:[80,60]});
$("div:eq(2)").draggable({revert:true});
$("div:eq(3)").draggable({helper:"clone"});
$("div:eq(4)").draggable({opacity:0.3});
$("div:eq(5)").draggable({handle:"p"});
$("div:eq(6)").draggable({containment:"document"});
$("div:eq(7)").draggable({dragPrevention:"input"});
$("input[type=button]:eq(0)").click(function(){
$("div").draggable("disable");
});
$("input[type=button]:eq(1)").click(function(){
$("div").draggable("enable");
});
});
</script>
</head>
<body>
<div><input type="text" value="我不触发" size="8"></div>
<div>只能大步移动grid</div>
<div>我要回到原地revert</div>
<div>我是被复制的helper:clone</div>
<div>拖拽我要透明opacity</div>
<div><p>拖拽我才行</p></div>
<div>我不能出页面...</div>
<div>总控制台<br><input type="button" value="禁止"> <input type="button" value="允许"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>购物车droppable()</title>
<style type="text/css">
<!--
body{
background:#ffe7bc;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
.draggable{
width:70px; height:40px;
border:2px solid;
padding:10px; margin:5px;
text-align:center;
}
.green{
background-color:#73d216;
border-color:#4e9a06;
}
.red{
background-color:#ef2929;
border-color:#cc0000;
}
.droppable {
position:absolute;
right:20px; top:20px;
width:200px; height:200px;
background-color:#e9b96e;
border:3px double #c17d11;
padding:5px;
text-align:center;
}
-->
</style>
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.draggable.min.js"></script>
<script language="javascript" src="jquery.ui/ui.droppable.min.js"></script>
<script language="javascript">
$(function(){
$(".draggable").draggable({helper:"clone"});
$("#droppable-accept").droppable({
accept: function(draggable){
//接收类别为green的
return $(draggable).hasClass("green");
},
drop: function(){
$(this).append($("<div></div>").html("drop!"));
}
});
});
</script>
</head>
<body>
<div class="draggable red">draggable red</div>
<div class="draggable green">draggable green</div>
<div id="droppable-accept" class="droppable">droppable<br></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>流行的Tab菜单</title>
<link type="text/css" href="jquery.ui/flora.tabs.css" rel="stylesheet" />
<style type="text/css">
<!--
body{
background:#ffe7bc;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.tabs.min.js"></script>
<script language="javascript">
$(function(){
//直接制作Tab菜单
$("#container > ul").tabs();
});
</script>
</head>
<body>
<div id="container">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">春节(Spring Festival)中国民间最隆重最富有特色的传统节日，它标志农历旧的一年结束和新的一年的开始。春节一般指除夕和正月初一 。但在民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。在春节期间，我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩，带有浓郁的民族特色。</div>
<div id="fragment-2">农历五月初五，俗称“端午节”。端是“开端”、“初”的意思。初五可以称为端五。农历以地支纪月，正月建寅，二月为卯，顺次至五月为午，因此称五月为午月，“五”与“午”通，“五”又为阳数，故端午又名端五、重五、端阳、中天等。从史籍上看，“端午”二字最早见于晋人周处《风土记》：“仲夏端午，烹鹜角黍”。端午节是我国汉族人民的传统节日。这一天必不可少的活动逐渐演变为：吃粽子，赛龙舟，挂菖蒲、艾叶，薰苍术、白芷，喝雄黄酒。据说，吃粽子和赛龙舟，是为了纪念屈原，所以解放后曾把端午节定名为“诗人节”，以纪念屈原。至于挂菖蒲、艾叶，薰苍术、白芷，喝雄黄酒，则据说是为了压邪。</div>
<div id="fragment-3"> 农历九月九日，为传统的重阳节。重阳节又称为"双九节""老人节"因为古老的《易经》中把“六”定为阴数，把“九”定为阳数，九月九日，日月并阳，两九相重，故而叫重阳，也叫重九，古人认为是个值得庆贺的吉利日子，并且从很早就开始过此节日。庆祝重阳节的活动多彩浪漫，一般包括出游赏景、登高远眺、观赏菊花、遍插茱萸、吃重阳糕、饮菊花酒等活动。九九重阳，因为与“久久”同音，九在数字中又是最大数，有长久长寿的含义，况且秋季也是一年收获的黄金季节，重阳佳节，寓意深远，人们对此节历来有着特殊的感情，唐诗宋词中有不少贺重阳，咏菊花的诗词佳作。今天的重阳节，被赋予了新的含义，在1989年，我国把每年的九月九日定为老人节（敬老节），传统与现代巧妙地结合，成为尊老、敬老、爱老、助老的老年人的节日。全国各机关、团体、街道，往往都在此时组织从工作岗位上退下来的老人们秋游赏景，或临水玩乐，或登山健体，让身心都沐浴在大自然的怀抱里；不少家庭的晚辈也会搀扶着年老的长辈到郊外活动或为老人准备一些可口的饮食。</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>流行的Tab菜单</title>
<link type="text/css" href="jquery.ui/flora.tabs.css" rel="stylesheet" />
<style type="text/css">
<!--
body{
background:#ffe7bc;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script language="javascript" src="jquery.ui/jquery-1.2.4a.js"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.tabs.min.js"></script>
<script language="javascript">
$(function(){
//直接制作Tab菜单，默认选择为第二项，且切换的时候fade动画
$("#container > ul").tabs({fx:{opacity:"toggle",height:"toggle"}, selected:1});
});
</script>
</head>
<body>
<div id="container">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">春节(Spring Festival)中国民间最隆重最富有特色的传统节日，它标志农历旧的一年结束和新的一年的开始。春节一般指除夕和正月初一 。但在民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。在春节期间，我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩，带有浓郁的民族特色。</div>
<div id="fragment-2">农历五月初五，俗称“端午节”。端是“开端”、“初”的意思。初五可以称为端五。农历以地支纪月，正月建寅，二月为卯，顺次至五月为午，因此称五月为午月，“五”与“午”通，“五”又为阳数，故端午又名端五、重五、端阳、中天等。从史籍上看，“端午”二字最早见于晋人周处《风土记》：“仲夏端午，烹鹜角黍”。端午节是我国汉族人民的传统节日。这一天必不可少的活动逐渐演变为：吃粽子，赛龙舟，挂菖蒲、艾叶，薰苍术、白芷，喝雄黄酒。据说，吃粽子和赛龙舟，是为了纪念屈原，所以解放后曾把端午节定名为“诗人节”，以纪念屈原。至于挂菖蒲、艾叶，薰苍术、白芷，喝雄黄酒，则据说是为了压邪。</div>
<div id="fragment-3"> 农历九月九日，为传统的重阳节。重阳节又称为"双九节""老人节"因为古老的《易经》中把“六”定为阴数，把“九”定为阳数，九月九日，日月并阳，两九相重，故而叫重阳，也叫重九，古人认为是个值得庆贺的吉利日子，并且从很早就开始过此节日。庆祝重阳节的活动多彩浪漫，一般包括出游赏景、登高远眺、观赏菊花、遍插茱萸、吃重阳糕、饮菊花酒等活动。九九重阳，因为与“久久”同音，九在数字中又是最大数，有长久长寿的含义，况且秋季也是一年收获的黄金季节，重阳佳节，寓意深远，人们对此节历来有着特殊的感情，唐诗宋词中有不少贺重阳，咏菊花的诗词佳作。今天的重阳节，被赋予了新的含义，在1989年，我国把每年的九月九日定为老人节（敬老节），传统与现代巧妙地结合，成为尊老、敬老、爱老、助老的老年人的节日。全国各机关、团体、街道，往往都在此时组织从工作岗位上退下来的老人们秋游赏景，或临水玩乐，或登山健体，让身心都沐浴在大自然的怀抱里；不少家庭的晚辈也会搀扶着年老的长辈到郊外活动或为老人准备一些可口的饮食。</div>
</div>
</body>
</html>