一个简单的jQuery插件制作，学习过程及实例

本文仅供参考，如有不足或错误，请不吝赐教

这里以一个弹出层的jQuery插件制作实例为基础，进行插件制作的说明，可以先到这里看个效果：

 https://files.cnblogs.com/bestfc/dBox.rar

另外弱弱的问一句，怎么在博客里直接加这个，不用下载，直接打开网页看？

一，首先，制作jQuery插件需要一个闭包

(function ($) {
//code in here
})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？

a) 避免全局依赖。

b) 避免第三方破坏。

c) 兼容jQuery操作符'$'和'jQuery '

 

二，有了闭包，在其中加入插件的骨架

   $.fn.dBox = function (options) {
        var defaults = {
            //各种属性及其默认值
        };
        var opts = $.extend(defaults, options);

        //function codes in here 
   };

在这里dBox是我为这个弹出层插件的命名

三，为dBox建立起属性及其默认值

   $.fn.dBox = function (options) {
        var defaults = {
            opacity: 0.6, //for mask layer
            drag: true,
            title: 'dBox',
            content: '',
            left: 400,
            top: 200,
             600,
            height: 300,
            setPos: false, //if use the customer’s left and top
            overlay: true, //if use the mask layer
            loadStr: 'Loading',
            ajaxSrc: '',
            iframeSrc: ''
        };
        var opts = $.extend(defaults, options);

        //function codes in here
   };

四，既然是弹出窗体，那么要先设计好一个div窗体和遮罩层，在这里我将样式也直接写进去了，在function codes区域中输入如下：

        //build html code of the dBox
        var dBoxHtml = "<div id='dBox' style='background-color:#FFF;border:solid 2px #00E;position:absolute;z-index:100;'>";
        dBoxHtml += "<div id='d_head' style='100%;height:20px;border-bottom:solid 1px #00E;'>";
        dBoxHtml += "<div id='d_title' style='float:left;90%;color:#00E'>" + opts.title + "</div>";
        dBoxHtml += "<div id='d_close' style='float:right;cursor:pointer;margin-right:5px;color:#00E'>[x]</div>";
        dBoxHtml += "</div>";
        dBoxHtml += "<div id='d_content' style='100%;height:100%;padding:3px;'>" + opts.content + "</div>";
        dBoxHtml += "</div>";

        var dBoxBG = "<iframe id='d_iframebg' style='position:absolute;top:0;left:0;0;height:0;border:none;'></iframe><div id='d_bg' style='background-color:#000;z-index:99;position:absolute;top:0;left:0;'></div>";
        var loading = "<div id='d_loading' style='position:fixed;top:48%;left:48%;z-index:100;border:solid 1px #000;'>" + opts.loadStr + "</div>";
在IE6中，z-index对下拉列表不会起作用，所以这里遮罩层中加入id为d_iframebg的iframe作为遮罩层，这样，大体已经制作好了框架。

五，现在我们考虑要实现什么功能了

首先，如何出现弹出窗体，一般都是点击，这里仍然使用点击事件

        //click event
        $(this).click(function () {
            $("body").append(dBoxHtml);
            //case ajax
            if (opts.ajaxSrc != "") {
                $("#d_content").append("<div id='d_ajax' style='" + (opts.width - 6) + "px;height:" + (opts.height - 26) + "px;overflow:scroll;'><div id='d_ajaxcontent'></div></div>");
                $("#d_ajaxcontent").load(opts.ajaxSrc);
            }
            //case iframe
            else if (opts.iframeSrc != "") {
                $("#d_content").append("<iframe frameborder='0' width='" + (opts.width - 6) + "' height='" + (opts.height - 26) + "' src='" + opts.iframeSrc + "'>");
            }
            addCSS();
            //case drag
            if (opts.drag == true) {
                drag();
            }
            $("#d_close").click(dBoxRemove);
            return false;
        });

