juery 插件使用

最新推荐文章于 2023-05-29 00:19:14 发布
最新推荐文章于 2023-05-29 00:19:14 发布
阅读量107 收藏
点赞数
分类专栏： jQuery 文章标签： jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_2903/article/details/82522500
版权 

<!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>
iteye_2903
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery插件使用
08-13
jquery插件使用
jQuery打印插件jqprint，内包含使用示例
04-24
jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 ...
jQuery插件使用
qq_43227109的博客
09-18 4771
1.什么是jQuery插件？ 往jquery类库里面去扩展方法，这类方法就是jquery插件。 2.json的三种格式 1 对象 2 列表/数组 3 混合模式（下面由代码演示） 3.$.extend和$.fn.extend！ //$.extend是用来扩充jQuery类属性或方法所用 var e3={}; //用后面的对象来扩充前面的对象 $.extend(e3,i1); ...
jQuery插件的使用
廖若星辰-LTY
07-07 1602
jQuery功能虽然强大但也有限，想要更复杂的特效效果，我们可以借助jQuery插件完成。 注：这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件才行，所以称为jQuery插件。 这里先分享两个jQuery插件的常用网站： jQuery插件库：http://www.jq22.com/ jQuery之家：http://www.htmleaf.com/ 下面直接来介绍jQuery插件的使用步骤： 首先进入插件网站（这里以jQuery之家为例）找到自己想要使用的插件； 可以先“查
JQuery插件使用小结
热门推荐
学会改变自己——才能突破
04-03 1万+
在前台对数据的验证处理，Jquery起着非常强大的作用。首先Jquery是对JS的代码的封装，相当于我们前台的框架，但是它只是一个基础的js框架，能够实现一些简单的功能，而对于一些比较复杂的功能，我们拿它来实现就非常麻烦了。但是不要着急，JQeury插件可以给我们解决很多问题，而且更重要的是使用非常简单。简单总结一下，使用过的JQuery插件。           一，Jquery.t
JQuery 如何使用插件&如何安装插件(详细讲解)
m0_65725031的博客
03-22 5235
今天是jquery的最后一节课，小编教大家如何使用插件，也算是一个jquery的一个扩展，大家有不懂的在下方评论或者私信小编噢。 一.自定义插件 1.$.extend(对象1,对象2) ------->对象1继承对象2 格式: $.方法名() 2.$.fn.extend({ 方法名:function (){} }) 注： 使用$.fn.extend({ 方法名:function (){} ...
编写jQuery插件
SeekerTime
07-11 1330
一、插件的种类        jQuery的插件主要分为三种类型：        1、封装对象方法的插件                         将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。        2、封装全局函数的插件                        可以将独立的函数加到jQuery命名空间之下。如jQuery.
jQuery其他方法及插件使用
十三阿哥的博客
05-29 2055
此时___targetObj 和 ___obj对象中的复杂类型msg对象的地址都不一样，各是各的，彼此互不影响;//1. 浅拷贝：只是把被拷贝对象的 【复杂数据类型中的地址给目标对象】，修改目标对象会影响被拷贝对象！// _targetObj原来的id被覆盖掉了, 同时name被添加进去了。//2. 深拷贝: 两个对象，仅仅是值的拷贝，单独有内存空间, 互不影响。//自己封装的函数, 使用了$作为函数名;// 和__targetObj内容是一样的。'----浅拷贝-----''----深拷贝-----'
Angular项目里怎么使用 jQuery 插件
MZ_的博客
08-10 1846
做项目遇到一个把HTML元素导出pdf的需求，查找资料后找到jQuery.print.js，在一个html页面里测试使用没问题（自己记录的文章）。但是项目使用的是Angular，安装完jquery后可以很方便地使用，但是怎么使用jquery的插件，比如jQuery.print，虽然引入了jquery.js和jQuery.print.js，但是控制台却报错：jquery未定义pr...
jQuery 插件
m0_62604616的博客
03-22 1661
今天呢，给大家带来的是关于jQuery插件的分享。 插件分为自定义插件和第三方插件，自定义插分为$.extend和$.fn.extend，而第三方插件呢是别人写的，我给大家带来一个官方的表单验证插件。 一、自定义插件 1、$.extend: $.extend有两个作用，【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2 代码块： <script type="text/javascript"> $..
jQuery插件库超级好用库
m0_49714202的博客
04-29 2280
点击进入 jQuery插件库-收集最全最新最好的jQuery插件 感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！
jquery插件库
wh柒八九的博客
02-14 1349
下面是jquery的插件库，有很多好用的jquery插件，链接地址为：https://www.jq22.com/
让图片旋转任意角度及JQuery插件使用介绍
10-27
图片旋转任意角度在某些应用中时很有必要的，现在有一款JQuery插件可以办得到，接下来为大家介绍下使用方法，感兴趣的朋友可以参考下哈，希望对你有所帮助
jQuery 的 countdown 插件
08-25
jQuery 的 countdown 插件：该插件提供了丰富的倒计时功能，包括自定义样式、自动更新等 https://github.com/lafitewu/countDown
jquery插件使用小样大全
08-31
jquery所有插件实现小样，轻松了解如何使用插件以及插件的方法，内付说明，不管你懂不懂，我是一看就懂啦。
当文本框获得焦点时使输入区域变大
百威
10-27 948
很多人认为表单应该占据最小的空间，先不管这个观点是不是正确，今天我们就实现当用户进行输入时，即本文框获得焦点时，将文本框的大小进行改变。这样，用户就能看到自己前边输入的东西了。 思路非常简单，就是当文本框获得焦点时，改变文本框的宽度或者高度。如果你看过我前边关于jQuery对元素属性操作的总结，相信几分钟就可实现本篇中的功能。 [code="java"] [/code] 假设网...
jQuery实现带遮罩层的消息框滑入滑出效果
百威
10-27 413
[code="java"] .overlay{ background:transparent url(images/overlay.png) repeat top left; position:fixed; top:0px; bottom:0px; left:0px; right:0px;...
用jQuery解决IE不支持的option disable属性
百威
11-09 348
[size=medium] 在IE浏览器中，给select的options设置 disable属性 是没用的。 必须采用一定手段才可以解决这个问题。当然原理就是记住上次选中的 option。 this.selectedIndex 就派上用场了。 需要刷新下才可以看到效果，因为输出的都是文本，不存在js加载的情况。 [/size] [code="java"] ...
jquery控制页面
百威
07-21 258
[code="java"] each()方法 $(function(){ $("img").each(function(index){ this.title = "这是第" + index + "幅图，id是：" + this.id; }); }); [/code] [code="java"] ...
jquery 插件大全
最新发布
12-22
通过使用这些jquery插件，可以极大地提高网页开发的效率和质量，同时也避免重复造轮子，节省开发成本。 jquery插件大全还提供了丰富的文档和示例，方便开发者学习和使用。开源的jquery插件也可以通过贡献者共同完善...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值