一个简单的jQuery插件制作学习过程及实例_jquery
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了一个简单的jQuery插件制作学习过程及实例_jquery，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4922字，纯文字阅读大概需要8分钟。
内容图文
一，首先，制作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 = "
";
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("
最后一个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
内容总结
以上是互联网集市为您收集整理的一个简单的jQuery插件制作学习过程及实例_jquery全部内容，希望文章能够帮你解决一个简单的jQuery插件制作学习过程及实例_jquery所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】