layer 弹层是一个很简洁,很好看的弹层插件。
前言
近几天项目里使用了layer弹层,初次使用有些生疏,在使用过程中遇到了很多问题,查阅官方api,总是碰到一些问题,感觉官方api在某些细节上叙述的不是特别清楚。特此在我使用中某些细节问题做一下说明。
layer类型
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。
为什么会划分这么多种类型,个人理解,这么多种类型其实是为了应对不同的应用场景。比如提示框,那你就用msg来写就行了,没别要用一个页面层什么的。诸如此类简单的,不在赘述。在这里重点说一下页面层,iframe层和tips层的区别和应用场景。
页面层
页面层conten里放的内容是要加载到当前页面的东西。可以是html的字符串也可以示DOM对象。如果是自己写的html字符串,没有影响。但如果是DOM对象,需注意官方api里有一句话:
layer.open({
type: 1,
content: $('#id') //这里content是一个DOM,注意:最好该元素要存放在body最外层,否则可能被其它的相对元素所影响
});
在我看来,不是最好放在body外面,而是必须放在外面。因为页面层会加载弹层内容到当前页面上,如果不在body外,那岂不是有两个id一样的内容加载了!
另外放在body外还得设置隐藏哦,一般根据习惯会用一个div来包着弹层的内容。加载时也是加载div。
重点
加载的弹层在当前页面上,所以在当前页的js里获取弹层内容操作是很方便的。
应用场景
适合直接弹出静态页面,不需要在弹出之前跟后台交
iframe层
iframe层的content是一个请求,通过后台返回的页面来填充弹层内容。
layer.open({
type: 2,
content: 'http://sentsin.com' //这里content是一个URL,如果你不想让iframe出现滚动条,你还可以content: ['http://sentsin.com', 'no']
});
重点
加载的弹层不在当前页面上,所以在当前页的js里获取弹层内容操作是很不方便的。
本人尝试通过js来获取是可以得,先获得iframe对象进而获取你想要的东西,很麻烦。
也许在有些人看来不麻烦,但真要这样做其实是跟layer的初心简单简洁,背道而驰了。
应用场景
适合需要后台交互返回的页面往往有后台的参数或者数据加载。
tips层
tips层其实是一种类似msg一样的小提醒。我理解官方的意思就是让它作为一种小提醒去使用的。
重点
content里放的只能是html的字符串。如果强行想放DOM对象,需要$(“#id”).html().否则弹层内容会出现[object,object]
由于内容是静态的html标签,所以如果需要展示后台交互的动态内容怎么办?
先考虑用iframe,如果业务非得要这么做,那可以在弹层之前,先得到交互之后的动态页面,然后把交互之后的页面的html字符串放到tips的content里。
应用场景
适合需要贴着某个控件显示弹层