导读：layer的优势明显，她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升、易用和实用性，正因如此，越来越多的诸如八圆包...
layer的优势明显，她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升、易用和实用性，正因如此，越来越多的诸如八圆包(九块九包邮)等等开发者将媚眼投上了小小的layer（已有358493人次关注新版layer）。当你问及她的兼容时，layer必须告诉你，她兼容了一切浏览器，包括古老的ie6。layer公开了如此多的接口，这使得您可以DIY太多您需要的风格，尤其是页面层模式，意味着必要时您可以完全抛弃layer的现有皮肤，并用你的思维去勾勒她的衣着。而问题在于，我必须中止“王婆卖瓜”的陈述。因为一切的不足或友好，都需要您在使用过程中去发现。
演示说明，输入/文件层、tab层、相册层对应的说明也已在下述更新:
触发弹层的事件可自由绑定，如：
$('#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'}
});
【页面层二】
$.layer({
type: 1,
title: false,
area: ['420px', '260px'],
shade: [0],
page: {
html: '自定义内容'
}, success: function(){
layer.shift('left'); //左边动画弹出
}
});
【iframe层一】
$.layer({
type: 2,
maxmin: true,
shadeClose: true,
title: 'layer授权',
shade: [0.1,'#fff'],
offset: ['20px',''],
area: ['1000px', ($(window).height() - 50) +'px'],
iframe: {src: 'http://url.cn/RAejZY'}
});
【iframe层二】
$.layer({
type: 2,
closeBtn: false,
shadeClose: true,
shade: [0.1, '#fff'],
border: [0],
time: 3,
iframe: {
src: 'test/guodu.html'
},
title: false,
area: ['300px','250px'],
success : function(){
layer.shift('right-bottom', 500);
}, end : function(){
$.layer({
type : 2,
offset : ['50px', ''],
title: '贤心博客 - sentsin.com',
shadeClose: true,
maxmin: true,
iframe : {
src : 'http://sentsin.com/'
},
fix : false,
area: ['1024px', ($(window).height() - 110) +'px']
});
}
});
【加载层一】
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: ['1100px', ($(window).height() - 110) +'px'],
offset: ['50px', ''],
data: [
{title: 'Say', content:'Hi，Main'},
{title: '无题', content:'支持html传入'}
]
});
【相册层】
//此处为异步请求模式，具体的json格式，请等待文档更新。或者你直接通过请求看photos.json
var conf = {};
layer.load();
$.getJSON('http://' + location.host + '/jquery/layer/test/photos.json', {}, function(json){
conf.photoJSON = json; //保存json，以便下次直接读取内存数据
layer.photos({
html: '这里传入自定义的html，也可以不用传入（这意味着不会输出右侧区域）。相册支持左右方向键、Esc关闭',
json: json
});
layer.closeLoad();
});
