插件：Plugin，也称为扩展（Extension）。
是一种遵循一定规范的应用程序接口编写出来的程序。
最全插件从jQuery官方网站获取：
http://plugins.jquery.com/
托管Github：
https://github.com/jquery/plugins.jquery.com
jQuery表单验证插件——Validation
Validation简介
历史最悠久的jQuery插件之一，主要用于表单验证。特点如下：
- 内置验证规则
- 自定义验证规则
- 简单强大的验证信息提示
- 实时验证
下载地址
https://jqueryvalidation.org/
https://github.com/jquery-validation/jquery-validation/releases/tag/1.19.0
快速上手
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.validate.js" type="text/javascript"></script>
<style type="text/css">
* {
font-family: Verdana;
font-size: 96%;
}
label {
width: 10em;
float: left;
}
label.error {
float: none;
color: red;
padding-left: .5em;
vertical-align: top;
}
p {
clear: both;
}
.submit {
margin-left: 12em;
}
em {
font-weight: bold;
padding-right: 1em;
vertical-align: top;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="required" minlength="2" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="required email" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" class="url" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="required"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
</body>
</html>
必须把required、url和email写到class属性里，才能完成必填验证、url验证和E-mail验证。minlength属性的值设置为2，才能完成最小长度2的验证。
不同的验证写法
使用metadata插件可以将minlength和class写一起。
插件下载地址：
https://github.com/jquery-archive/jquery-metadata
改写代码
HTML
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true}}" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true}}" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
jQuery
$(document).ready(function () {
$("#commentForm").validate({
meta: "validate"
});
});
前面两种方式并没有做到行为与结构完全脱钩
使用name属性实现验证
HTML
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
jQuery
$(document).ready(function () {
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: "url",
comment: "required"
}
});
});
编码步骤
- 在$("#commentForm").validate()方法中增加rules属性。
- 通过每个字段的name属性值来匹配验证规则。
- 定义验证规则。
验证信息
国际化
Validation插件验证信息默认语言为英文。
使用需要导入语言库：
<script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></script>
自定义验证信息
把内容写到messages里面：
class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}"
或者jQuery实现
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
HTML
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>一个简单的验证带验证提示的评论例子</legend>
<p>
<label for="cusername">姓名</label>
<em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" />
</p>
<p>
<label for="cemail">电子邮件</label>
<em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" />
</p>
<p>
<label for="curl">网址</label>
<em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" />
</p>
<p>
<label for="ccomment">你的评论</label>
<em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}"></textarea>
</p>
<p>
<input class="submit" type="submit" value="提交" />
</p>
</fieldset>
</form>
jQuery
$(document).ready(function () {
$("#commentForm").validate({
meta: "validate"
});
});
自定义验证信息并美化
jQuery
errorElement: "em",
//用来创建错误提示信息标签
//可以用其他标签，记住把样式也对应修改
success: function (label) {
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
CSS
em.error {
background: url("images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
em.success {
background: url("images/checked.gif") no-repeat 0px 0px;
padding-left: 16px;
}
自定义验证规则
实例：
HTML
<p>
<label for="cvalcode">验证码</label>
<input id="cvalcode" name="valcode" size="25" value="" />=7+9
</p>
（1）自定义一个验证规则
//自定义一个验证方法
$.validator.addMethod(
"formula", //验证方法名称
function (value, element, param) { //验证规则
return value == eval(param);
},
'请正确输入数学公式计算后的结果' //验证提示信息
);
（2）调用该验证规则
valcode:{ formula: "7 + 9" }
其中7和9可以通过页面某个元素的text()或者通过Ajax获得，这里简单设置为7和9。
$("#commentForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
url: "url",
comment: "required",
valcode: {
formula: "7+9"
}
},
messages: {
username: {
required: '请输入姓名',
minlength: '请至少输入两个字符'
},
email: {
required: '请输入电子邮件',
email: '请检查电子邮件的格式'
},
url: '请检查网址的格式',
comment: '请输入您的评论'
},
errorElement: "em", //用来创建错误提示信息标签
success: function (label) { //验证成功后的执行的回调函数
//label指向上面那个错误提示信息标签em
label.text(" ") //清空错误提示消息
.addClass("success"); //加上自定义的success类
}
});
API
http://docs.jquery.com/Plugins/Validation
jQuery表单插件——Form
简介
jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。
两个核心方法：ajaxForm()和ajaxSubmit()方法。
下载地址
http://jquery.malsup.com/form/#download
快速上手
<head>
<title>demo1.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="lib/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
//等待DOM加载
$(document).ready(function () {
//绑定id为myForm的表单并提供一个简单的回调函数
$('#myForm').ajaxForm(function () {
$('#output1').html("提交成功！欢迎下次再来！").show();
});
});
</script>
</head>
<body>
<h3> Demo 1 : form插件的使用--ajaxForm(). </h3>
<form id="myForm" action="demo.php" method="post">
名称： <input type="text" name="name" /> <br />
地址： <input type="text" name="address" /><br />
自我介绍： <textarea name="comment"></textarea> <br />
<input type="submit" id="test" value="提交" /> <br />
<div id="output1" style="display:none;"></div>
</form>
</body>
</html>
页面提交之后无刷新，提交后从后台demo.php获得成功的状态码，显示提交成功。
核心方法
不修改表单的HTML代码结构的情况下，轻易地将表单的提交方式升级为Ajax方式。
ajaxSubmit()方法实例：
$(document).ready(function () {
$('#myForm').submit(function () {
$(this).ajaxSubmit(function () {
$('#output1').html("提交成功！欢迎下次再来！").show();
});
return false; //阻止表单默认提交
});
});
其他一些方法
$(document).ready(function () {
$('#test').click(function () {
var queryString = $('#myForm').formSerialize();
alert(queryString);
// 组装的数据可以用于 $.get, $.post, $.ajax ...
$.post('demo.php', queryString, function (data) {
$('#output1').html("提交成功！欢迎下次再来！").show();
});
return false;
})
//demo2
$('#test2').click(function () {
var queryString = $('#myForm2 *').fieldValue();
alert(queryString);
return false;
})
//重置表单
$('#test3').click(function () {
$('#myForm').resetForm();
$('#myForm2').resetForm();
})
//清除表单
$('#test4').click(function () {
$('#myForm').clearForm();
$('#myForm2').clearForm();
})
});
ajaxFrom()方法和ajaxSubmit()方法的参数
能接受0个或者1个参数（回调函数或options对象）。
通过传递options对象，使得它们对表单拥有更多的控制权。
实例：
（1）定义options对象
var options = {
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: showRequest, // 提交前的回调函数
success: showResponse, // 提交后 的回调函数
//另外的一些属性:
//url: url // 默认是form的action，如果写的话，会覆盖from的action.
//type: type // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
//dataType: null // 'xml', 'script', or 'json' (接受服务端返回的类型.)
//clearForm: true // 成功提交后，清除所有的表单元素的值.
resetForm: true // 成功提交后，重置所有的表单元素的值.
//由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
//当请求大于3秒后，跳出请求.
//timeout: 3000
};
（2）传递options对象
- ‘ajaxForm’ 方式的表单 .
$('#myForm').ajaxForm(options);
- ‘ajaxSubmit’ 方式的提交.
$('#myForm').submit(function() {
$(this).ajaxSubmit(options);
return false; //来阻止浏览器提交.
});
两个回调函数
- beforeSubmit——提交前的回调函数
// 提交前
function showRequest(formData, jqForm, options) {
// formdata是数组对象,在这里，我们使用$.param()方法把他转化为字符串.
var queryString = $.param(formData); //组装数据，插件会自动提交数据
alert(queryString); //类似 ： name=1&add=2
return true;
}
三个参数：
- formdata：数组对象，使用$.param()方法将其转为字符串。
- jqForm：jQuery对象，封装了表单的元素。
- options：options对象。
在这个回调函数中返回true，则表单提交，若返回false，则不提交。
- success——提交后的回调函数
// 提交后
function showResponse(responseText, statusText, xhr, $form) {
alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText);
}
dataType属性不同，success的回调函数的参数不同。
缺省，默认为HTML：回调函数的第一个参数是XMLHttpRequest对象的responseText属性。
xml：回调函数第一个参数是XMLHttpRequest对象的responseXML属性。
function processXml(responseXML) {
// 'responseXML' 是一个XML的文档 ，从服务器返回的.
var name = $('name', responseXML).text();
var address = $('address', responseXML).text();
var comment = $('comment', responseXML).text();
$('#xmlOut').html(name + " "+address + " "+comment);
}
json：回调函数的第一个参数的从服务器返回的json数据对象。
function processJson(data) {
// 'data'是一个json对象，从服务器返回的.
$('#jsonOut').html(data.name + " "+data.address + " "+data.comment);
}
表单提交之前验证表单
beforeSubmit()方法会在表单提交前被调用。
若返回false，停止提交。
3种获取表单数据的方式;
1.利用参数formData
$(document).ready(function() {
$("#myForm").ajaxForm({
target: "#output1", // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前，验证
});
});
function validate(formData, jqForm, options) {
// formdata是数组对象,每个对象拥有名称和值.
// 数据如下面的格式：
// [
// { name: username , value: usernameValue },
// { name: password , value: passwordValue }
// ]
for (var i = 0; i < formData.length; i++) {
if (!formData[i].value) {
alert("用户名,地址和自我介绍都不能为空!");
return false;
}
}
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 ： name=1&add=2
return true;
}
2.利用参数jqForm
$(document).ready(function () {
$('#myForm').ajaxForm({
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前，验证
});
});
function validate(formData, jqForm, options) {
//jqForm 是一个jQuery对象， 他包装了表单的dom元素.
var form = jqForm[0]; //把表单转化为dom对象
if (!form.name.value || !form.address.value) {
alert('用户名和地址不能为空，自我介绍可以为空！');
return false;
}
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 ： name=1&add=2
return true;
}
3.利用fieldValue()方法
$(document).ready(function () {
$('#myForm').ajaxForm({
target: '#output1', // 用服务器返回的数据 更新 id为output1的内容.
beforeSubmit: validate // 提交前，验证
});
});
function validate(formData, jqForm, options) {
// fieldValue 是表单插件的一个方法，它能找出表单中的元素的值，返回一个集合。
var usernameValue = $('input[name=name]').fieldValue();
var addressValue = $('input[name=address]').fieldValue();
if (!usernameValue[0] || !addressValue[0]) {
alert('用户名和地址不能为空，自我介绍可以为空！');
return false;
}
var queryString = $.param(formData); //组装数据
//alert(queryString); //类似 ： name=1&add=2
return true;
}
API
Validation插件两个经常使用的选项：方法（method）和规则（rule）。
方法：通过执行验证逻辑判断一个元素是否合法。
规则：将元素和元素的验证方法关联起来。
具体方法：
https://blog.csdn.net/jQuerys/article/details/51982675
Form插件
https://blog.csdn.net/qiuzhi__ke/article/details/50812046
模拟窗口插件——SimpleModel
SimpleModel插件简介
轻量级，模拟窗口。
下载地址
http://www.ericmmartin.com/projects/simplemodal/
https://code.google.com/archive/p/simplemodal/downloads
快速上手
两种简单方法来调用模拟窗口。
1.作为一个链式的jQuery函数。
$('#element-id').modal();
2.作为一个单独函数使用。
$.modal("<div><h1>SimpleModal</h1></div>");
以上两种方法都可以接受一个可选参数：
$('#element-id').modal({options});
$.modal("<div><h1>SimpleModal</h1></div>",{options});
可为模拟窗口设置CSS样式
.simplemodal-container .modalCloseImg {
background-position: -286px 0;
position: absolute;
right: 13px;
top: 13px;
width: 16px;
height: 16px;
overflow: hidden;
text-indent: -99em;
text-decoration: none;
cursor: pointer;
display: inline;
z-index: 3200;
}
.simplemodal-container .modalCloseImg:hover {
background-position: -302px 0;
}
关闭模拟窗口
SimpleModal自动为模拟窗口内class是"simplemodal-close"的元素绑定了关闭函数，所以只要在HTML中添加以下代码就可以关闭窗口：
<div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
或者
<a href="#" class="simplemodal-close">关闭</a>
也可以自定义关闭接口
$.modal.defaults.closeClass = "modalClose";
则class为modalClose绑定关闭函数。
修改多个默认参数：
$.extend($.modal.defaults,{
closeClass : "modalClose",
closeHTML : "<a href='#'>Close</a>
});
实际应用
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleModal Basic Modal Dialog </title>
<!-- Page styles -->
<link type='text/css' href='css/demo.css' rel='stylesheet' />
<!-- Contact Form CSS files -->
<link type='text/css' href='css/basic.css' rel='stylesheet' />
<link type='text/css' href='css/box.css' rel='stylesheet' />
</head>
<body>
<div id='container'>
<div id='logo'>
<h1>Simple<span><a href="http://www.ericmmartin.com/projects/simplemodal-demos/">Modal</a></span></h1>
<span class='title'>一个简单的遮罩层，可以制作提示框，对话框，弹出层，弹出iframe等...</span>
</div>
<div id='content'>
<div id='basic-modal'>
<p>提示框-ok：<input type='button' name='basic' value='Demo' class='open-basic-dialog-ok' /> or <a href='#' class='open-basic-dialog-ok'>Demo</a></p>
<p>提示框-warn：<input type='button' name='basic' value='Demo' class='open-basic-dialog-warn' /> or <a href='#' class='open-basic-dialog-warn'>Demo</a></p>
<p>弹出iframe：<input type='button' name='basic' value='Demo' class='open-basic-ifr' /> or <a href='#' class='open-basic-ifr'>Demo</a></p>
</div>
</div>
<!-- 弹出内容 -->
<div id="basic-dialog-ok">
<!-- 普通弹出层 [[ -->
<div class="box-title show">
<h2>提示</h2>
</div>
<div class="box-main">
<div class="tips">
<span class="tips-ico">
<span class="ico-ok">
<!-- 图标class可以为： ico-ok , ico-error , ico-info , ico-question , ico-warn , ico-wait --></span>
</span>
<div class="tips-content">
<div class="tips-title">申请成功，我们将短信通知您！</div>
<div class="tips-line"></div>
</div>
</div>
<div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
</div>
<!-- 普通弹出层 ]] -->
</div>
<div id="basic-dialog-warn">
<!-- 普通弹出层 [[ -->
<div class="box-title show">
<h2>提示</h2>
</div>
<div class="box-main">
<div class="tips">
<span class="tips-ico">
<span class="ico-warn">
<!-- 图标 --></span>
</span>
<div class="tips-content">
<div class="tips-title">系统繁忙，请稍候重试</div>
<div class="tips-line"></div>
</div>
</div>
<div class="box-buttons"><button type="button" class="simplemodal-close">关 闭</button></div>
</div>
<!-- 普通弹出层 ]] -->
</div>
<div id="ifr-dialog">
<!-- iframe弹出层 [[ -->
<iframe frameborder="0" scrolling="no" id="ifr-dialog-container" src="javascript:;" class="box-iframe"></iframe>
<!-- iframe弹出层 ]] -->
</div>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type='text/javascript' src='js/jquery.simplemodal.js'></script>
<script>
jQuery(function ($) {
/* 提示框 */
$('.open-basic-dialog-ok').click(function (e) {
$('#basic-dialog-ok').modal();
return false;
});
$('.open-basic-dialog-warn').click(function (e) {
$('#basic-dialog-warn').modal();
return false;
});
$('.open-basic-ifr').click(function (e) {
showIframe("http://www.baidu.com", "ifr-dialog-content");
return false;
});
});
/* eg:showIframe */
function showIframe(src, id) {
$("#ifr-dialog-container").attr("src", src);
$('#ifr-dialog').modal({
opacity: 30,
"overlayClose": true,
"containerId": id
});
}
</script>
</body>
</html>
API
http://www.ericmmartin.com/projects/simplemodal
管理Cookie的插件——Cookie
Cookie插件简介
是十分简单的管理cookie的插件。
下载地址
https://github.com/carhartl/jquery-cookie
快速上手
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script src="js/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var COOKIE_NAME = 'username';
if ($.cookie(COOKIE_NAME)) {
$("#username").val($.cookie(COOKIE_NAME));
}
$("#check").click(function () {
if (this.checked) {
$.cookie(COOKIE_NAME, $("#username").val(), {
path: '/',
expires: 10
});
} else {
$.cookie(COOKIE_NAME, null, {
path: '/'
});
}
});
});
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username" /> <br />
<input type="checkbox" name="check" id="check" />记住用户名
</body>
关闭页面，重新进入
API
1.写入Cookie
$.cookie('the_cookie','the_value');
2.读取Cookie
$.cookie('the_cookie');
3.删除Cookie
$.cookie('the_cookie',null);
4.其他可选参数
$.cookie('the_cookie','the_value',{
expires: 7, //有效期
path: '/', //cookie的路径属性
domain: 'jquery.com', //cookie的域名属性
secure: true //安全协议，true则为HTPPS
});
jQuery UI插件
简介
源自Interface。
主要分为3个部分：交互、微件和效果库。
下载地址
可以全部下载
快速上手
以Sortable为例
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Sortable</title>
<style type="text/css">
#myList {
width: 80px;
background: #EEE;
padding: 5px;
list-style: none;
}
#myList a {
text-decoration: none;
color: #0077B0;
}
#myList a:hover {
text-decoration: underline;
}
#myList .qlink {
font-size: 12px;
color: #666;
margin-left: 10px;
}
</style>
</head>
<body>
<ul id="myList">
<li><a href="#">心情</a></li>
<li>
<a href="#">相册</a>
<a href="#" class="qlink">上传</a>
</li>
<li>
<a href="#">日志</a>
<a href="#" class="qlink">发表</a>
</li>
<li><a href="#">投票</a></li>
<li><a href="#">分享</a></li>
<li><a href="#">群组</a></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myList").sortable(); //直接让myList下的元素可以拖动排序
});
</script>
</body>
实现拖拽改变位置
与单击事件冲突
在某些特殊情况下会因为拖动事件抢在单击事件之前而导致单击事件失效。
解决方法：设置参数delay延时1毫秒。
$(document).ready(function () {
$("#myList").sortable({
delay: 1
}); //修复潜在链接点击问题
});
与后台结合
1.查找触发排序后的回调函数。
2.取得排列的顺序并通过Ajax发送给后台。
使用stop回调函数，并把id改为"name_value"的形式。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Sortable</title>
<style type="text/css">
#myList {
width: 80px;
background: #EEE;
padding: 5px;
list-style: none;
}
#myList a {
text-decoration: none;
color: #0077B0;
}
#myList a:hover {
text-decoration: underline;
}
#myList .qlink {
font-size: 12px;
color: #666;
margin-left: 10px;
}
</style>
</head>
<body>
<ul id="myList">
<li id="myList_mood"><a href="#">心情</a></li>
<li id="myList_photo">
<a href="#">相册</a>
<a href="#" class="qlink">上传</a>
</li>
<li id="myList_blog">
<a href="#">日志</a>
<a href="#" class="qlink">发表</a>
</li>
<li id="myList_vote"><a href="#">投票</a></li>
<li id="myList_share"><a href="#">分享</a></li>
<li id="myList_group"><a href="#">群组</a></li>
</ul>
<script type="text/javascript" src="../../scripts/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.sortable.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myList").sortable({
delay: 1, //修复潜在链接点击问题
stop: function () {
$.post(
"sortable.php",
$('#myList').sortable('serialize'),
function (response) {
alert(response);
}
);
}
});
});
</script>
</body>
sortable.php
<?php
$myList = $_POST["myList"];
foreach( $myList as $list){
echo $list."\n";
}
?>
编写jQuery插件
自己编写插件
插件的种类
1.封装对象方法的插件
95%以上的jQuery插件都是这一种方法。将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作。
2.封装全局函数的插件
将独立的函数加到jQuery命名空间之下。
3.选择器插件
个别情况。
插件的基本要点
1.命名：推荐为jquery.[插件名].js。
2.所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
3.在插件内部，this指向的是当前通过选择器获取的jQuery对象。
4.可以通过this.each来遍历所有元素。
5.所有的方法或函数插件，都应当以分号结尾。
6.插件应该返回一个jQuery对象，以保证插件的可链式操作。
7.避免在插件内部使用$作为jQuery对象的别名。
插件中的闭包
闭包：
允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。
利用闭包的特性，既可以避免内部临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。
//注意为了更好的兼容性，开始前有个分号
;(function($) { //此处将$作为匿名函数的形参
//这里编写插件的代码，可以继续使用$作为jQuery的别名
//定义一个局部变量foo，仅函数内部可以访问
var foo;
var bar = function () {
/*
在匿名函数内部的函数都可以访问foo，即便是在匿名函数的外部
调用bar()的时候，也可以在bar()的内部访问到foo，但在匿名函数
的外部直接访问foo是做不到的
*/
}
/*
下面的语句让匿名函数内部的函数bar()逃逸到全局可访问的范围内
这样就可以在匿名函数的外部通过调用jQuery.BAR()来访问内部定义
的函数bar()，并且内部函数bar()也能访问匿名函数内的变量foo
*/
$.BAR = bar;
})(jQuery); //这里就将jQuery作为实参传递给匿名函数了
jQuery插件的机制
jQuery提供了两个用于拓展jQuery功能的方法：
jQuery.fn.extend()方法：拓展第一种插件
jQuery.extend()方法：拓展后两种插件，还可以用来拓展对象。
编写jQuery插件
1.封装jQuery对象方法的插件
编写设置和获取颜色的插件——color()插件
//插件编写
;(function($) {
jQuery.fn.extend({
"color":function(value){
return this.css("color",value);
}
});
})(jQuery);
//插件应用
$(function(){
$("div").click(function(){
var color = $(this).text();
$("div").color( color ); //设置所有的div的字体颜色
})
})
表格隔行变色插件——alterBgColor
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table {
border: 0;
border-collapse: collapse;
}
td {
font: normal 12px/17px Arial;
padding: 2px;
width: 100px;
}
th {
font: bold 12px/17px Arial;
text-align: left;
padding: 4px;
border-bottom: 1px solid #333;
}
.even {
background: #FFF38F;
}
/* 偶数行样式*/
.odd {
background: #FFFFEE;
}
/* 奇数行样式*/
.selected {
background: #FF6500;
color: #fff;
}
</style>
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
;
(function ($) {
$.fn.extend({
"alterBgColor": function (options) {
//设置默认值
options = $.extend({
odd: "odd",
/* 偶数行样式*/
even: "even",
/* 奇数行样式*/
selected: "selected" /* 选中行样式*/
}, options);
$("tbody>tr:odd", this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$('tbody>tr', this).click(function () {
//判断当前是否选中
var hasSelected = $(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked', !hasSelected);
});
// 如果单选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)', this).addClass(options.selected);
return this; //返回this，使方法可链。
}
});
})(jQuery);
//插件应用
$(function () {
$("#table2")
.alterBgColor() //应用插件
.find("th").css("color", "red"); //可以链式操作
})
</script>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
<br /><br />
<table id="table2">
<thead>
<tr>
<th> </th>
<th>姓名</th>
<th>性别</th>
<th>暂住地</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>张山</td>
<td>男</td>
<td>浙江宁波</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>李四</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>王五</td>
<td>男</td>
<td>湖南长沙</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>找六</td>
<td>男</td>
<td>浙江温州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" /></td>
<td>Rain</td>
<td>男</td>
<td>浙江杭州</td>
</tr>
<tr>
<td><input type="checkbox" name="choice" value="" checked="checked" /></td>
<td>MAXMAN</td>
<td>女</td>
<td>浙江杭州</td>
</tr>
</tbody>
</table>
</body>
jQuery的选择符可能会匹配1个或多个元素，所以可以在插件内部调用each()方法来遍历匹配元素。
;(function($) {
$.fn.extend({
"somePlugin" : function(options){
return this.each(function() {
//这里置放插件代码
});
}
});
})(jQuery);
前面实例更改
//插件编写
;(function ($) {
$.fn.extend({
"alterBgColor": function (options) {
return this.each(function (options) {
//设置默认值
options = $.extend({
odd: "odd",
/* 偶数行样式*/
even: "even",
/* 奇数行样式*/
selected: "selected" /* 选中行样式*/
}, options);
$("tbody>tr:odd", this).addClass(options.odd);
$("tbody>tr:even", this).addClass(options.even);
$('tbody>tr', this).click(function () {
//判断当前是否选中
var hasSelected = $(this).hasClass(options.selected);
//如果选中，则移出selected类，否则就加上selected类
$(this)[hasSelected ? "removeClass" : "addClass"](options.selected)
//查找内部的checkbox,设置对应的属性。
.find(':checkbox').attr('checked', !hasSelected);
});
// 如果单选框默认情况下是选择的，则高色.
$('tbody>tr:has(:checked)', this).addClass(options.selected);
}); //返回this，使方法可链。
}
});
})(jQuery);
//插件应用
$(function () {
$("#table2")
.alterBgColor() //应用插件
.find("th").css("color", "red"); //可以链式操作
})
2.封装全局函数的插件
在jQuery命名空间内部添加一个函数。
实例——去除左侧和右侧单独一次的空格
<head>
<title>插件3，ltrim,rtrim</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
;
(function ($) {
$.extend({
ltrim: function (text) {
return (text || "").replace(/^\s+/g, "")
},
rtrim: function rtrim(text) {
return (text || "").replace(/\s+$/g, "")
}
});
})(jQuery);
//插件应用
$(function () {
$("#trimTest").val(
jQuery.trim(" test ") + "\n" +
jQuery.ltrim(" test ") + "\n" +
jQuery.rtrim(" test ")
);
})
</script>
</head>
<body>
<textarea id="trimTest" rows="5" cols="20"></textarea>
</body>
3.自定义选择器
实例——between选择器
<head>
<title>插件4，between</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- 引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//插件编写
;
(function ($) {
$.extend(jQuery.expr[":"], {
between: function (a, i, m) {
var tmp = m[3].split(","); //将传递进来的m[3]以逗号为分隔符，切成一个数组
return tmp[0] - 0 < i && i < tmp[1] - 0;
}
});
})(jQuery);
//插件应用
$(function () {
alert("执行前");
$("div:between(2,5)").css("background", "white");
alert("执行后");
})
</script>
</head>
<body>
<div style="background:red">0</div>
<div style="background:blue">1</div>
<div style="background:green">2</div>
<div style="background:yellow">3</div>
<div style="background:gray">4</div>
<div style="background:orange">5</div>
</body>
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
