触发弹层的事件可自由绑定,如: $('#id').on('click', function(){ layer.msg('test'); }); 下面主要贴出上述例子的调用代码: 【信息框】: layer.alert('白菜级别前端攻城师贤心', 8); //风格一 layer.msg('前端攻城师贤心'); //风格二 //当然,远远不止这两种风格。 【询问框】: $.layer({ shade: [0], area: ['auto','auto'], dialog: { msg: '您是如何看待前端开发?', btns: 2, type: 4, btn: ['重要','奇葩'], yes: function(){ layer.msg('重要', 1, 1); }, no: function(){ layer.msg('奇葩', 1, 13); } } }); //还可用layer.confirm()快捷调用 【页面层一】 $.layer({ type: 1, shade: [0], area: ['auto', 'auto'], title: false, border: [0], page: {dom : '.layer_notice'} }); 【页面层二】 var pageii = $.layer({ type: 1, title: false, area: ['auto', 'auto'], border: [0], //去掉默认边框 shade: [0], //去掉遮罩 closeBtn: [0, false], //去掉默认关闭按钮 shift: 'left', //从左动画弹出 page: { html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background-color:#eee;"><p>我从左边来,我自定了风格。</p><button id="pagebtn" class="btns" onclick="">关闭</button></div>' } }); //自设关闭 $('#pagebtn').on('click', function(){ layer.close(pageii); }); 【iframe层一】 $.layer({ type: 2, shadeClose: true, title: false, closeBtn: [0, false], shade: [0.8, '#000'], border: [0], offset: ['20px',''], area: ['1000px', ($(window).height() - 50) +'px'], iframe: {src: 'http://f2e.sentsin.com/chat'} }); 【iframe层二】 layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, { time: 5, maxWidth: 260 }); $.layer({ type: 2, closeBtn: false, shadeClose: true, shade: [0.1, '#fff'], border: [0], time: 5, iframe: { src: 'test/guodu.html' }, title: false, area: ['300px','250px'], shift: 'right-bottom', end: function(){ $.layer({ type : 2, title: '贤心博客 - sentsin.com', shadeClose: true, maxmin: true, fix : false, area: ['1024px', 500], iframe: { src : 'http://sentsin.com/' } }); } }); 【加载层一】 layer.load(3); 【加载层二】 layer.load('加载带文字', 3); 【tips层一】 layer.tips('tips的样式并非是固定的,您可自定义外观。', this, { style: ['background-color:#78BA32; color:#fff', '#78BA32'], maxWidth:185, time: 3, closeBtn:[0, true] }); 【tips层二】 layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2}); 【输入/文件层】 //普通文本 layer.prompt({title: '您的名字?'}, function(name){ alert(name); }); //密码文本 layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){ alert(pass); }); //文件上传 layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){ alert(file); }); //多行文本 layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){ alert(val); }); 【tab层】 layer.tab({ area: ['1000px', '500px'], data: [ {title: 'Say', content:'Hi,Main'}, {title: '无题', content:'支持html传入'} ] }); 【相册层】 //此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json var conf = {}; $.getJSON('ajax地址', {}, function(json){ conf.photoJSON = json; //保存json,以便下次直接读取内存数据 layer.photos({ html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭', json: json }); });
layer提供了五种模式的层,分别为:信息框、页面层、iframe层、加载层、tips层,而layer.ext.js提供的拓展层是在这五种模式的基础上创建的。下面就此五种模式层进行大致的演示,更多功能还需要您自己去实验发现。
使用组件时,请将layer整个文件夹放置您项目的任何一个目录下,请务必不要移动layer默认的文件结构,否则将无法运行。部署完后,您只需在页面引入layer.min.js即可(当然,别忘了引入jquery,必须使用jquery1.8或以上)
【例一】: layer.alert('一个很普通的信息框'); 【例二】: layer.alert('信息框演示二', 11, !1); 【例三】: layer.confirm('信息框演示三',function(index){ layer.msg('信息框演示三'); }); 【例四】: layer.msg('也可以不用显示图标哦', 2, -1); 【例五】: 就是告诉下大家有很多图标可以选择 【例六】: layer.msg('踩到屎啦', 2, 13);
ps:做一些仿百度登录窗口之类的,只需要把样式写好,然后page配置下即可。 【页面层之自定义风格】: var pagei = $.layer({ type: 1, //0-4的选择, title: false, border: [0], closeBtn: [0], shadeClose: true, area: ['460px', '280px'], page: { html: '<\div style="width:460px; height:280px; background-color:#81BA25; color:#fff;"><\div style="padding:20px;">里面传入任何html元素<\/div><\/div>' //此处放了防止html被解析,用了\转义,实际使用时可去掉 } }); 【页面层之图片】: var i = $.layer({ type : 1, title : false, fix : false, offset:['50px' , ''], area : ['515px','615px'], page : {dom : '#tong'} }); 【页面层之淘宝】: var i = $.layer({ type : 1, title : false, offset:['150px' , ''], border : false, area : ['503px','395px'], page : {dom : '#taobao'} });
【iframe层之多媒体】: $.layer({ type: 2, title: false, area: ['910px', '700px'], fix: false, shadeClose: true, closeBtn: false, offset: [($(window).height() - 700)/2+'px', ''], //上下垂直居中 border: [0], shade : [0.9, '#000'], iframe: {src: 'http://im.qq.com/online/flash/flash20140304.swf'} }); 【iframe层之自定义风格】: $.layer({ type: 2, border: [0], title: false, shadeClose: true, closeBtn: false, iframe: {src : 'test/center.html'}, area: ['860px', '400px'] }); 【iframe层之子父操作】: $.layer({ type: 2, shade: [0], fix: false, title: 'iframe子父操作', maxmin: true, iframe: {src : 'iframe.html'}, area: ['800px' , '440px'], close: function(index){ layer.msg('您获得了子窗口标记:' + layer.getChildFrame('#name', index).val(),3,1); } });
例一: var loadi = layer.load(5, 0); //如不想让加载自动关闭,第一个参数设置0即可,如:layer.load(0); 例二: var loadi = layer.load('加载中…'); //需关闭加载层时,执行layer.close(loadi)即可
tips上 $('#id').on('click', function(){ layer.tips('比如实现用户小名片什么的呀', this, { style: ['background-color:#0FA6D8; color:#fff', '#0FA6D8'], maxWidth:150 }); }); tips右 $('#id').on('click', function(){ layer.tips('你瞧那远古的光/裸露空荡/无穷无尽是你深邃的眼/传递遐想 ——《远与暗》 写于2012·春·杭州', this, { guide: 1, time: 1, style: ['background-color:#F26C4F; color:#fff', '#F26C4F'], maxWidth:240 }); }); tips下 layer.tips('非常感谢大家对layer的支持,正因为你们,才让小小组件有了大大的关注。2014,加油!', this, { guide: 2, maxWidth:240 }); tips左 layer.tips('更多效果你自己慢慢发现吧。', this, { guide: 3, style: ['background-color:#c00; color:#fff', '#c00'], time: 1 });
事实上layer提供的丰富的接口支撑,已经足够让你的弹层变得千变万化,我们无法为您逐一演示。因此当你需要时,你可以阅览下$.layer()的参数说明,它会帮助你更好地运用layer。过程中遇到的任何问题,你都可以通过“有问必答”进行反馈。
下面我们还列举一些平时使用layer时的实例。