弹出层(layer)在往上有非常多,这里为什么我要把它的实现提出来,原因有以下2点:
1、写这篇文章也算是我博客的一个开端,他们都说:“不写博客成不了大神” - -
2、我见过的弹出层中都基本没有处理跨iframe传值回调,或者说不是真正意义上的回调函数。
3、一个layer 10K左右就可以完成的功能,非得引用一个jquery EasyUI、jquery 等等的方式,都是我不能接受的。
一个独立的插件应该尽量减少依赖,这也是设计模式中追求的解耦与减少依赖。(layer去依赖某种库或多个库,不是一个很好的选择。)
先说说调用方式:插件做出来是让人使用的,我觉得从最终的展现形式入手,能让人更直观的了解这个插件是干嘛的。以及它的优点。
演示代码中我仅仅演示了Iframe弹出层的方式,主要就是看它的回调函数。其它方式,可以在源码中自己查看,稍后将放出源码。
调用方式Code:
<input type="button" οnclick="iframe0()" value="iframe层,默认无底部" />
<textarea id="callBox" style="height:200px"></textarea>
function iframe0() {
layer.win("回调函数的演示", "callback.htm", function (data) {
document.getElementById("callBox").value += data + "\r\n";
})
}
上面代码是在index.html页面中的代码,这种场景很多,(比如:订单页面里,需要选择部门的数据,往往会把部门的数据做成一个单独的页面,通过弹出层调用之后选择,然后返回对应的数据)
layer.win是弹出iframe的方式,参数1为弹出层的标题(这个参数其实非常灵活),参数2一看就是一个页面的url,这里设置为callback.html。参数3:这个参数很关键了。它是一个真正意义上的回调函数,也就是当callback.html选择数据返回之后执行的代码。文字比较抽象,还是看代码。
<