layer官方演示与讲解(jQuery弹出层插件).docxVIP

layer 官方演示与讲解（ jQuery 弹出层插件） 些唠叨 在线调试 前往旧版 1.8.5 layer 是一款近年来备受青睐的 web 弹层组件，她具备全方 位的解决方案，致力于服务各水平段的开发人员，您的页面 会轻松地拥有丰富友好的操作体验。 在与同类组件的比较中， layer 总是能轻易获胜。 她尽可能地 在以更少的代码展现更强健的功能，且格外注重性能的提升、 易用和实用性，正因如此，越来越多的开发者将媚眼投上了 layer （已被2688020人次关注）。layer兼容了包括IE6在 内的所有主流浏览器。 她数量可观的接口，使得您可以自 定义太多您需要的风格，每一种弹层模式各具特色，广受欢 迎。当然，这种“王婆卖瓜”的陈述听起来总是有点难受，因 此你需要进一步了解她是否真的如你所愿。 layer 遵循 LGPL 协议，将永久性提供无偿服务。 历经数年， 截至到 2015 年 09 月 01 日，已运用在 10 万余家 web 平台， 其中包括中国联通、蚂蚁短租、慕课网、 phpyun 等等知名 网站，如果您有大型项目也在使用 layer ，您可以联系作者， Fly以便在此展现案例， 也为您的品牌推广尽一些绵薄之力。 Fly 睹为快 接下来我们将初步演示 layer 一些基本的层类型 初体验 第三方扩展皮肤 询问层 提示层 墨绿深蓝风 捕获页 页面层 自定页 tips 层 iframe 层 iframe 窗 加载层 loading 层 小 tips prompt 层 tab 层 相册层特别说明：事件需自己绑定，以下只展现调用代码。 //初体验 layer.alert（ 内容 ） //第三方扩展皮肤 layer.alert( 内容 , { icon: 1, skin: layer-ext-moon // 该皮肤由 友情 扩展。关于皮肤的扩展规则，去这里查阅 }) //询问框 layer.confirm( 您是如何看待前端开发？ , { btn: [重要,奇葩] //按钮 }, function(){ layer.msg( 的确很重要 , {icon: 1}); }, function(){ layer.msg( 也可以这样 , { time: 20000, //20s 后自动关闭 btn: [明白了, 知道了 ] }); }); //提示层 layer.msg( 玩命提示中 layer.msg( 玩命提示中 ); //墨绿深蓝风 layer.alert( 墨绿风格，点击确认看深蓝 , { skin: layui-layer-molv // 样式类名 ,closeBtn: 0 }, function(){ layer.alert( 偶吧深蓝 style, { skin: layui-layer-lan ,closeBtn: 0 ,shift: 4 // 动画类型 }); }); //捕获页 layer.open({ type: 1, shade: false, title: false, // 不显示标题 content: $(.layer_notice), // 捕获的元素 cancel: function(index){ layer.close(index); this.content.show(); layer.msg( 捕获就是从页面已经存在的元素上，包裹 layer 的结构 , {time: 5000, icon:6}); }); //页面层 layer.open({ type: 1, skin: layui-layer-rim, // 加上边框 area: [420px, 240px], // 宽高 content: html 内容 }); //自定页 layer.open({ type: 1, skin: layui-layer-demo, // 样式类名 closeBtn: 0, // 不显示关闭按钮 shift: 2, shadeClose: true, // 开启遮罩关闭 content: 内容 }); //tips 层 layer.tips（Hi ，我是 tips, 吸附元素选择器，如 #id）; //iframe 层 layer.open({ type: 2, title: layer mobile 页 , shadeClose: true, shade: 0.8, 的 urlarea: [380px, 的 url content: /mobile/ //iframe }); //iframe 窗 layer.open({ type: 2, title: false, closeBtn: 0, // 不显示关闭按钮 shade: [0], area: [340px, 215px