浅谈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窗口使用方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 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的build生命周期和常用plugin

    简介 Maven为我们封装了很多构建中非常有用的操作,我们只需要执行简单的几个mvn命令即可. 今天我们要讨论一下mvn命令之下的生命周期的构建. lifecycle和Phases 所谓lifecycle,可以理解为可以执行一组命令的集合,用来执行具体的某些操作. Maven默认有三种lifecycle:default,clean和site.default主要用来处理项目的开发,clean主要用来负责项目的清理,site主要用来生成项目的文档. lifecycle是由一个或者多个phase组成的

  • 浅谈Java中浮点型数据保留两位小数的四种方法

    浅谈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 同构之样式直出

    浅谈react 同构之样式直出

    前言 上文讲到通过同构服务端渲染,可以直出html结构,虽然讲解了样式,图片等静态资源在服务端引入问题的解决方案,但是并没有实际进行相关操作,这篇文章就讲解一下如何让样式像html一样直出. PS: 直出,我的理解就是输入url发起get请求访问服务端,直接得到完整响应结果,而不是同过ajax异步去获取. React 同构的关键要素 完善的 Compponent 属性及生命周期与客户端的 render 时机是 React 同构的关键. DOM 的一致性 在前后端渲染相同的 Compponent,

随机推荐