自己动手写了一个简单的jquery弹窗插件
这几天工作上比较轻松,就想起了要写一个jquery弹窗插件练练手。倒是实现了一些基本的功能,不过依然还有很多不完善的地方。
源码可以在我的github上进行查看:【github-dialog】
使用new $.wz.Dialog()
即能调用出默认的窗口,同时,还对外提供了多个参数进行定制化:
COPYJSON
{ width:'400', // 宽度 height:'300', // 高度 location : 'center',// center, topleft(lefttop), topright(righttop), bottomleft(leftbottom), bottomright(rightbottom) shade : true, // 是否需要遮罩 shadeClose : true, // 点击遮罩是否关闭弹窗 btn : [], // 要显示的按钮 {name:"确定" //按钮名称, close:false //点击后是否关闭弹窗, action:function(){} // 点击按钮要执行的方法} ease : 'fade', // 显示和隐藏形式 title:'提示框', // 弹窗标题 content:'内容加载中...',// 弹窗内容 countdown:0, // 倒计时的时间,若小于等于0则表示不启动倒计时 }
我们来看下面的几个例子:
例子1
创建一个弹窗,内容是“hello world”,同时还有两个按钮,确定按钮不能关闭弹窗,取消按钮可以关闭弹窗。
COPYJAVASCRIPT
new $.wz.Dialog({ content : 'hell world', btn : [ { name : "确定", close : false, // 不关闭弹窗 action : function(){ alert("确定按钮"); } }, { name : "取消", action : function(){ alert("取消按钮"); } } ] });
例子2
创建一个弹窗,不要遮罩,右上角弹出
COPYJAVASCRIPT
new $.wz.Dialog({ content : 'hell world', shade : false, location : 'topright', // 'righttop' btn : [ { name : "确定", } ] });
例子3
创建一个弹窗,点击遮罩时不能关闭弹窗,采用倒计时关闭弹窗
COPYJAVASCRIPT
new $.wz.Dialog({ content : 'hell world', shadeClose : false, countdown : 5 // 大于0则启动倒计时,否则关闭 });
总结
在编写这个插件的过程中学到了很多的东西,没写的时候觉得写插件挺容易,可是真写起来发现就不是那么回事了。既然是插件,那就要考虑到通用的情况,把各种可能使用到的情况都考虑进去。不过依然还有很多改进的地方,比如:
在没有传入title的情况,应该默认隐藏title
没有考虑
IE6
的兼容性可能造成全局变量的污染,插件里是直接对
.wz_dialog
的jQuery元素进行操作的,若页面中存在相同的元素,则会受到这个插件的影响。
我会持续完善的,也希望各位能提出意见或建议。