layer —— 一个简单的jQuery弹出层插件
layer的使用
4.24更新：注意：layer现在有旧版1.8.5版本和新版本3.0版本的，对应引入的JQ也要不同，相对应的JQ引入1.1和3.1，否则JQ会出问题
4.21更新；
解答4-19的问题：采用红色字
4,19日更新问题
在老版本中（1.7）版中遇到的问题;问题补充：准确的说是，在移动端中所出现的问题，
layer.confirm() //在运行时会报错，是什么原因呢？
原因:在移动端中，其实是不支持，layer.alert(),layer.confirm(),layer.msg()等方法的，只支持 layer.open() ;参数根据相关文档去配置就好了；
layer.open({content:\’你确定删除吗？\’,btn:[\’确定’，\’取消\’]}） //显示的确定在右边，并且调用函数是错的？
原因：移动端本来就是与PC相反的，是为了符合用户习惯。所以在移动端书写时正常书写就好，只有2个按钮时，确定回掉用yes:function(){},取消回掉用no:function(){};有多个按钮时；确定按钮会在最右侧，确定也是用yes:function(){};其他按钮用，btn2:function(){},btn3:fubction(),…
if(!layer.open({content:\’你确定删除吗？\’,btn:[\’确定’，\’取消\’]}）) return false ; //第一次显示正常，第二次就不执行了，直接执行后面的语句，导致内容删除掉？
原因：采用上题的方法就不会出现问题；
改成：
layer.open({ content:\'测试\', btn: [\'确定\', \'取消\'], yes:function(index, layero) { console.log(\'确定\'); }, no:function(index, layero) { //点击取消时，弹出框就没了 } })
简介：web弹层组件；更少的代码展现更强健的功能；永久性提供无偿服务；
使用：
1，下载layer.zip,解压;
2，引入jquery.js和 layer.js;这是一个独立于layui的组件，不需要依赖什么;
3，demo:
<script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript">
//layer.alert(\'hello world！\');
layer.alert(\’hello\’, {
icon: 1,
skin: \’layer-ext-moon\’
})
</script>
可以看出：只是将单单的alert换成了layer.alert,其他同理；后面可跟参数来设置显示的样式；你以为仅仅只是这样吗，前面只是简单的用法，然并卵；正确的打开方式这..这样子的
layer.open({ type: 1, content: \'传入任意的文本或html\' })
4，基础参数：
1，(层类型) type: layer提供了5种层类型。可传入的值有：
0（信息框，默认） 包括（alert,confirm,msg)
1（页面层）
2（iframe层）
3（加载层）
4（tips层）
若你采用layer.open({type: 1})方式调用，则type为必填项（信息框除外）
layer.open({ type: 1, content: \'我是页面层\' });
2，（标题） title: 3种类型：String/Array/Boolean，默认：\’信息\’
3，（内容） content： 3种类型：String/DOM/Array，默认：\’\’
4，（皮肤） skin： 类型：String，默认：\’\’
//单个使用 layer.open({ skin: \'demo-class\' }); //全局使用。即所有弹出层都默认采用，但是单个配置skin的优先级更高 layer.config({ skin: \'demo-class\' }) //CSS body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;} body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7} body .demo-class .layui-layer-btn a{background:#333;} body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;} … // 加上body是为了保证优先级。你可以借助Chrome调试工具，定义更多样式控制层更多的区域。
扩展：layer皮肤制作说明。
【第一步】：命名文件夹
在layer的skin目录建立一个文件夹，假设您将该文件夹命名为：yourskin
【第二步】：创建样式等文件
在yourskin文件夹下建立一个单独的样式文件，务必命名为：style.css。并且你可能用到的图片也要存放在该文件夹下
【第三步】：书写样式
/*
通过body前缀，是为了确保你皮肤的优先级
你可以通过调试工具重置更多样式
*/
body .layer-ext-yourskin .layui-layer-title{}
body .layui-ext-yourskin .layui-layer-btn{}
body .layui-ext-yourskin .layui-layer-btn a{}
【第四步】：调试
通过全局配置看看你的皮肤定义的如何：
layer.config({
extend: \’myskin/style.css\’, //加载您的扩展样式
skin: \’layer-ext-yourskin\’
});
layer.alert(\’layer皮肤-Yourskin\’);
【最后一步】：发布
1. 现在你已经成功制作了一个皮肤了，如果你觉得它很美，你可以共享出更多的人使用。
2. 那么你应该制作一个简单的页面来介绍你的皮肤，提供尽可能简单的使用说明（就像这个：layer.seaning.com）。
3. 然后将你的皮肤主题页网址通过任意渠道发给贤心（比如可以通过邮箱：xu@sentsin.com）
————————————and more—–参考官方文档———————————————————
area宽高
offset坐标
icon提示图标
btn提示按钮
btnAlign按钮排列
closeBtn右上关闭
shade遮罩
shadeClose
time自动关闭
id唯一id
anim动画
isOutAnim关闭动画
maxmin最大小化
fixed是否固定
resize是否允许拉伸
resizing正在拉伸
scrollbar屏蔽滚动
maxWidth最大宽
zIndex层叠值
move拖拽元素
moveOut拖出
moveEnd回调
tipsTips参数
tipsMore允许多tips
success弹出后回调
yes确定回调
cancel关闭回调
end销毁后回调
full/min/restore
内置方法
config全局设置
ready就绪
open核心方法
alert弹框
confirm询问
msg提示
load加载
tips吸附
close关闭层
closeAll关闭全部
style
title重置标题
getChildFrame
getFrameIndex
iframeAuto
iframeSrc
setTop多层置顶
full/min/restore
其他内置层
prompt输入层
tab选项卡层
photos图片层