一，首先，制作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, width: 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='width:100%;height:20px;border-bottom:solid 1px #00E;'>"; dBoxHtml += "<div id='d_title' style='float:left;width: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='width:100%;height:100%;padding:3px;'>" + opts.content + "</div>"; dBoxHtml += "</div>"; var dBoxBG = "<iframe id='d_iframebg' style='position:absolute;top:0;left:0;width: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='width:" + (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高度和宽度都少了点，还有就是有遮罩层时，移动的时候不顺畅 还有其它问题欢迎讨论！ 在线演示地址 http://demo.jb51.net/js/dBox/dBox.htm打包下载地址 http://xiazai.jb51.net/201004/yuanma/dBox.rar

　　推荐阅读

　　JavaScript中常见陷阱小结

你所创建的所有函数都是区分大小写的 单引号('字符串')和双引号("字符串")在JavaScript中没有特殊的区别,都可以用来创建字符串.但作为一般原则,大多数WEB开发者都选择使用单引号 而不是双引号,因为XHTML规范要求所>>>详细阅读

本文标题：一个简单的jQuery插件制作 学习过程及实例

地址：http://www.17bianji.com/kaifa2/JS/26512.html

 1/2    1