一個簡單的jQuery插件制作學(xué)習(xí)過程及實例

更新時間：2010年04月25日 15:41:47 作者：

本文僅供參考，如有不足或錯誤，請不吝賜教，這里以一個彈出層的jQuery插件制作實例為基礎(chǔ)，進(jìn)行插件制作的說明。

一，首先，制作jQuery插件需要一個閉包

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

這是來自jQuery官方的插件開發(fā)規(guī)范要求，使用這種編寫方式有什么好處呢？
a) 避免全局依賴。
b) 避免第三方破壞。
c) 兼容jQuery操作符'$'和'jQuery '

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

復(fù)制代碼代碼如下:

 
$.fn.dBox = function (options) { 
var defaults = { 
//各種屬性及其默認(rèn)值 
}; 
var opts = $.extend(defaults, options); 
//function codes in here 
}; 

在這里dBox是我為這個彈出層插件的命名

三，為dBox建立起屬性及其默認(rèn)值

復(fù)制代碼代碼如下:

 
$.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 
}; 

四，既然是彈出窗體，那么要先設(shè)計好一個div窗體和遮罩層，在這里我將樣式也直接寫進(jìn)去了，在function codes區(qū)域中輸入如下：

復(fù)制代碼代碼如下:

 
//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作為遮罩層，這樣，大體已經(jīng)制作好了框架。
五，現(xiàn)在我們考慮要實現(xiàn)什么功能了
首先，如何出現(xiàn)彈出窗體，一般都是點擊，這里仍然使用點擊事件

復(fù)制代碼代碼如下:

 
//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可以去掉瀏覽器默認(rèn)的點擊事件，如在一個a標(biāo)記上綁定點擊事件，將不會造成默認(rèn)的跳轉(zhuǎn)效果
在這個點擊事件中，先將dBox的框架載入了頁面，然后判斷內(nèi)容的加載方式，分別處理，最后有三個事件
1，addCSS()此事件處理遮罩層大小，彈出層的位置
2，drag()此事件處理彈出層的拖曳
3，dBoxRemove()此事件處理彈出層的關(guān)閉
有了這三個事件，整個插件就基本完成了

六，這里貼出如上三個事件的代碼
1，addCSS()：

復(fù)制代碼代碼如下:

 
//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中，還有兩個功能需要實現(xiàn)，以下代碼：

復(fù)制代碼代碼如下:

 
//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()：

復(fù)制代碼代碼如下:

 
//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()：

復(fù)制代碼代碼如下:

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

到這里，插件制作基本完成，不過loading這個東東沒有加上去。。。
另外還發(fā)現(xiàn)在ie6中，彈出的iframe高度和寬度都少了點，還有就是有遮罩層時，移動的時候不順暢
還有其它問題歡迎討論！
在線演示地址 http://demo.jb51.net/js/dBox/dBox.htm
打包下載地址 http://xiazai.jb51.net/201004/yuanma/dBox.rar

您可能感興趣的文章: