`

juery 插件使用

jquery 
阅读更多 
<!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>&nbsp;</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>
分享到：
| jquery 开发ajax
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery插件使用小样大全

    《jQuery插件使用小样大全》是一份集中的资源，旨在帮助开发者快速理解和掌握jQuery插件的使用。jQuery，作为一款强大的JavaScript库，极大地简化了DOM操作、事件处理、动画制作等任务。而jQuery插件则进一步扩展了...

    jquery插件使用

    《jQuery插件使用详解》 在Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。本文将深入探讨jQuery插件的使用，旨在帮助开发者更好地理解和应用这一强大工具。 一、...

    jQuery插件使用参考手册

    jQuery插件使用参考手册，介绍了9个常用的插件的使用方法以及相关的参考内容

    50多个jQuery插件使用详解

    50多个jQuery插件使用详解： 1 JQuery Pager分页器 2 jQuery Spin Button自定义文本框数值自增或自减 3 FontSizer实现Javascript自定义动态调整网页文字大小 4 Magnify放大镜实现javascript图片放大功能 等等.....

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery插件库大全（200个）.zip

    jquery插件库大全（200个）： jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    JQuery史上最全插件应用及实例

    通过这份资料，你不仅可以掌握jQuery插件的使用，还能了解到前端开发的最佳实践，从而提升你的Web开发技能。无论是初学者还是有经验的开发者，都能从中受益，实现更高效、更优质的前端开发工作。

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    很好用的Jquery插件

    本文将深入探讨“很好用的Jquery插件”，并介绍几个常用插件及其简单使用方法，这对于在项目中提升用户体验具有显著帮助。 首先，jQuery库的核心优势在于它的API设计，它提供了丰富的选择器、DOM操作、事件处理和...

    jQuery打印插件jqprint，内包含使用示例

    jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 ...

    jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件.zip

    jquery-dateFormat, 使用JavaScript格式化日期输出的jQuery插件 使用JavaScript格式输出日期输出的jQuery dateformat插件- 拥有的，jQuery是最小的日期格式库。 ！ 安装下载最新的jquery.dateFormat.js 或者 jquery....

    jQuery插件,jQuery插件

    通过编写或使用jQuery插件，开发者可以轻松地实现特定功能，而无需从零开始编写大量的JavaScript代码。 创建一个jQuery插件通常涉及到以下几个步骤： 1. **封装函数**：首先，你需要将你的功能封装成一个函数，这...

    jQuery插件集之(页面模板)多个+Demo

    2. **jQuery插件使用**：每个插件都有其特定的使用方式，通常涉及在页面中引入插件的JavaScript文件，然后调用相应的函数。比如，如果有一个用于幻灯片展示的插件，你可能需要在HTML中指定一个容器，并在JavaScript...

    jquery 插件

    jQuery 插件不仅限于独立使用，还可以与其他库和框架如 AngularJS、Vue.js 或 React.js 结合。通过 jQuery 提供的 DOM 操作和事件处理能力，可以方便地在这些现代框架中插入传统 jQuery 功能。 ### 7. 总结 jQuery...

    jQuery插件开发学习

    通过这样的结构，我们可以创建一个易于使用且功能强大的jQuery插件，用户只需一行代码就能在页面上添加一个数字时钟： ```javascript $('.clock').digitclock(); ``` 总的来说，学习jQuery插件开发有助于提升...

    好用清除html的jquery插件

    你可以通过查看源代码来学习其工作原理，这对于初学者或者希望深入了解jQuery插件开发的人来说是一个很好的学习机会。 标签“清除html格式”是这个插件的核心特性，它可能包括移除HTML标签、属性、样式以及其他非...

    jquery插件.rar

    《jQuery插件开发详解》 在Web开发领域，jQuery是一个广泛应用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分，它们扩展了jQuery的核心...

    jquery插件

    在本文中，我们将深入探讨jQuery插件的工作原理、如何使用以及一些常见的插件实例。 ### 1. jQuery 插件的工作原理 jQuery 插件本质上是将功能封装到一个自定义函数中，然后通过`.fn.extend`方法将这个函数添加到...

    Jquery插件

    对于公开的jQuery插件，通常会打包成一个单独的JS文件，然后通过CDN或本地引入的方式在项目中使用。同时，为了便于管理和维护，插件开发者也会将CSS样式、图片资源等一同打包，并提供详细的文档说明。 ### 8. 结语 ...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

Magicbox
Global site tag (gtag.js) - Google Analytics