最后一个return false可以去掉浏览器默认的点击事件，如在一个a标记上绑定点击事件，将不会造成默认的跳转效果

在这个点击事件中，先将dBox的框架载入了页面，然后判断内容的加载方式，分别处理，最后有三个事件

1，addCSS()此事件处理遮罩层大小，弹出层的位置

2，drag()此事件处理弹出层的拖曳

3，dBoxRemove()此事件处理弹出层的关闭

有了这三个事件，整个插件就基本完成了

六，这里贴出如上三个事件的代码

1，addCSS()：

 //add css to the dBox
        function addCSS() {
            var pos = setPosition();
            $("#dBox").css({ "left": pos[0], "top": pos[1], "width": opts.width + "px", "height": opts.height + "px" });
            if (opts.overlay) {
                var wh = getPageSize();                
                $(dBoxBG).appendTo("body").css({ "opacity": opts.opacity, "width": wh[0], "height": wh[1] });
            }
        }
在这个addCSS中，还有两个功能需要实现，以下代码：

//calc the size of the page to put the mask layer cover the whole document
        function getPageSize() {
            if ($(window).height() > $(document).height()) {
                h = $(window).height();
            } else {
                h = $(document).height();
            }
            w = $(window).width();
            return Array(w, h);
        }

        //calc the position of the dBox to put the dBox in the center of current window
        function setPosition() {
            if (opts.setPos) {
                l = opts.left;
                t = opts.top;
            } else {
                var w = opts.width;
                var h = opts.height;

                var width = $(document).width();
                var height = $(window).height();
                var left = $(document).scrollLeft();
                var top = $(document).scrollTop();

                var t = top + (height / 2) - (h / 2);
                var l = left + (width / 2) - (w / 2);
            }
            return Array(l, t);
        }

2，drag()：

//drag the dBox
        //this event contains four events(handle.mousedown,move,out,up)
        function drag() {
            var dx, dy, moveout;
            var handle = $("#dBox").find("#d_head>#d_title").css('cursor', 'move');
            handle.mousedown(function (e) {
                //cal the distance between e and dBox
                dx = e.clientX - parseInt($("#dBox").css("left"));
                dy = e.clientY - parseInt($("#dBox").css("top"));
                //bind mousemove event and mouseout event to the dBox
                $("#dBox").mousemove(move).mouseout(out).css({ "opacity": opts.opacity });
                handle.mouseup(up);
            });
            move = function (e) {
                moveout = false;
                win = $(window);
                var x, y;
                if (e.clientX - dx < 0) {
                    x = 0;
                } else {
                    if (e.clientX - dx > (win.width() - $("#dBox").width())) {
                        x = win.width() - $("#dBox").width();
                    } else {
                        x = e.clientX - dx;
                    }
                }
                if (e.clientY - dy < 0) {
                    y = 0;
                } else {
                    y = e.clientY - dy;
                }
                $("#dBox").css({
                    left: x,
                    top: y
                });
            }
            out = function (e) {
                moveout = true;
                setTimeout(function () {
                    moveout && up(e);
                }, 10);
            }
            up = function (e) {
                $("#dBox").unbind("mousemove", move).unbind("mouseout", out).css("opacity", 1);
                handle.unbind("mouseup", up);
            }
        }

3，dBoxRemove()：

//close the dBox
        function dBoxRemove() {
            if ($("#dBox")) {
                $("#dBox").stop().fadeOut(200, function () {
                    $("#dBox").remove();
                    if (opts.overlay) {
                        $("#d_bg").remove();
                        $("#d_iframebg").remove();
                    }
                });
            }
        }

到这里，插件制作基本完成，不过loading这个东东没有加上去。。。

另外还发现在ie6中，弹出的iframe高度和宽度都少了点，还有就是有遮罩层时，移动的时候不顺畅

还有其它问题欢迎讨论！

https://files.cnblogs.com/bestfc/dBox.rar