layer弹框在实际项目中的一些应用

官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。

同时也高居年度最受欢迎的开源项目榜单:2017年度最流行的十大中国开源软件:https://www.jianshu.com/p/d7a76eee56e6

受到如此追捧也是有原因的,使用起来快速方便容易上手,界面美观大方不累赘,看上去很舒服,在项目中用到一部分,也记录下一些常用的功能和属性

项目中常见的一些弹框层,快速使用这个文档,layui 官方总文档:http://layer.layui.com/ 此文档已经不在维护http://layer.layui.com/api.html 新版弹框文档:http://www.layui.com/doc/modules/layer.html 讨论社区:http://fly.layui.com/

以下代码在线调试网址:http://www.layui.com/doc/modules/layer.html

一:弹出到另外一个页面的写法,及其关闭,添加保存之后关闭页面的写法

运用:点击添加按钮,弹出另外一个页面

图片.png

 $("#adduser").on("click", function() {
        
        layer.open({
            type : 2,
            title : '添加标签',
            area : [ '800px', '470px' ],
            fix : false, // �
            content :'useradd.jsp',
            end : function() {
                 
            }
        });
    });

页面点击关闭按钮和添加后保存按钮逻辑代码:

//添加后保存
    var index = parent.layer.getFrameIndex(window.name);
    $("#addBtn").on("click", function() {
        $.ajax({
            url : "xxxxxxxxxx",
            data : {
                loginName : $("#loginName").val(),
                username : $("#username").val(),
                password : $("#password").val(),
                rePassword:$("#rePassword").val(),
                xxxxx : $("#xxxxxxxxxxx option:selected").val(),
            },
            type : "post",
            success : function(data) {
            }
        }); 

    })
    
     $('#close').on('click', function() {
        parent.layer.close(index);
    }) 

二:自定义位置 offset: ['90px', '900px']

类型:String/Array,默认:'auto' 默认垂直水平居中。当你只想定义top时,你可以offset: '100px'。当您top、left都要定义时,你可以offset: ['100px', '200px']。除此之外,你还可以定义offset: 'rb',表示右下角。其它的特殊坐标,你可以自己计算赋值。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>layer弹框属性</title> 
</head> 
<body> 
</body> 
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script  src="layer.js"></script>
<script>
layer.msg('请稍后', {
  icon: 14,
  //shade: 0.01,
  offset: ['90px', '900px']
});
</script>
</html>

三:自定义弹框大小(宽度和高度)

var index= layer.msg('尼玛,打个酱油', {icon: 4});
layer.style(index, {
width: '200px',
height:'200px'
});

四:设置layer.msg弹窗时间

msg弹框自带消失属性,有的用于注册成功之后的提示框几秒后消失,当然如果需要手动设置弹框时间,代码如下:弹出提示信息,4秒后自动消失

<script>
layer.msg('提示信息', 
{time:4000}
);
//1000就是1秒;依次类推;
</script>

五:弹框图标 一览表

图片.png

<script>
layer.msg('图标显示', {
  icon: 14,
  //shade: 0.01,
});
</script>

六:常见例子:加载层和loading层以及更多弹出实例:

图片.png

//加载层
var index = layer.load(0, {shade: false}); //0代表加载的风格,支持0-2

//loading层
var index = layer.load(1, {
  shade: [0.1,'#fff'] //0.1透明度的白色背景
});

更多弹出实例:http://layer.layui.com/test/more.html

图片.png

普通示例:http://layer.layui.com/

图片.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我和我大前端的故事

2018 我所了解的 Vue 知识大全(一)

Vue ,React ,Angular 三大主流框架,最后我选择学习 Vue ,接触过 React ,自己感觉学习曲线有些陡峭,进而我选择了学习 Vue ,他的...

1043
来自专栏开源项目

绝对想尝试的创意 Android 库,你关注了吗?| 码云周刊第 43 期

码云项目推荐 随着 Android 开发走向成熟,每天都会涌现出各种各样与 Android 相关的开发工具,但是我们每天使用的各类库总是不可或缺的。这里,小...

4219
来自专栏王大锤

iOS各种调试技巧豪华套餐

4239
来自专栏葡萄城控件技术团队

对《30个提高Web程序执行效率的好经验》的理解

阅读了IT文章《30个提高Web程序执行效率的好经验》,这30条准则对我们web开发是非常有用的,不过大家可能对其中的一些准则是知其然而不知其所以然。 下面是我...

1945
来自专栏速成应用小程序开发平台

新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌...

2592
来自专栏无原型不设计

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将A...

3295
来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

3491
来自专栏黑泽君的专栏

打造自己的博客园页面

刚接触博客园时,总有一种要定制打造自己博客页面的冲动,后来感觉原有的模板足够了(博客园提供了大量的模板),没有做这项工作。今天不太忙,稍微研究了下博客园的页面定...

2073
来自专栏RESTART POiNTER

Web动态图片合成与分享——html2canvas方案实践

在web侧运营活动中,分享传播是重要的一环。普通的h5链接/结构化消息分享已经不能满足产品越来越大的脑洞。在很多场景下,我们需要将个性化内容(如帐号信息,头像,...

2.3K2
来自专栏jojo的技术小屋

原 荐 svga 动画

作者:汪娇娇 时间:2017年12月26日 对于一些小的简单的动画,借助css、js差不多就能实现,而且还不能保证还原度百分百(还能接受); 对于那些复杂的动画...

8034

扫码关注云+社区

领取腾讯云代金券