zoukankan      html  css  js  c++  java
  • 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

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

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

    5640239-b5135130604f09ba.png
    图片.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, {
     '200px',
    height:'200px'
    });
    

    四:设置layer.msg弹窗时间

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

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

    五:弹框图标 一览表

    5640239-2aa57574718e645c.png
    图片.png
    <script>
    layer.msg('图标显示', {
      icon: 14,
      //shade: 0.01,
    });
    </script>
    

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

    5640239-0b1f7e9ed6f1afa5.png
    图片.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

    5640239-6c3d47fc69c2ed8a.png
    图片.png

    普通示例:http://layer.layui.com/
    5640239-85347538fe9d1b74.png
    图片.png

    欢迎关注!欢迎通过公众号咨询专业问题,我会尽力回复!

  • 相关阅读:
    仿网易菜单 实现侧滑 SlidingMenu
    MD5 Util
    Android 关于SD卡、机身内存以及分辨率的转换的工具类
    android TextView 显示图片,类似于聊天窗口。
    WEB显示(隐藏)系统时间
    I/O复习四 字符流 InputStreamReader/OutputStreamWriter
    Knockout应用开发指南(完整版) 目录索引
    C#设计模式(23种设计模式)
    win7+ubuntu 13.04双系统安装方法
    GeoServer地图开发解决方案
  • 原文地址:https://www.cnblogs.com/wangting888/p/9701852.html
Copyright © 2011-2022 走看看