layer弹层组件之移动版

发表于 更新于 分类于

简介

  layer弹层组件分移动版和PC版，这边主要讲的是移动版的layer，PC版的后续再进行补充。移动版是为移动设备量身定做的弹层UI，并且完全独立于PC版的layer。与PC版的layer不同的是，移动版的layer只提供一个核心调用方法，即layer.open(options)，通过对参数options进行设置来实现各种不同的弹层。

快速上手

  第一步，下载。要去官网下载layer的相关文件，主要是layer.js文件，layer.css文件可以根据需要引入，但是layer.js文件是必需的。
  第二步，引入。将layer的相关文件引入项目中，这里需要注意的是，不能去挪动layer里面的文件结构，因为它们是不可拆散的组合，直接整个引入就可以。由于layer是基于jQuery的，在引入layer.js文件之前，必须先引入jQuery1.8或以上版本。
  第三步，使用。下面是一个简单的layer弹层例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!doctype html>
<html>
	<head>
	  <title>开始使用layer</title>
	</head>
	<body>
	  <button id="test">小小提示层</button>

	  <script src="jQuery的路径"></script>
	  <script src="layer.js的路径"></script>
	  <script>
		$('#test').on('click', function(){
		  layer.open({
			type: 1,
			area: ['600px', '360px'],
			shadeClose: true, //点击遮罩关闭
			content: '\<\div style="padding:20px;">自定义内容\<\/div>'
		  });
		});
	  </script>
	</body>
</html>

参数

  这里所谈到的参数指的就是核心接口layer.open(options)中的options。

type

  type参数用于设置弹层的类型。其类型为Number型，默认值为0（0表示信息框，1表示页面层，2表示加载层）。

1
type: 1

content

  content参数用于设置弹层内容。其类型为String型，这个参数为必选参数。

1
content:  'layer弹层组件'

title

  title参数用于设置弹层标题。其类型为String型或Array型，默认值为空，值可以为字符串或者数组，为空则不显示。

1
2
3
4
5
6
7
//格式
	title: '标题'
	title: ['标题', 'background-color: #eee;'] //第二个参数可以自定义标题的样式 

//举例
	title:  'layer'
	title:  ['layer', 'color: #eee;']

time

  time参数用于控制自动关闭层所需秒数。其类型为Number型，默认不开启，支持整数和浮点数。

1
time:  5  //5秒后关闭

style

  style参数用于设置自定义层的样式。其类型为String型。

1
style:  'border:none; background-color:#78BA32; color:#fff;'

skin

  skin参数用于设定弹层显示风格。其类型为String型，目前支持配置footer(即底部对话框风格)、msg(普通提示)两种风格。

1
skin: 'footer'

className

  className参数用于自定义一个css类。其类型为String型，用于自定义样式。自定义一个css类后，就可以在css里面通过设置这个类的样式来控制该弹层的风格。

1
className:  'modal'

btn

  btn参数用于设置按钮。其类型为String型或Array型，不设置则不显示按钮。如果只需要一个按钮，则btn: '按钮'，如果有两个，则btn: ['按钮一', '按钮二']。

1
2
//设置两个按钮
btn:  ['马上开启','稍后再说' ]

anim

  anim参数用于设置动画类型。其类型为String型或Boolean型，可支持的支持两种动画配置scale(默认)和up(从下往上弹出)，如果不开启动画，设置false即可。

1
anim:  'up'

shade

  shade参数用于控制遮罩展现。其类型为String型或Boolean型，默认为true，显示遮罩，并且可以自定义遮罩风格。

1
shade:  'background-color: rgba(0,0,0,.6) '  //遮罩的颜色以及透明度

shadeClose

  shadeClose参数用于设置点击遮罩时是否关闭层。其类型为Boolean型，默认为true，即点击遮罩时关闭层。

1
shadeClose:  false  //点击遮罩时不关闭层

fixed && top

  fixed参数用于设置是否固定层的位置，需要与top参数一起使用。其类型为Boolean型，默认为true，不固定层的位置。而top参数用于控制层的纵坐标，其类型为Number型，默认为无，一般情况下不需要设置，因为层会始终垂直水平居中，只有当fixed: false时top才有效。

1
2
fixed : false,
top: 10

success && end

  success参数用于设置层成功弹出层的回调，该回调参数返回一个参数为当前层元素对象。其类型为Function型。end参数与success参数用法类似，只是它刚好与success参数相反，是用于设置层彻底销毁后的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//格式
	success: function(elem){
		console.log(elem);   //弹层成功弹出时候提示弹出	
	}
	end: function(elem){
		console.log(elem);   //弹层销毁时提示销毁
	}
//举例
	success: function(){
		alert('弹出');   
	},
	end:function(index){
		  alert("销毁"); 
	}

yes && no

  yes参数用于设置点击确定按钮触发的回调函数，返回一个参数为当前层的索引。其类型为Function型。no参数与yes参数用法类似，只是它刚好与yes参数相反，用于设置点击取消按钮触发的回调函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//格式：
	yes: function(index){
	  alert('点击了是')
	  layer.close(index)
	}
	no: function(index){
	  alert('点击了否')
	  layer.close(index)
	}
//举例
	yes: function(){  //点击确定时候弹出“好的”提示
	    layer.open({
	      content: '好的'
	      ,time: 2
	      ,skin: 'msg'
	    });
	},
	no: function(index){			  
		window.location.href="https://www.baidu.com/"; //点击取消跳转到必应
	}

其它内置方法/属性

layer.v

  layer.v用于返回当前使用的layer mobile版本号。

1
2
3
yes: function(index){
    alert(layer.v);   //弹出“2.0”，当前的版本为2.0
   }

layer.close(index)

  layer.close(index)用于关闭特定层，index为该特定层的索引。

1
2
3
yes: function(index){
	layer.close(index);
}

layer.closeAll()

  layer.closeAll()用于关闭页面所有layer的层。

1
2
3
yes: function(index){
    layer.closeAll();
   }

实例

  1. 信息框

    1
    2
    3
    4
    layer.open({
        content: '我是layer移动版',
        btn: '知道了'
    });

  2. 提示

    1
    2
    3
    4
    5
    layer.open({
        content: '你好',
        skin: 'msg',
        time: 3 //3秒后自动关闭
    });

  3. 询问框

    1
    2
    3
    4
    5
    6
    7
    8
    layer.open({
        content: '您确定要刷新一下本页面吗？',
        btn: ['刷新', '不要'],
        yes: function(index){
          location.reload();
          layer.close(index);
        }
    });

  4. 底部对话框

    1
    2
    3
    4
    5
    6
    7
    8
    layer.open({
        content: '这是一个底部弹出的询问提示',
        btn: ['删除', '取消'],
        skin: 'footer',
        yes: function(index){
          layer.open({content: '执行删除操作'})
        }
    });

  5. 页面层

    1
    2
    3
    4
    5
    6
    layer.open({
        type: 1,
        content: '可传入任何内容，支持html。一般用于手机页面中',
        anim: 'up',
        style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
    });

  6. loading带文字

    1
    2
    3
    4
    layer.open({
        type: 2,
        content: '加载中' //如果没有content的话，则只有几个加载的小圆点
    });

参考地址