layer —— 一个简单的jQuery弹出层插件

layer的使用

简介：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！‘); 

可以看出：只是将单单的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图片层

layer —— 一个简单的jQuery弹出层插件

原文：http://www.cnblogs.com/liyiyy/p/6698649.html