layui.layer 弹层之美
至今layer仍被视为layui的代表作。他的受众广不是偶然,而是他这几年的坚持和执着。他把那些不屑的目光变成了应得的尊重,不断的完善和维护,不断的建设和推广社区服务,在Web开发者的圈子里口口相传,甚至成为了今天的ui最强的来源。 目前layer已经成为国内使用最广泛的Web层组件,GitHub natural Stars5000+,在官网累计下载量达到50w+。大约有30万个不同规模的web平台使用了layer。
layer.msg(content, options, end) - 提示框
layer.msg(‘提示‘, 2, 1, function(){})
第四个参数:msg关闭后执行的回调
//eg1layer.msg('只想弱弱提示');//eg2layer.msg('有表情地提示', {icon: 6}); //eg3layer.msg('关闭后想做些什么', function(){ //do something}); //eglayer.msg('同上', { icon: 1, time: 2000 //2秒关闭(如果不配置,默认是3秒)}, function(){ //do something});
在贴出代码
1 layer.alert('见到你真的很高兴', {icon: 6});
这是一个最简单的弹出层,可根据icon配置左边的图标
通常情况下,除了弹窗之外我们一般都会有对按钮做回调处理的一些操作
如图:
layer.alert('墨绿风格,点击确认看深蓝', { skin: 'layui-layer-molv' //样式类名 自定义样式 ,closeBtn: 1 // 是否显示关闭按钮 ,anim: 1 //动画类型 ,btn: ['重要','奇葩'] //按钮 ,icon: 6 // icon ,yes:function(){ layer.msg('按钮1') } ,btn2:function(){ layer.msg('按钮2') }});
layer.msg('大部分参数都是可以公用的<br>合理搭配,展示不一样的风格', { time: 2000, //2s后自动关闭 btn: ['明白了', '知道了', '哦'] });
回调的例子:
代码:
layer.msg('也可以这样', { btn: ['明白了', '知道了'] ,yes: function(index, layero){ layer.msg("按钮1回调,参数是:"+index) } ,btn2: function(index, layero){ //按钮【按钮二】的回调 layer.msg("按钮2回调,参数是:"+index) return false //开启该代码可禁止点击该按钮关闭 } });
layer.open({ type: 1 ,title: "open方式弹出层" //不显示标题栏 title : false/标题 ,closeBtn: true ,area: '300px;' ,shade: 0.8 ,id: 'LAY_layuipro' //设定一个id,防止重复弹出 ,resize: false ,btn: ['火速围观', '残忍拒绝'] ,btnAlign: 'c' ,moveType: 1 //拖拽模式,0或者1 ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">内容<br>内容</div>' ,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').attr({ href: 'http://www.layui.com/' ,target: '_blank' }); } });
layer.msg 使用案例一
function setStatus(id){ layer.msg('确认要变更状态吗?',{ time:5000, shade:0.3, btn:['确认','取消'], yes:function() { //执行变更 $.post("{:url('member/setStatus')}",{id:id},function(data){ if(data.code === 1){ layer.msg(data.msg,{time:2000},function(){ if(data.url) location.href = data.url; }); }else{ layer.msg(data.msg,{time:2000}); } }) } }); }