浅谈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窗口使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
layer.open关闭父窗口 以及调用父页面的方法
实例如下: //调用父类方法 window.parent.exportData($('#shownum').val(),$('#splitstr').val()); //关闭iframe页面 var index = parent.layer.getFrameIndex(window.name); //获取窗口索引 parent.layer.close(index); //父类方法 function exportData(shownum,splitstr){ //TODO } 以上这篇layer.
-
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
layer是一款近年来备受青睐的web弹层组件,官网地址是:http://layer.layui.com/ 可以从官网上下载最新版本. 使用layer实现登录弹框,登录成功以后关闭弹框,并调用父窗口方法. 1.界面如下: 2.login.html的界面主要代码: <div class="layer_form"> <div class="form_item"> <label>手机号码:</label> <div c
-
layer关闭当前窗口页面以及确认取消按钮的方法
如下所示: function demo() { layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ var index = parent.layer.getFrameIndex(window.name); parent.layer.close(index);//关闭当前页 layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('也可以这样', { time
-
对layer弹出框中icon数字参数的说明介绍
前言 icon参数为0,如下代码: layer.msg('请选择要编辑的机构', {icon: 0}); 运行结果如图: icon参数为1,如下图 icon参数为2,如下图: icon参数为3,如下图: icon参数为4,如下图: icon参数为5,如下图: icon参数为6,如下图: icon参数为7,如下图: 2. 确认框示例 //锁定机构 function lockOrg(){ var row = orgDataGrid.datagrid('getSelected'); if(row){
-
解决layer图标icon不加载的问题
之前在项目中使用layer弹框感觉体验很好,这次的项目中就引入了,但是引入之后,弹出层如下图: 代码: layer.msg("密码不正确!", {icon:5,time:1000}); 并没有显示出图标! F12查看才发现如下报错: http://127.0.0.1:8020/xxx/js/theme/default/layer.css?v=3.1.1 net::ERR_ABORTED layer.js 于是找到 layer.js,搜索 layer.css ,会搜索到两处地方,修改第二
-
浅谈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
-
浅谈mybatis中的#和$的区别 以及防止sql注入的方法
mybatis中的#和$的区别 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111,那么解析成sql时的值为order by "111", 如果传入的值是id,则解析成的sql为order by "id". 2. $将传入的数据直接显示生成在sql中.如:order by $user_id$,如果传入的值是111,那么解析成sql时的值为order by user_id, 如果传入的
-
浅谈python socket函数中,send与sendall的区别与使用方法
在python socket编程中,有两个发送TCP的函数,send()与sendall(),区别如下: socket.send(string[, flags]) 发送TCP数据,返回发送的字节大小.这个字节长度可能少于实际要发送的数据的长度.换句话说,这个函数执行一次,并不一定能发送完给定的数据,可能需要重复多次才能发送完成. 例子: data = "something you want to send" while True: len = s.send(data[len:]) if
-
浅谈MUI框架中加载外部网页或服务器数据的方法
我们很多同学在实施使用MUI框架的时候,在打开新的页面的时候常使用的方式是:mui.openwindow的方法,然而遇到网页需要从服务器或者是要嵌套外部的网页的时候,由于网速的问题会遇到加载时出现白屏,等待时间过长,导致用户体验不好. 页面加载的时候使用plus.webview.create方法就很好的解决了这个问题. 废话不多说直接贴代码 首先我们需要在创建一个父页面,以下是父页面的JS // H5 plus事件处理 function plusReady(){ var nwaiting = p
-
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
1,心血来潮,把ThinkPHP项目部署到了nginx上,以上是在apache上跑的.突然发现nginx不支持pathinfo功能,难怪在TP中调怎么都没管用. 2,开始上文件了,比网上其他一些杂的好多了: server { listen 80; #listen [::]:80; server_name www.tp.com tp.com; index index.html index.htm index.php default.html default.htm default.php; roo
-
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
1.AttributeError: 'module' object has no attribute 'rnn_cell' S:将tf.nn.rnn_cell替换为tf.contrib.rnn 2.TypeError: Expected int32, got list containing Tensors of type '_Message' instead. S:由于tf.concat的问题,将tf.concat(1, [conv1, conv2]) 的格式替换为tf.concat( [con
-
浅谈Maven的build生命周期和常用plugin
简介 Maven为我们封装了很多构建中非常有用的操作,我们只需要执行简单的几个mvn命令即可. 今天我们要讨论一下mvn命令之下的生命周期的构建. lifecycle和Phases 所谓lifecycle,可以理解为可以执行一组命令的集合,用来执行具体的某些操作. Maven默认有三种lifecycle:default,clean和site.default主要用来处理项目的开发,clean主要用来负责项目的清理,site主要用来生成项目的文档. lifecycle是由一个或者多个phase组成的
-
浅谈Java中浮点型数据保留两位小数的四种方法
目录 一.String类的方式 二.DecimalFormat类 三.BigDecimal类进行数据处理 四.NumberFormat类进行数据处理 总结一下 今天在进行开发的过程中遇到了一个小问题,是关于如何将double类型的数据保留两位小数.突然发现这方面有一点欠缺,就来总结一下. 一.String类的方式 该方式是是使用String的format()方法来实现的,该方法的作用就是规范数据的格式,第一个参数传入一个字符串来表示输出的数据格式,如保留两位小数就使用"%.2f",第二
-
浅谈document.write()输出样式
js中的最基本的命令之一:document.write(),用于简单的打印内容到页面上,可以逐字打印你需要的内容--document.write("content"),这里content就是需要输出的内容:当然还有一种情况,需要输出JS之中比如变量等等变化的东西,那么就需要用document.write(+variable);当然variable就是你想要输出的变量. 既然可以输出变量,肯定会想要去控制下变量的显示,比如位置以及样式.第一种控制方法是应用内部添加样式的方法,比如 复制代
-
浅谈react 同构之样式直出
前言 上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作,这篇文章就讲解一下如何让样式像html一样直出. PS: 直出,我的理解就是输入url发起get请求访问服务端,直接得到完整响应结果,而不是同过ajax异步去获取. React 同构的关键要素 完善的 Compponent 属性及生命周期与客户端的 render 时机是 React 同构的关键. DOM 的一致性 在前后端渲染相同的 Compponent,
随机推荐
- iOS获取当前时间和当前时间戳的方法
- java 多态性详解及简单实例
- 用Python编写一个简单的FUSE文件系统的教程
- ThinkPHP采用原生query实现关联查询left join实例
- Python自定义scrapy中间模块避免重复采集的方法
- ASP基础入门第六篇(ASP内建对象Request)
- 深入理解大数与高精度数的处理问题
- JavaScript操作Cookie详解
- Python素数检测的方法
- ckeditor的使用和配置方法分享
- 整理的40个有用的jQuery技术和教程
- Asp Conn.execute的参数与返回值总结
- JS在textarea光标处插入文本的小例子
- php读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
- IE下支持文本框和密码框placeholder效果的JQuery插件分享
- IE innerHTML,outerHTML所引起的问题
- CentOS 7.2安装Nginx 1.10.2的详细教程
- 详解Android App中的AsyncTask异步任务执行方式
- iOS开发中文件的上传和下载功能的基本实现
- Android中的RecyclerView新组件初步上手指南