一個(gè)簡單的jQuery插件制作 學(xué)習(xí)過程及實(shí)例
更新時(shí)間:2010年04月25日 15:41:47 作者:
本文僅供參考,如有不足或錯(cuò)誤,請(qǐng)不吝賜教,這里以一個(gè)彈出層的jQuery插件制作實(shí)例為基礎(chǔ),進(jìn)行插件制作的說明。
一,首先,制作jQuery插件需要一個(gè)閉包
(function ($) {
//code in here
})(jQuery);
這是來自jQuery官方的插件開發(fā)規(guī)范要求,使用這種編寫方式有什么好處呢?
a) 避免全局依賴。
b) 避免第三方破壞。
c) 兼容jQuery操作符'$'和'jQuery '
二,有了閉包,在其中加入插件的骨架
$.fn.dBox = function (options) {
var defaults = {
//各種屬性及其默認(rèn)值
};
var opts = $.extend(defaults, options);
//function codes in here
};
在這里dBox是我為這個(gè)彈出層插件的命名
三,為dBox建立起屬性及其默認(rèn)值
$.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è)計(jì)好一個(gè)div窗體和遮罩層,在這里我將樣式也直接寫進(jìn)去了,在function codes區(qū)域中輸入如下:
//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對(duì)下拉列表不會(huì)起作用,所以這里遮罩層中加入id為d_iframebg的iframe作為遮罩層,這樣,大體已經(jīng)制作好了框架。
五,現(xiàn)在我們考慮要實(shí)現(xiàn)什么功能了
首先,如何出現(xiàn)彈出窗體,一般都是點(diǎn)擊,這里仍然使用點(diǎn)擊事件
//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;
});
最后一個(gè)return false可以去掉瀏覽器默認(rèn)的點(diǎn)擊事件,如在一個(gè)a標(biāo)記上綁定點(diǎn)擊事件,將不會(huì)造成默認(rèn)的跳轉(zhuǎn)效果
在這個(gè)點(diǎn)擊事件中,先將dBox的框架載入了頁面,然后判斷內(nèi)容的加載方式,分別處理,最后有三個(gè)事件
1,addCSS()此事件處理遮罩層大小,彈出層的位置
2,drag()此事件處理彈出層的拖曳
3,dBoxRemove()此事件處理彈出層的關(guān)閉
有了這三個(gè)事件,整個(gè)插件就基本完成了
六,這里貼出如上三個(gè)事件的代碼
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] });
}
}
在這個(gè)addCSS中,還有兩個(gè)功能需要實(shí)現(xiàn),以下代碼:
//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這個(gè)東東沒有加上去。。。
另外還發(fā)現(xiàn)在ie6中,彈出的iframe高度和寬度都少了點(diǎn),還有就是有遮罩層時(shí),移動(dòng)的時(shí)候不順暢
還有其它問題歡迎討論!
在線演示地址 http://demo.jb51.net/js/dBox/dBox.htm
打包下載地址 http://xiazai.jb51.net/201004/yuanma/dBox.rar
復(fù)制代碼 代碼如下:
(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是我為這個(gè)彈出層插件的命名
三,為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è)計(jì)好一個(gè)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對(duì)下拉列表不會(huì)起作用,所以這里遮罩層中加入id為d_iframebg的iframe作為遮罩層,這樣,大體已經(jīng)制作好了框架。
五,現(xiàn)在我們考慮要實(shí)現(xiàn)什么功能了
首先,如何出現(xiàn)彈出窗體,一般都是點(diǎn)擊,這里仍然使用點(diǎ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;
});
最后一個(gè)return false可以去掉瀏覽器默認(rèn)的點(diǎn)擊事件,如在一個(gè)a標(biāo)記上綁定點(diǎn)擊事件,將不會(huì)造成默認(rèn)的跳轉(zhuǎn)效果
在這個(gè)點(diǎn)擊事件中,先將dBox的框架載入了頁面,然后判斷內(nèi)容的加載方式,分別處理,最后有三個(gè)事件
1,addCSS()此事件處理遮罩層大小,彈出層的位置
2,drag()此事件處理彈出層的拖曳
3,dBoxRemove()此事件處理彈出層的關(guān)閉
有了這三個(gè)事件,整個(gè)插件就基本完成了
六,這里貼出如上三個(gè)事件的代碼
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] });
}
}
在這個(gè)addCSS中,還有兩個(gè)功能需要實(shí)現(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這個(gè)東東沒有加上去。。。
另外還發(fā)現(xiàn)在ie6中,彈出的iframe高度和寬度都少了點(diǎn),還有就是有遮罩層時(shí),移動(dòng)的時(shí)候不順暢
還有其它問題歡迎討論!
在線演示地址 http://demo.jb51.net/js/dBox/dBox.htm
打包下載地址 http://xiazai.jb51.net/201004/yuanma/dBox.rar
您可能感興趣的文章:
- 強(qiáng)烈推薦240多個(gè)jQuery插件提供下載
- 跟我一起學(xué)寫jQuery插件開發(fā)方法(附完整實(shí)例及下載)
- 分享20多個(gè)很棒的jQuery 文件上傳插件或教程
- jquery插件制作 手風(fēng)琴Panel效果實(shí)現(xiàn)
- jquery插件制作 圖片走廊 gallery
- jquery插件制作 表單驗(yàn)證實(shí)現(xiàn)代碼
- 一步一步制作jquery插件Tabs實(shí)現(xiàn)過程
- jquery tab插件制作實(shí)現(xiàn)代碼
- jquery插件制作 提示框插件實(shí)現(xiàn)代碼
- jQuery焦點(diǎn)圖切換簡易插件制作過程全紀(jì)錄
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jquery插件制作 自增長輸入框?qū)崿F(xiàn)代碼
- jquery插件格式實(shí)例分析
相關(guān)文章
jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)圖片自動(dòng)輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02jQuery對(duì)于顯示和隱藏等常用狀態(tài)的判斷方法
這篇文章主要介紹了jQuery對(duì)于顯示和隱藏等常用狀態(tài)的判斷方法,給出了兩種較為常用的判斷方法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能示例
這篇文章主要介紹了jQuery+ajax實(shí)現(xiàn)動(dòng)態(tài)添加表格tr td功能,結(jié)合實(shí)例形式分析了jQuery基于ajax動(dòng)態(tài)創(chuàng)建頁面table元素相關(guān)操作技巧,需要的朋友可以參考下2018-04-0430個(gè)經(jīng)典的jQuery代碼開發(fā)技巧
這篇文章主要介紹了30個(gè)經(jīng)典的jQuery代碼開發(fā)技巧,包含了常見屬性、方法、元素等的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-12-12jquery實(shí)現(xiàn)自定義樹形表格的方法【自定義樹形結(jié)構(gòu)table】
這篇文章主要介紹了jquery實(shí)現(xiàn)自定義樹形表格的方法,結(jié)合實(shí)例形式分析了jQuery創(chuàng)建自定義樹形結(jié)構(gòu)table的相關(guān)操作技巧,需要的朋友可以參考下2019-07-07jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航高亮的方法,涉及針對(duì)鼠標(biāo)事件的相應(yīng)及頁面元素屬性動(dòng)態(tài)變換的相關(guān)操作技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-11-11jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)電梯導(dǎo)航模塊,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12jQuery 擴(kuò)展對(duì)input的一些操作方法
擴(kuò)展對(duì)input的一些方法(練習(xí)jQuery插件)2009-10-10