浅谈layer的Icon样式以及一些常用的layer窗口使用方法


Posted in Javascript onSeptember 11, 2019

本文搜集的是本人在实际开发中所用到的layer窗口,未用到的layer按钮,请参考layer官网:http://layer.layui.com/

一、layer的icon样式

浅谈layer的Icon样式以及一些常用的layer窗口使用方法

以上样式测试代码:

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的Icon样式以及一些常用的layer窗口使用方法

自定义样式以及时间,代码如下:

layer.msg('操作成功!', {icon: 6, time: 2000});

icon样式是6,关闭时间为2秒。效果如下:

浅谈layer的Icon样式以及一些常用的layer窗口使用方法

四、弹框(自定义页)

官方案例:

//自定页
layer.open({
 type: 1,
 skin: 'layui-layer-demo', //样式类名
 closeBtn: 0, //不显示关闭按钮
 anim: 2,
 shadeClose: true, //开启遮罩关闭
 content: '内容'
});

效果如下:

浅谈layer的Icon样式以及一些常用的layer窗口使用方法

本人使用案例,使用layer实现弹框登录:

layer.open({ 
   type: 2, 
   title: '用户登录', 
   maxmin: true, 
   skin: 'layui-layer-lan', 
   shadeClose: true, //点击遮罩关闭层 
   area : ['400px' , '280px'], 
   content:'login.html'//弹框显示的url,对应的页面
  });

其中‘login.html'是登录页面,其效果如下:

浅谈layer的Icon样式以及一些常用的layer窗口使用方法

弹框登录案例,请参考本人另外一篇博客:layer实现登录弹框,登录成功以后关闭弹框并调用父窗口的例子

以上就是本人常用的layer案例,以后会继续补充~

这篇浅谈layer的Icon样式以及一些常用的layer窗口使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
js闭包所用的场合以及优缺点分析
Jun 22 Javascript
详解JavaScript的流程控制语句
Nov 30 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
非常漂亮的js烟花效果
Mar 10 Javascript
封装 axios+promise通用请求函数操作
Aug 11 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 #Javascript
JS中封装axios来管控api的2种方式
Sep 11 #Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 #Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 #Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 #Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 #Javascript
layui实现鼠标移动到单元格上显示数据的方法
Sep 11 #Javascript
You might like
10条PHP编程习惯助你找工作
2008/09/29 PHP
php模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
javascript radio 联动效果
2009/03/04 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
javascript回调函数详解
2018/02/06 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
2019/04/02 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
在Vue中使用HOC模式的实现
2020/08/23 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
Python读写Redis数据库操作示例
2014/03/18 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python生成IP段的方法
2015/07/07 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python语言元素知识点详解
2019/05/15 Python
Python 解析pymysql模块操作数据库的方法
2020/02/18 Python
python实现canny边缘检测
2020/09/14 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
Python实现哲学家就餐问题实例代码
2020/11/09 Python
高中英语教学反思
2014/02/04 职场文书
论文评语大全
2014/04/29 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
师德承诺书2015
2015/04/28 职场文书
考试没考好检讨书
2015/05/06 职场文书
php随机生成验证码,php随机生成数字,php随机生成数字加字母!
2021/04/01 PHP
Redis集群的关闭与重启操作
2021/07/07 Redis
在 Python 中利用 Pool 进行多线程
2022/04/24 Python