一：jQuery插件的编写基础
1、插件的种类
编写插件的目的是给一系列已经方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。
常见的种类有以下三种：
封装对象方法的插件
二：编写自己的插件
1、封装jQuery对象方法的插件
Step1:框架
;(
function($) {
$.fn.extend({
….
});
}
)(jQuery)
实例：改变背景色
;(
function($) {
$.fn.extend({
"color": function(value) {
return this.css("color", value);
},
"bgcolor": function(value) {
return this.css("background-color", value);
}
});
}
)(jQuery)
调用：
<!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></title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
<script src="Scripts/jquery.color.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div").click(function() {
$(this).bgcolor(this.innerText);
});
});
</script>
</head>
<body>
<div>red</div>
<div>blue</div>
<div>green</div>
</body>
</html>
2.编写全局函数插件
Step1:写一个封装全局函数的插件
;(
function($) {
$.extend({
….
});
}
)(jQuery)
代码：去除空格
;(
function($) {
$.extend({
ltrim: function(text) {
return text.replace(/^\s+/g, "");
},
rtrim: function(text) {
return text.replace(/\s+$/g, "");
}
});
}
)(jQuery)
调用：
<!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></title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
<script src="Scripts/jquery.trim.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var teststr = " test ";
alert(teststr.length);
var s1 = $.ltrim(teststr);
alert(s1.length);
var s2 = $.rtrim(teststr);
alert(s2.length);
});
</script>
</head>
<body>
</body>
</html>
3.编写自已的插件-MyModalForm
Step1:写一个封装全局函数的插件
;(
function($) {
$.extend({
….
});
}
)(jQuery)
效果：
代码：
;(
function($) {
var divW; //DIV宽度
var divH; //DIV高度
var clientH; //浏览器高度
var clientW; //浏览器宽度
var divTitle; //DIV标题
var pageUrl; //DIV中加载的页面
var div_X; //DIV横坐标
var div_Y; //DIV纵坐标
$.extend({
//清除背景锁定
clearLockScreen: function() {
$("#divLock").remove();
},
//清除DIV窗口
clearDivWindow: function() {
$("#divWindow").remove();
},
//返回弹出的DIV的坐标
divOpen: function() {
var minTop = 80; //弹出的DIV记顶部的最小距离
if ($("#divWindow").length == 0) {
clientH = $(window).height(); //浏览器高度
clientW = $(window).width(); //浏览器宽度
div_X = (clientW - divW) / 2; //DIV横坐标
div_Y = (clientH - divH) / 2; //DIV纵坐标
div_X += window.document.documentElement.scrollLeft; //DIV显示的实际横坐标
div_Y += window.document.documentElement.scrollTop; //DIV显示的实际纵坐标
if (div_Y < minTop) {
div_Y = minTop;
}
$("body").append("<div id='divWindow'><div id='divTitle'><img src='images/Close-1.gif' id='x' /></div><div id='divContent'>载入中...</div></div>"); //增加DIV
//divWindow的样式
$("#divWindow").css("position", "absolute");
$("#divWindow").css("z-index", "200");
$("#divWindow").css("left", (div_X + "px")); //定位DIV的横坐标
$("#divWindow").css("top", (div_Y + "px")); //定位DIV的纵坐标
$("#divWindow").css("opacity", "0.9");
$("#divWindow").width(divW);
$("#divWindow").height(divH);
$("#divWindow").css("background-color", "#FFFFFF");
$("#divWindow").css("border", "solid 1px #333333");
//divTitle的样式
$("#divTitle").css("height", "20px");
$("#divTitle").css("line-height", "20px");
$("#divTitle").css("background-color", "#333333");
$("#divTitle").css("padding", "3px 5px 1px 5px");
$("#divTitle").css("color", "#FFFFFF");
$("#divTitle").css("font-weight", "bold");
//x的样式
$("#x").css("float", "right");
$("#x").css("cursor", "pointer");
//divContent的样式
$("#divContent").css("padding", "10px");
}
else {
clientH = $(window).height(); //浏览器高度
clientW = $(window).width(); //浏览器宽度
div_X = (clientW - divW) / 2; //DIV横坐标
div_Y = (clientH - divH) / 2; //DIV纵坐标
div_X += window.document.documentElement.scrollLeft; //DIV显示的实际横坐标
div_Y += window.document.documentElement.scrollTop; //DIV显示的实际纵坐标
if (div_Y < minTop) {
div_Y = minTop;
}
$("#divWindow").css("left", (div_X + "px")); //定位DIV的横坐标
$("#divWindow").css("top", (div_Y + "px")); //定位DIV的纵坐标
}
},
//锁定背景屏幕
lockScreen: function() {
if ($("#divLock").length == 0) { //判断DIV是否存在
clientH = $(window).height(); //浏览器高度
clientW = $(window).width(); //浏览器宽度
$("body").append("<div id='divLock'></div>") //增加DIV
$("#divLock").height(clientH);
$("#divLock").width(clientW);
$("#divLock").css("display", "block");
$("#divLock").css("background-color", "#000000");
$("#divLock").css("position", "fixed");
$("#divLock").css("z-index", "100");
$("#divLock").css("top", "0px");
$("#divLock").css("left", "0px");
$("#divLock").css("opacity", "0.5");
}
else {
clientH = $(window).height(); //浏览器高度
clientW = $(window).width(); //浏览器宽度
$("#divLock").height(clientH);
$("#divLock").width(clientW);
}
},
ShowModalForm: function(divWidth, divHeight, title, url) {
divW = divWidth; //DIV宽度
divH = divHeight; //DIV高度
divTitle = title; //DIV高度
pageUrl = url; //DIV中加载的页面UR
$.lockScreen(); //锁定背景
$.divOpen();
$("#divTitle").append(divTitle);
$("#divContent").load(pageUrl, function() {
//加上拖动的效果
$.AttachDrag("divWindow");
});
//交换X图片
$("#x").hover(
function() {
$(this).attr("src", "images/Close-2.gif");
},
function() {
$(this).attr("src", "images/Close-1.gif");
}
);
//关闭DIV窗口
$("#x").click(
function() {
$.clearDivWindow();
$.clearLockScreen();
});
//窗口大小改变时
$(window).resize(
function() {
if ($("#divLock").length != 0) {
$.lockScreen();
}
if ($("#divWindow").length != 0) {
$.divOpen();
}
}
);
}
});
}
)(jQuery)
调用的代码：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Demo3.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>封装全局函数的插件Demo</title>
<link href="CSS/Main.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<%-- <script src="Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>--%>
//拖动的js
<script src="Scripts/jquery.modalform.js" type="text/javascript"></script>
//弹出窗体 注意引用的顺序
<script src="Scripts/jquery.modalform.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$.ShowModalForm(500, 320, '封装全局函数的插件Demo', 'GetStudentInfo.aspx');
});
});
</script>
</head>
<body><a href="javascript:void(0)">点此演示</a>
</body>
</html>
CSS样式：
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
/* download by http://www.codefans.net */
body {
margin: 50px;
font-family: Arial, "宋体";
font-size: 12px;
}
四：隔行变色：
效果：
插件代码：
jquery.alterBgColor.js
; (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);
if (hasSelected)
$(this).removeClass(options.selected).find(":checkbox").attr("checked", false);
else
$(this).addClass(options.selected).find("checkbox").attr("checked", true);
});
//如果有行checkbox选中的，默认情况下，让背景高亮度
$("tbody>tr:has(:checked)", this).addClass(options.selected);
return this; //返回一个jquery 对象，让此方法可链
}
});
})(jQuery);调用的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery.alterBgColor.js" type="text/javascript"></script>
<script type="text/javascript">
//插件应用
$(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>
</html>
五：鼠标拖动：myDragLibrary.js
var MyDragHandler = {
DragPanelId: "divContext",
_idiffx: 0,
_idiffy: 0,
_Div: null,
AttachDrag: function(dragId) {
if (dragId)
MyDragHandler._Div = document.getElementById(dragId);
else
MyDragHandler._Div = document.getElementById(MyDragHandler.DragPanelId);
document.body.onmousedown = MyDragHandler._handleMouseDown;
},
_handleMouseDown: function() {
var oEvent = window.event;
if (MyDragHandler._Div) {
MyDragHandler._idiffx = oEvent.clientX - MyDragHandler._Div.offsetLeft;
MyDragHandler._idiffy = oEvent.clientY - MyDragHandler._Div.offsetTop;
document.body.onmousemove = MyDragHandler._handleMouseMove;
document.body.onmouseup = MyDragHandler._handleMouseUp;
}
},
_handleMouseMove: function() {
var oEvent = window.event;
MyDragHandler._Div.style.left = oEvent.clientX - MyDragHandler._idiffx;
MyDragHandler._Div.style.top = oEvent.clientY - MyDragHandler._idiffy;
MyDragHandler._Div.style.cursor = "move";
},
_handleMouseUp: function() {
document.body.onmousemove = null;
document.body.onmouseup = null;
MyDragHandler._Div.style.cursor = "default";
}
}调用的代码：
<!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></title>
<style type="text/css">
#div1 {
background-color: red;
height: 100px;
width: 100px;
position: absolute;
}
</style>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script src="Scripts/jquery.myDragLibrary.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.AttachDrag("div1");
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
