# layer

**Repository Path**: kevinui/layer

## Basic Information

- **Project Name**: layer
- **Description**: 一个轻量级移动UI插件，集合了layer(层，核心)、page(子页面),dialog(弹窗)，toast(消息)，loading（加载层），photos(相册)，actions（操作类）
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2016-10-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#$.layer 1.2.0
$.layer是一款基于Zepto的移动端UI插件，轻量级（压缩后才11K），拥有强大的自定义功能，和丰富的接口。以`layer`为核心，包涵了`dialog`(弹窗)，`toast`(消息)，`loading`（加载层），`actions`（操作类）内置方法。以及一个`photos`(相册)插件。
而且层自带路由功能，可以通过浏览器的前进、后退按扭操作。
为了方便大家集成到自己的项目中，本插件没有带图标，大家可以调用自己的图标。

继续完善中，希望大家多多支持！


交流QQ群：`107479629`

#核心方法：$.layer
##基本参数
小技巧:下成所有的`style`样式都有两种写法，`字符串格式`和`JSON格式`，但如果样式中包括base64数据，建议使用JSON格式写否则会出错。
id		层ID
type	层的类型，可以是字母或数字
head	标题区，字符串或{title:'标题',className:'样式名',style:'头部样式',btn:[{text:'按扭名',icon:'按扭样式',isclose:是否关闭按扭}]}
content	内容区，`字符串`，或`['内容','CSS样式']`
foot		底部区，`字符串`，或`['内容','CSS样式']`
className	样式名
size	尺寸`['宽','高']`
style	自定义样式
anim	动画名称，默认:`fade`，你也可以自定义，格式如：`[{初始CSS},{入场动画},{出场动画},time]`
shade	是否显示遮罩，1或style样式
shadeclose	点击遮罩关闭
timeout	定时关闭，秒
router	是否路由(层添加`route-block`样式时，阻止路由返回事件)
onshow	显示完成后回调
onclose	关闭后回调
##方法：
.show()		显示层
.close()	关闭层
##监听事件
show	显示后触发
close	关闭后触发

#以下是DEMO

##创建一个层
```
var mylayer=$.layer({
	id:'layid',
	head:{title:'层标题',className:'mylayer',style:'background:#F00',btn:[{text:'关闭',icon:'fr'}]},
	content:'内容',			//也可以这样写['内容','color:#F00;background:#FF0;']
	foot:'页脚',			//HTML或['页脚','background:#FF0;']
	size:['100%','100%'],	//因定值要带单位，如px
	anim:'zoom',			//入场样式为缩放
})
//当层被关闭后，还可以用以下方法让他显示
mylayer.show();
```
##关闭一个层
叶良辰有100种方法让你关闭
```
//方法一：
$.layer.close(mylayer);	//mylayer上方变量

//方法二：
mylayer.close(call);	//call为回调

//方法三：
$.layer.close(index);	//index为该层的索引ID

//方法四：
$.layer.close(id);		//如果层设置了ID的话，传入ID即可。

//方法五
$.layer.close('all')	//关闭所有层

```
##事件监听
```
//监听显示事件
mylayer.on('show',function(){
	console.log('层显示了');
})
//监听关闭事件
mylayer.on('close',function(){
	console.log('层关闭了');
})
```

#标签页$.layer.tab(tab,option);	
`tab`标签数组数据
`option`layer基本参数
```
$.layer.tab([
	{title:'tabA',content:'内容HTML'},
	{title:'tabB',content:'内容HTML'}
],{
	size:['90%','95%'],
	anim:'zoom'
});
```
#操作类 $.layer.actions(btn,option);
`btn`操作类按扭组
`option`layer基本参数
上代码：
$.layer.actions([
	{text:'用户登录',label:0},
	{text:'退出登录',label:1,onClick:function(){console.log('login Out!')}},
	{text:'百度',label:{href:'http://www.baidu.com/',target:'_blank'}}
	,{},	//分隔
	{text:'关闭',label:1}
]);
```

#对话框 $.layer.dialog('msg',title,btn,callback)
`msg`提示内容
`title`标题
`btn`按扭，数组['确定','取消']
`callback`回调，返回点击的按扭索引
```
//完整
$.layer.dialog('msg','title',['确定','取消'],function(i){
	alert('你点了第【'+i+'】个按扭');
})
//你也可以这样
$.layer.dialog('msg',['我知道了']});
```

#消息 $.layer.toast(msg,icon)
`msg`为字符串，或layer的`基本参数`
`icon`图标样式
```
//demo1
$.layer.toast('这是一个提示信息','icon-yes');

//demo2
$.layer.toast({content:'这是一个提示信息',style:'background:#FF0;color:#C00'},'icon-yes');

```

#加载 $.layer.loading(msg);
与`toast`类似，msg为字符串，只有一个参数。