本文仅供参考，如有不足或错误，请不吝赐教，这里以一个弹出层的jQuery插件制作实例为基础，进行插件制作的说明。
一，首先，制作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 = "
var dBoxBG = "";
var loading = "
在IE6中，z-index对下拉列表不会起作用，所以这里遮罩层中加入id为d_iframebg的iframe作为遮罩层，这样，大体已经制作好了框架。
五，现在我们考虑要实现什么功能了
首先，如何出现弹出窗体，一般都是点击，这里仍然使用点击事件
//click event
$(this).click(function () {
$("body").append(dBoxHtml);
//case ajax
if (opts.ajaxSrc != "") {
$("#d_content").append("
$("#d_ajaxcontent").load(opts.ajaxSrc);
}
//case iframe
else if (opts.iframeSrc != "") {
$("#d_content").append("
复制代码 代码如下:
(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 = "
";
dBoxHtml += "
dBoxHtml += "
dBoxHtml += "
"; dBoxHtml += "
";
dBoxHtml += "
dBoxHtml += "
dBoxHtml += "
"; dBoxHtml += "
" + opts.title + "
"; dBoxHtml += "
[x]
"; dBoxHtml += "
dBoxHtml += "
" + opts.content + "
"; dBoxHtml += "
var dBoxBG = "";
var loading = "
" + opts.loadStr + "
"; 在IE6中，z-index对下拉列表不会起作用，所以这里遮罩层中加入id为d_iframebg的iframe作为遮罩层，这样，大体已经制作好了框架。
五，现在我们考虑要实现什么功能了
首先，如何出现弹出窗体，一般都是点击，这里仍然使用点击事件
复制代码 代码如下:
//click event
$(this).click(function () {
$("body").append(dBoxHtml);
//case ajax
if (opts.ajaxSrc != "") {
$("#d_content").append("
");
$("#d_ajaxcontent").load(opts.ajaxSrc);
}
//case iframe
else if (opts.iframeSrc != "") {
$("#d_content").append("