jquery弹窗插件dialog

蚊子前端博客
发布于 2015-07-22 06:00
自己动手写了一个简单的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元素进行操作的,若页面中存在相同的元素,则会受到这个插件的影响。

我会持续完善的,也希望各位能提出意见或建议。

标签:
阅读(1140)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