jquery的各种插件调用（有些已经过时，以备注，其他的一些可以闲的时候用作拆解）

时间：2016-01-17 21:32:13 阅读：257 评论：0 收藏：0 [点我收藏+]

标签：

jquery的valiteDate验证插件应用

<!DOCTYPE html>

<html>

< head>

< meta charset= "UTF-8">

< title></title >

< script src= "js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8" ></script>

< script src= "js/jquery.validate.js" type="text/javascript" charset="utf-8" ></script>

< script src= "js/jquery.validate.messages_cn.js" type="text/javascript" charset="utf-8" ></script>

</ head>

< body>

< form action= "#" method= "post" id= "form1">

< div id= "va">

< div>

< label for= "">姓名</label >

< input type= "text" name= "username" id="username" value="" placeholder="请输入姓名" />

< span></span >

</ div>

< br />

< div>

< label for= "">邮箱</label >

< input type= "email" name= "email" id="email" value="" placeholder="请输入邮箱地址" />

< span></span >

</ div>

< div>

< label for= "">手机号</label>

< input type= "text" name= "tel" id="tel" value="" placeholder="请输入手机号" />

< span></span >

</ div>

< br />

< input type= "submit" value= "提交" />

</ div>

</ form>

</ body>

< script type= "text/javascript">

$(function(){

$( "#form1").validate({

rules :{

username :{required: true,minlength: 6},

email :{required: true,email: true},

tel :{required: true,call: true}

errorPlacement :function( error,element ){

error.appendTo(element .siblings("span"));

}

});

})

</script>

</html>

jquery的表单提交插件form插件，用于简化表单提交操作

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>form表单插件</title>

	<script type="text/javascript"
	src="Js-7-2/jquery.form.js">
	</script>
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:260px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;font-weight:bold}
	.divFrame .divContent{padding:8px;line-height:1.6em}
	.divFrame .divBtn,#divData{padding-bottom:8px;padding-left:8px}
	.txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;width:80px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
	</style>
	<script type="text/javascript">
	$(function() {
	//定义一个表单提交时的对象
	var options = {
	url:"Login.aspx", //默认为form中的action,设置后便覆盖默认值
	target: "#divData" //将服务器返回的数据显示在Id号为divData元素中
	}
	$("#frmUserInfo").ajaxForm(options);//以Ajax的方式提交表单
	})
	</script>
	</head>
	<body>
	<form id="frmUserInfo" method="get" action="#">
	<div class="divFrame">
	<div class="divTitle">
	用户登录
	</div>
	<div class="divContent">
	<div>
	用户名：<br />
	<input id="username" name="username"
	type="text" class="txt" />
	</div>
	<div>
	密码：<br />
	<input id="userpass" name="userpass"
	type="password" class="txt" />
	</div>
	</div>
	<div class="divBtn">
	<input id="sbtUser" type="submit"
	value="提交" class="btn" />
	</div>
	<div id="divData"></div>
	</div>
	</form>
	</body>
	</html>

下面是login。aspx页面内容

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %>

string strName = Request["username"]; //姓名字符

string strPass = Request["userpass"]; //密码字符

string strRetValue = "用户名：" + strName + "<br>密码：" + strPass;

Response.Write(strRetValue);

jquery的cookie插件

<!DOCTYPE html>

<html>

< head>

< meta charset= "UTF-8">

< title></title >

< script src= "js/jquery-1.11.1.min.js" type="text/javascript" charset="utf-8" ></script>

< script src= "js/jquery.cookie.js" type="text/javascript" charset="utf-8" ></script>

</ head>

< body>

< form action= "#" method= "post" id= "form1">

< div id= "va">

< div>

< label for= "">姓名</label >

< input type= "text" name= "username" id="username" value="" placeholder="请输入姓名" />

< span></span >

</ div>

< br />

< div>

< label for= "">邮箱</label >

< input type= "email" name= "email" id="email" value="" placeholder="请输入邮箱地址" />

< span></span >

</ div>

< div>

< input id= "chkSave" type= "checkbox" /> 是否保存用户名

</ div>

< br />

< input type= "submit" id= "sub" value= "提交" />

</ div>

</ form>

</ body>

$(function(){

if($.cookie("username" )){

$( "#username").val($.cookie("username" ));

}

$( "#sub").submit (function(){

if($("#chkSave" ).attr( "checked")){

$.cookie( "username",$("#username" ).val(),{

path :"/",expires :7

})

}

else{

$.cookie( "username",null ,{

path :"/"

})

}

return false;

})

</script>

</html>

cookie好像不怎么好

jquery搜索插件AutoComplete

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>autocomplete插件</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<script type="text/javascript"
	src="Js-7-4/jquery.autocomplete.js">
	</script>
	<link rel="stylesheet" type="text/css"
	href="Css-7-4/jquery.autocomplete.css" />
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:260px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;font-weight:bold}
	.divFrame .divContent{padding:8px;line-height:1.6em}
	.divFrame .divBtn,#divData{padding-bottom:8px;padding-left:8px}
	.txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
	.btn {border:#666 1px solid;padding:2px;width:80px;margin-bottom:3px;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
	</style>
	<script type="text/javascript">
	$(function() {
	var arrUserName = ["张三", "王小五", "张才子",
	"李四", "张大三", "李大四", "王五", "刘明",
	"李小四", "刘促明", "李渊", "张小三", "王小明"];
	$("#txtSearch").autocomplete(arrUserName, {
	minChars: 0, //双击空白文本框时显示全部提示数据
	formatItem: function(data, i, total) {
	return "<I>" + data[0] + "</I>"; //改变匹配数据显示的格式
	},
	formatMatch: function(data, i, total) {
	return data[0];
	},
	formatResult: function(data) {
	return data[0];
	}
	}).result(SearchCallback); //选中匹配数据中的某项数据时，调用插件的result()方法
	//自定义返回匹配结果函数
	function SearchCallback(event, data, formatted) {
	$("#divData").html("您的选择是：" + (!data ? "空" : formatted));
	}
	//点击"查一下"按钮后，触发插件的search()方法
	$("#btnSearch").click(function() {
	$("#txtSearch").search();
	});
	})
	</script>
	</head>
	<body>
	<div class="divFrame">
	<div class="divTitle">
	搜索用户
	</div>
	<div class="divContent">
	<span style="padding:0 5px 0 10px"><a href="#">新闻</a></span>
	<span style="padding:0 5px 0 5px"><b>用户</b></span>
	<div>
	<input type="text" id="txtSearch" class="txt" />
	<input type="button" id="btnSearch" value="查一下" class="btn" />
	</div>
	</div>
	<div id="divData"></div>
	</div>
	</body>
	</html>

jquery灯笼图片箱插件notesforlightbox。暂不推荐。。官网都没了，原版本支持1.4.2但不支持1.11.min

右键菜单插件contextmenu

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>ContextMenu插件</title>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2-vsdoc.js">
	</script>
	<script type="text/javascript"
	src="Jscript/jquery-1.4.2.js">
	</script>
	<script type="text/javascript"
	src="Js-7-6/jquery.contextmenu.js">
	</script>
	<link rel="stylesheet" type="text/css"
	href="Css-7-6/jquery.contextmenu.css" />
	<style type="text/css">
	body{font-size:13px}
	.divFrame{width:260px;border:solid 1px #666}
	.divFrame .divTitle{padding:5px;font-weight:bold}
	.divFrame .divContent{padding:15px;line-height:1.6em}
	.divFrame .divContent textarea{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
	</style>
	<script type="text/javascript">
	$(function() {
	$(‘#txtContent‘).contextMenu(‘sysMenu‘,
	{ bindings:
	{
	‘Li1‘: function(Item) {
	alert("在ID号为：" + Item.id + "编辑框中，您点击了“新建”项");
	},
	‘Li2‘: function(Item) {
	alert("在ID号为：" + Item.id + "编辑框中，您点击了“打开”项");
	}
	//设置其它选项事件
	//...
	},
	menuStyle: {
	border: ‘2px solid #999‘
	},
	itemStyle: {
	fontFamily: ‘verdana‘,
	backgroundColor: ‘#666‘,
	color: ‘white‘,
	border: ‘none‘,
	padding: ‘1px‘

	},
	itemHoverStyle: {
	color: ‘#666‘,
	backgroundColor: ‘#f7f7f7‘,
	border: ‘none‘
	}
	});
	})
	</script>
	</head>
	<body>
	<div class="divFrame">
	<div class="divTitle">
	点击右键
	</div>
	<div class="divContent">
	<textarea id="txtContent" cols="30" rows="5"></textarea>
	</div>
	</div>
	<div class="contextMenu" id="sysMenu">
	<ul>
	<li id="Li1"><img src="Images-7-6/new.png" /> 新建</li>
	<li id="Li2"><img src="Images-7-6/folder.png" /> 打开</li>
	<li id="Li3"><img src="Images-7-6/disk.png" /> 保存</li>
	<hr />
	<li id="Li4"><img src="Images-7-6/cross.png" /> 退出</li>
	</ul>
	</div>
	</body>
	</html>

他的js

他的css

.contextMenu {display:none}

ul li {font-size:9pt}

图片放大插件jqzoom

jquey.1.11不支持～

jquery的各种插件调用（有些已经过时，以备注，其他的一些可以闲的时候用作拆解）

标签：

原文地址：http://www.cnblogs.com/jldiary/p/5137801.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行