转 layer的Icon样式以及一些常用的layer窗口使用
转载地址:http://blog.csdn.net/beauxie/article/details/60959971
本文搜集的是本人在实际开发中所用到的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实现登录弹框,登录成功以后关闭弹框并调用父窗口方法
转载于:https://www.cnblogs.com/apolloren/p/9647295.html
转 layer的Icon样式以及一些常用的layer窗口使用相关推荐
- jQuery Mobile中图标icon样式大全ui-icon-*
全栈工程师开发手册 (作者:栾鹏) jQuery Mobile 所有class选项 jQuery Mobile中图标icon样式大全 //ui-icon-action 动作 (一般用于页面跳转切换) ...
- 常用的layer弹出层
常用的layer弹出层 1.提示信息 layer.msg("格式不正确") 2.loading加载层 var loading_img = layer.load(1, {shade: ...
- 【最全IDEA个性化教程】idea设置主题+恢复主题默认设置+设置选中代码颜色+关键字颜色+设置字体大小、样式、颜色+设置背景颜色、图片+设置导航栏背景颜色+设置控制台字体样式及背景+常用快捷键)
目录 下载设置主题样式+恢复主题默认设置 1 个性化代码段 1.1设置颜色 设置光标颜色 自定义图片做背景 修改代码段的颜色和背景颜色 选中代码块颜色修改,修改括号颜色 1.2 设置字体大小.格式 1 ...
- layer.tips使用+样式修改
文章目录 使用--鼠标滑过或移开控制tips的显示和隐藏 步1:$('.fujian') ------ 获取需要显示tips的元素 步2: $('.fujian').on() ----- 绑定事件 步 ...
- php layer弹出层更改背景,详解Layer弹出层样式
前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并 ...
- layer之弹层组件文档 layui.layer(v.1.9.0之后)
弹层组件文档 - layui.layer layer 至今仍作为 layui 的代表作,她的受众广泛并非偶然,而是这数年来的坚持.不弃的执念,将那些不屑的眼光转化为应得的尊重,不断完善和维护.不断建设 ...
- layer.open参数;layer.open关闭事件;layer.open关闭刷新;layer.open获取子页的值;layer.open调用子页面的方法
父页面 function layerOpen(){layer.open({type: 2,shade: [0],title: "验收申请",area: ['1024px', '68 ...
- plsql批量注释快捷键_PLSQL常用配置之窗口/版面保存、SQL格式化/美化、SQL注释\去掉注释等快捷键配置、登陆历史修改配置...
http://blog.csdn.net/hyeidolon/article/details/8251791 PLSQL常用配置之窗口/版面保存.SQL格式化/美化.SQL注释\去掉注释等快捷键配置. ...
- layer ui ajax 样式,layerUi与AJAX的一种思路
javascript: function rep(id) { layer.confirm("确定要拒绝此认证吗?", { btn: ["确定", "取 ...
最新文章
- java基础知识点_「Java面试题/知识点精华集」20000+字的Java基础知识篇(2020最新版) !
- 踢毽也能治胃病,适当的运动带来健康,健康带来快乐
- myeclipse6-ejb3入门
- rcp errata
- vc6.0出现无法解析错误
- nav 计算机网络_CTO下载-计算机网络课件(配套韩立刚老师课程).ppt
- 网页游戏怎么修改数据_一周网页游戏数据报告(7.14-7.20)
- 图示机器学习(part1)--机器学习与应用
- ORACLE数据加载加本,使用oracle sqlldr加载数据
- 病毒侵袭(HDU-2896)
- Ubuntu 16.04直接升级至20.04 (Upgrade from 16.04 to 20.04 directly)
- 客户流失预警模型怎么做?
- Android平台下基于XMPP的IM研究
- linux内核中获取虚拟地址api,Linux内核-系统调用
- JAR运行出现ClassNotFoundException异常的解决办法
- 深夜不睡的我爬取一下美女照片!!!哈哈!!来吧,刺激磁刺激!!!
- QDir setSorting 文件排序
- java程序模拟QQ空间登录 - 并模拟刷说说的赞
- 上海科技大学计算机夏令营随笔
- 【PyTorch】6.1 正则化之weight_decay