首页 > 代码库 > JQuery编写自己的插件（七）
JQuery编写自己的插件（七）
一：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="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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=http://www.mamicode.com/‘images/Close-1.gif‘ id=‘x‘ />载入中...
调用的代码：
<%@ 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="http://www.mamicode.com/CSS/Main.css" rel="stylesheet" type="text/css" /> <script src="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script> <%-- <script src="http://www.mamicode.com/Scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>--%>
//拖动的js
<script src="http://www.mamicode.com/Scripts/jquery.modalform.js" type="text/javascript"></script>
//弹出窗体 注意引用的顺序
<script src="http://www.mamicode.com/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="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="http://www.mamicode.com/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="http://www.mamicode.com/Scripts/jquery-1.2.6.js" type="text/javascript"></script> <script src="http://www.mamicode.com/Scripts/jquery.myDragLibrary.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $.AttachDrag("div1"); }); </script></head><body><div id="div1"></div> </body></html>
JQuery编写自己的插件（七）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。