JQuery插件
2013-12-24 11:11
225 查看
JQuery插件
可以在JQuery官网上查到所有插件
1、validate插件（验证控件）对应的控件必须是name属性，而不是根据id
为控件使用验证规则，需要放在rules{}中，如果要验证的控件只有一种验证规则(如下图中只验证非空)，
则可以采用”name:验证规则”的方式，如图1；如应用多个验证规则，则需要使用{}括起来，如图2
图1
图2
验证规则：可以在官网上查询或者其他途径。
按钮 submint和button的区别：前者会自动提交到form指定的action属性指定的服务器文件，
如果不想提交，则需要代码上加上return false；后者只是一个普通按钮，不会触发提交事件
2、cookie插件
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$.cookie("username") 的值为字符串'null'
if ($.cookie("username") != 'null') {
$('#username').val($.cookie("username"));
}
$('#Button1').bind('click', function () {
//判断如果用户选中复选框“记住我”，则执行下面cookie的写入，否则不操作
if (document.getElementById('Checkbox1').checked == true) {
//书写格式如下：需要三个参数，如果不设置过期时间那么为临时的cookie
$.cookie("username", $('#username').val(), { expires: 1 })//过期时间单位为天
}
})
$('#Button2').bind('click', function () {
$.cookie("username", null); //设定cookie过期,而不是像C# js中把过期时间设置为负数
})
})
</script>
</head>
<body>
<p>
用户名：<input id="username" type="text" /></p>
<p>
密码：<input id="password" type="text" /></p>
<p>
记住我：<input id="Checkbox1" type="checkbox" /></p>
<p>
<input id="Button1" type="button" value="登录" /><input id="Button2" type="button"
value="清除cookie" /></p>
</body>
</html>
3、智能感知插件
需要将css样式引入，网址是：http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/autocomplete.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = ["周杰伦", "周传雄", "老周", "刘德华", "刘恺威", "老刘", "杨幂", "杨瑞鹏", "杨贵妃", "老杨"];
$('#query').autocomplete({
source: data, //当在文本框中输入内容时，到数组data中筛选符合条件的元素
//delay: 2000,
autoFocus:false,
select: function (event, ui) {
var query = ui.item.value; //获取当前选择的元素
window.location = 'http://www.baidu.com/s?wd=' + query;
}
})
})
</script>
</head>
<body>
<input type="text" id="query" /><input id="Button1" type="button" value="百度一下" />
</body>
</html>
4、图片查看（NFlightbox）插件
需要注意的是：
1、div的id只能是：gallery
2、图标放在images文件夹中，图标就是显示大图片后所要点击的上一页，下一页等
3、图片放在photos文件夹中
4、JQuery包的版本不能是1.10，可以是1.7
5、要想将一个层作为背景的时候，层上面的元素可以设置display: inline;这个属性
6、css样式为：
#jquery-overlay
{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox
{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img
{
border: none;
}
#lightbox-container-image-box-top
{
width: 100%;
}
#lightbox-container-image-box-top-left
{
width: 10%;
height: 1px;
position: relative;
margin: 0 auto;
float: left;
z-index: 10;
display: inline;
text-align: left;
}
#lightbox-container-image-box-top-middle
{
width: 80%;
padding-top: 5px;
height: 5px;
position: relative;
margin: 0 auto 0 0px;
float: left;
z-index: 5;
display: inline;
}
#lightbox-container-image-box-top-middle div.progress
{
width: 80%;
padding-top: 5px;
height: 5px;
position: relative;
margin: 0 auto 0 0px;
float: left;
background-color: #e4e4e4;
z-index: 5;
display: inline;
}
#lightbox-container-image-box-top-right
{
width: 10%;
height: 1px;
position: relative;
margin: 0 auto;
float: right;
text-align: right;
z-index: 10;
display: inline;
}
#lightbox-container-image-box
{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image
{
height: 100%;
padding: 10px;
}
#lightbox-loading
{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav
{
position: absolute;
top: 32px;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav
{
left: 0;
}
#lightbox-nav a
{
outline: none;
}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext
{
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev
{
left: 0;
float: left;
}
#lightbox-nav-btnNext
{
right: 0;
float: right;
}
#lightbox-container-image-data-box
{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
text-align: left;
}
#lightbox-container-image-data #lightbox-image-details
{
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption
{
font-weight: bold;
display: block;
height: 25px;
line-height: 25px;
vertical-align: middle;
}
#lightbox-image-details-currentNumber
{
display: block;
clear: left;
padding-bottom: 1.0em;
display: inline;
height: 16px;
line-height: 16px;
vertical-align: middle;
}
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image,
#lightbox-image-details-next-text
{
display: inline;
height: 25px;
line-height: 25px;
vertical-align: middle;
cursor: pointer;
cursor: hand;
}
例子：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebNFlightbox.aspx.cs"
Inherits="WebApplication1.WebNFlightbox" %>
<!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 runat="server">
<title></title>
<link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />/*样式如上*/
<script src="script/jquery-1.7.2.js" type="text/javascript"></script>
<script src="script/NFLightBox.js" type="text/javascript"></script>/*都要引用*/
<style type="text/css">
#gallery
{
width: 500px;
background-color: Gray;
padding: 10px;
}
#gallery ul
{
list-style-type: none;
}
#gallery ul li
{
display: inline;
}
#gallery ul li img
{
border: 5px solid white;
width: 100px;
height: 66px;
}
#gallery ul li a:hover img
{
border-width:5px 5px 20px 5px;
}
</style>
<script type="text/javascript">
$(function () {
var settings = { containerResizeSpeed: 350
};
$('#gallery a').lightBox(settings);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gallery">
<ul>
<li><a href="photos/image1.jpg">
<img src="photos/thumb_image1.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image2.jpg">
<img src="photos/thumb_image2.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image3.jpg">
<img src="photos/thumb_image3.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image4.jpg">
<img src="photos/thumb_image4.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image5.jpg">
<img src="photos/thumb_image5.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image6.jpg">
<img src="photos/thumb_image6.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image7.jpg">
<img src="photos/thumb_image7.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image8.jpg">
<img src="photos/thumb_image8.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image9.jpg">
<img src="photos/thumb_image9.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image10.jpg">
<img src="photos/thumb_image10.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image11.jpg">
<img src="photos/thumb_image11.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image12.jpg">
<img src="photos/thumb_image12.jpg" alt="" title="图片1" /></a> </li>
</ul>
</div>
</form>
</body>
</html>
5、放大镜插件 zoom插件
a、一张小图片，一张大图片
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.classsmall
{
width: 200px;
float: left;
}
.classbig
{
width: 500px;
height: 500px;
float: left;
}
</style>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery.zoom.js" type="text/javascript"></script>/*引用*/
<script type="text/javascript">
$(function () {
$('#divsmall').zoom({
url: 'photos/dddd.jpg',
target: '#divbig',
//on:'click'
duration:2000
});
})
</script>
</head>
<body>
<div id="divsmall" class="classsmall">
<img src="photos/ssss.jpg" /></div>
<div id="divbig" class="classbig">
</div>
</body>
</html>
可以在JQuery官网上查到所有插件
1、validate插件（验证控件）对应的控件必须是name属性，而不是根据id
为控件使用验证规则，需要放在rules{}中，如果要验证的控件只有一种验证规则(如下图中只验证非空)，
则可以采用”name:验证规则”的方式，如图1；如应用多个验证规则，则需要使用{}括起来，如图2
图1
图2
验证规则：可以在官网上查询或者其他途径。
按钮 submint和button的区别：前者会自动提交到form指定的action属性指定的服务器文件，
如果不想提交，则需要代码上加上return false；后者只是一个普通按钮，不会触发提交事件
2、cookie插件
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//$.cookie("username") 的值为字符串'null'
if ($.cookie("username") != 'null') {
$('#username').val($.cookie("username"));
}
$('#Button1').bind('click', function () {
//判断如果用户选中复选框“记住我”，则执行下面cookie的写入，否则不操作
if (document.getElementById('Checkbox1').checked == true) {
//书写格式如下：需要三个参数，如果不设置过期时间那么为临时的cookie
$.cookie("username", $('#username').val(), { expires: 1 })//过期时间单位为天
}
})
$('#Button2').bind('click', function () {
$.cookie("username", null); //设定cookie过期,而不是像C# js中把过期时间设置为负数
})
})
</script>
</head>
<body>
<p>
用户名：<input id="username" type="text" /></p>
<p>
密码：<input id="password" type="text" /></p>
<p>
记住我：<input id="Checkbox1" type="checkbox" /></p>
<p>
<input id="Button1" type="button" value="登录" /><input id="Button2" type="button"
value="清除cookie" /></p>
</body>
</html>
3、智能感知插件
需要将css样式引入，网址是：http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/autocomplete.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var data = ["周杰伦", "周传雄", "老周", "刘德华", "刘恺威", "老刘", "杨幂", "杨瑞鹏", "杨贵妃", "老杨"];
$('#query').autocomplete({
source: data, //当在文本框中输入内容时，到数组data中筛选符合条件的元素
//delay: 2000,
autoFocus:false,
select: function (event, ui) {
var query = ui.item.value; //获取当前选择的元素
window.location = 'http://www.baidu.com/s?wd=' + query;
}
})
})
</script>
</head>
<body>
<input type="text" id="query" /><input id="Button1" type="button" value="百度一下" />
</body>
</html>
4、图片查看（NFlightbox）插件
需要注意的是：
1、div的id只能是：gallery
2、图标放在images文件夹中，图标就是显示大图片后所要点击的上一页，下一页等
3、图片放在photos文件夹中
4、JQuery包的版本不能是1.10，可以是1.7
5、要想将一个层作为背景的时候，层上面的元素可以设置display: inline;这个属性
6、css样式为：
#jquery-overlay
{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
}
#jquery-lightbox
{
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}
#jquery-lightbox a img
{
border: none;
}
#lightbox-container-image-box-top
{
width: 100%;
}
#lightbox-container-image-box-top-left
{
width: 10%;
height: 1px;
position: relative;
margin: 0 auto;
float: left;
z-index: 10;
display: inline;
text-align: left;
}
#lightbox-container-image-box-top-middle
{
width: 80%;
padding-top: 5px;
height: 5px;
position: relative;
margin: 0 auto 0 0px;
float: left;
z-index: 5;
display: inline;
}
#lightbox-container-image-box-top-middle div.progress
{
width: 80%;
padding-top: 5px;
height: 5px;
position: relative;
margin: 0 auto 0 0px;
float: left;
background-color: #e4e4e4;
z-index: 5;
display: inline;
}
#lightbox-container-image-box-top-right
{
width: 10%;
height: 1px;
position: relative;
margin: 0 auto;
float: right;
text-align: right;
z-index: 10;
display: inline;
}
#lightbox-container-image-box
{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}
#lightbox-container-image
{
height: 100%;
padding: 10px;
}
#lightbox-loading
{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#lightbox-nav
{
position: absolute;
top: 32px;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav
{
left: 0;
}
#lightbox-nav a
{
outline: none;
}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext
{
width: 49%;
height: 100%;
zoom: 1;
display: block;
}
#lightbox-nav-btnPrev
{
left: 0;
float: left;
}
#lightbox-nav-btnNext
{
right: 0;
float: right;
}
#lightbox-container-image-data-box
{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;
padding: 0 10px 0;
text-align: left;
}
#lightbox-container-image-data #lightbox-image-details
{
width: 70%;
float: left;
text-align: left;
}
#lightbox-image-details-caption
{
font-weight: bold;
display: block;
height: 25px;
line-height: 25px;
vertical-align: middle;
}
#lightbox-image-details-currentNumber
{
display: block;
clear: left;
padding-bottom: 1.0em;
display: inline;
height: 16px;
line-height: 16px;
vertical-align: middle;
}
#lightbox-image-details-previous-image, #lightbox-image-details-previous-text, #lightbox-image-details-next-image,
#lightbox-image-details-next-text
{
display: inline;
height: 25px;
line-height: 25px;
vertical-align: middle;
cursor: pointer;
cursor: hand;
}
例子：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebNFlightbox.aspx.cs"
Inherits="WebApplication1.WebNFlightbox" %>
<!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 runat="server">
<title></title>
<link href="css/nf.lightbox.css" rel="stylesheet" type="text/css" />/*样式如上*/
<script src="script/jquery-1.7.2.js" type="text/javascript"></script>
<script src="script/NFLightBox.js" type="text/javascript"></script>/*都要引用*/
<style type="text/css">
#gallery
{
width: 500px;
background-color: Gray;
padding: 10px;
}
#gallery ul
{
list-style-type: none;
}
#gallery ul li
{
display: inline;
}
#gallery ul li img
{
border: 5px solid white;
width: 100px;
height: 66px;
}
#gallery ul li a:hover img
{
border-width:5px 5px 20px 5px;
}
</style>
<script type="text/javascript">
$(function () {
var settings = { containerResizeSpeed: 350
};
$('#gallery a').lightBox(settings);
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="gallery">
<ul>
<li><a href="photos/image1.jpg">
<img src="photos/thumb_image1.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image2.jpg">
<img src="photos/thumb_image2.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image3.jpg">
<img src="photos/thumb_image3.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image4.jpg">
<img src="photos/thumb_image4.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image5.jpg">
<img src="photos/thumb_image5.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image6.jpg">
<img src="photos/thumb_image6.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image7.jpg">
<img src="photos/thumb_image7.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image8.jpg">
<img src="photos/thumb_image8.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image9.jpg">
<img src="photos/thumb_image9.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image10.jpg">
<img src="photos/thumb_image10.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image11.jpg">
<img src="photos/thumb_image11.jpg" alt="" title="图片1" /></a> </li>
<li><a href="photos/image12.jpg">
<img src="photos/thumb_image12.jpg" alt="" title="图片1" /></a> </li>
</ul>
</div>
</form>
</body>
</html>
5、放大镜插件 zoom插件
a、一张小图片，一张大图片
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.classsmall
{
width: 200px;
float: left;
}
.classbig
{
width: 500px;
height: 500px;
float: left;
}
</style>
<script src="script/jquery-1.10.2.js" type="text/javascript"></script>
<script src="script/jquery.zoom.js" type="text/javascript"></script>/*引用*/
<script type="text/javascript">
$(function () {
$('#divsmall').zoom({
url: 'photos/dddd.jpg',
target: '#divbig',
//on:'click'
duration:2000
});
})
</script>
</head>
<body>
<div id="divsmall" class="classsmall">
<img src="photos/ssss.jpg" /></div>
<div id="divbig" class="classbig">
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JQuery上传插件Uploadify使用详解及错误处理
- 活动倒计时代码（精确到毫秒）jquery插件
- jQuery 中插件的使用与开发---附全部源码（含 jQuery1.3.2 for VS 的智能提示js文件）
- Jquery 投票插件
- 用于图片处理的10个超级jQuery插件
- jQuery插件学习（二）
- 100+ jquery插件应用,让你的Web开发事半功倍_前端设计
- GBin1推荐：jQuery的计算器插件 - jCalculator
- 一个简单的全选Jquery插件
- jQuery中的supersized的插件的功能描述
- 使用jQuery的插件qrcode生成二维码（静态+动态生成）及常见问题解决方法
- 国外24个jQuery搜索插件
- jquery 插件treeTable使用
- 编写JQuery插件
- Jquery 常用240插件
- jQuery插件开发
- 1000个jquery极品插件
- 今天试了两个显示 pdf 的 js 插件，pdf js 比较好使，jquery media js 不支持 firefox
- jquery.page.js分页插件使用
- 8款非常棒的响应式 jQuery 幻灯片插件推荐