JQuery编写自己的插件（七）

时间：2016-09-17 20:31:11 阅读：265 评论：0 收藏：0 [点我收藏+]

标签：

一：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>

JQuery编写自己的插件（七）

标签：

原文地址：http://www.cnblogs.com/sunliyuan/p/5879540.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)

周排行