浅谈layer的Icon样式以及一些常用的layer窗口使用方法
更新时间：2019年09月11日 10:02:30 作者：Beauxie
今天小编就为大家分享一篇浅谈layer的Icon样式以及一些常用的layer窗口使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
本文搜集的是本人在实际开发中所用到的layer窗口，未用到的layer按钮，请参考layer官网：http://layer.layui.com/
一、layer的icon样式
以上样式测试代码：
layer.confirm('icon测试', {icon: 1, title:'提示'}, function(index){
//do something
alert("确认");
layer.close(index);
});
二、询问框
官方案例：
//询问框
layer.confirm('您是如何看待前端开发？', {
btn: ['重要','奇葩'] //按钮
}, function(){
layer.msg('的确很重要', {icon: 1});
}, function(){
layer.msg('也可以这样', {
time: 20000, //20s后自动关闭
btn: ['明白了', '知道了']
});
});
本人所用到，需要修改标题，正如以上测试样式时的代码一样，实现自定义标题：
var message = "确定继续？";
//询问框
layer.confirm(message, {icon: 3, title:'信息提示'}, function(index){
//submitForm();
layer.close(index);
});
三、提示层
官方案例：
//提示层
layer.msg('玩命提示中');
默认关闭时间是3秒，效果如下（背景是官网的广告，实际效果是黑色半透明）：
自定义样式以及时间，代码如下：
layer.msg('操作成功!', {icon: 6, time: 2000});
icon样式是6，关闭时间为2秒。效果如下：
四、弹框（自定义页）
官方案例：
//自定页
layer.open({
type: 1,
skin: 'layui-layer-demo', //样式类名
closeBtn: 0, //不显示关闭按钮
anim: 2,
shadeClose: true, //开启遮罩关闭
content: '内容'
});
效果如下：
本人使用案例，使用layer实现弹框登录：
layer.open({
type: 2,
title: '用户登录',
maxmin: true,
skin: 'layui-layer-lan',
shadeClose: true, //点击遮罩关闭层
area : ['400px' , '280px'],
content:'login.html'//弹框显示的url,对应的页面
});
其中‘login.html'是登录页面,其效果如下：
弹框登录案例，请参考本人另外一篇博客：layer实现登录弹框，登录成功以后关闭弹框并调用父窗口的例子
以上就是本人常用的layer案例，以后会继续补充~
这篇浅谈layer的Icon样式以及一些常用的layer窗口使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了微信小程序实现bindtap等事件传参，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
这篇文章主要为大家详细介绍了微信小程序实现弹球游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
这篇文章主要介绍了基于JavaScript实现一个简单的Vue的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
在js中判断checkboxlist(.net控件客户端id)是否有选中
添加或修改内容时，需要对关键数据进行判空处理，checkboxlist是否有选择项如何使用js判断实现，接下来为大家详细介绍下实现方法，感兴趣的朋友可以参考下哈2013-04-04
下面小编就为大家分享一篇mui back 返回刷新页面的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
现在说瀑布流式布局似乎有点晚了，但是每一项技术都是向着“精”和“简”的方向在不断发展，在发展到极致之前，需要一个相当漫长的过程，因此，从这个角度来说，当瀑布流被应用得越来越多的时候，反而更应该讨论它，讨论如何将它改善2013-11-11
这篇文章主要介绍了微信小程序实现的动态设置导航栏标题功能,结合实例形式分析了微信小程序使用wx.setNavigationBarTitle接口动态设置导航栏标题的相关操作技巧,需要的朋友可以参考下2019-01-01
2007-12-12
这篇文章主要介绍了微信小程序如何访问公众号文章，随着小程序不断的发展，现在个人的小程序也开放了很多功能了，个人小程序直接打开公众号链接。在群里看到的一款小程序，点击可以直接阅读文章了,需要的朋友可以参考下2019-07-07
下面小编就为大家带来一篇js防阻塞加载的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
最新评论