欢迎您, 来到 宁时修博客.^_^

layer.js 常用的方法

2017/09/25 宁时修 Jquery,javascript 885
layer.js 弹出层,轻量,方便,简单,实用。

百度找不到图片资源,特意下个PS软件自己P了个图片

平时在项目开发中,经常会用到layer的弹出层,加载层,询问层等等,因为他们用起来实在太方便了,基本上是拿来即用,兼容性也非常不错。下面我总结几个自己在项目开发中经常会用到的几个效果。

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layer插件使用</title>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
</head>
<body>
<button id="test1">layer常用效果</button>
</body>
</html>

layer.js官方下载地址:http://layer.layui.com/

javascript代码:

<script type="text/javascript">
$(function(){
$("#test1").click(function(){
// 简单版  alert 弹框
layer.alert('简单的alert提示');
                        
// 带回调 经典alert 弹框
layer.alert('加了个图标', {icon: 1},function(index){
  // 点击确认之后进行回调
    layer.close(index);
});
                        
// 询问层  confirm确认提示
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
   //点击确认才能回调
  layer.close(index);
});
// 简单版  提示层
layer.msg('有表情地提示'); 
                        
// 带表情和回调函数的 提示层
layer.msg('有表情地提示', {
  icon: 6,
  time: 2000 //2秒关闭(如果不配置,默认是3秒)
}, function(){
  //成功后 回调
   alert('我要跳转....');
});

//加载 0-2 不同的样式 默认为0
// layer.load(1);
// layer.load(2, {time: 10*1000}); //又换了种风格,并且设定最长等待10秒

//关闭
layer.close(index);

//tips层 4个方向 tips:1 上面 其他的好像还没测试成功 默认是在右边
layer.tips('只想提示地精准些', _this);
layer.tips('只想提示地精准些', _this,{tips:4});


});
});
</script>


layer icon参数  的各个数字对应的内容:

1:勾勾 
2:叉叉 
3:问号 
4:锁 
5 :失败 表情 哭脸
6 :成功 表情 笑脸  
7:危险信号

本文为Cocolait博客原创文章,转载请注明出处,谢谢啦 ^_^

点赞
说说你的看法

所有评论: (6)