可以了解下jQuery组件layer

layui开始使用
Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式

弹出层
如果你使用的是Layui,那么你直接在官网下载layui框架即可,无需引入jQuery和layer.js,但需要引入layui.css和layui.js
基础参数:
layer.open({content: ''})layer.msg('', {time: 3})

type参数:
layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)。
若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

icon - 图标。信息框和加载层的私有参数
类型:Number,默认:-1(信息框)/0(加载层)

信息框默认不显示图标。当你想显示图标时,默认皮肤可以传入0-6如果是加载层,可以传入0-2

demo.html

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>弹出层</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../jquery-3.1.1.min.js"></script>
    <script src="../layui/layui.js"></script>
    <style>
        /*body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
        body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
        body .demo-class .layui-layer-btn a{background:#333;}
        body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}*/
    </style>
</head>
<body>

<button class="layui-btn layui-btn-primary btn1">信息框</button>
<button class="layui-btn layui-btn-primary btn2">页面层</button>
<button class="layui-btn layui-btn-primary btn3">iframe层</button>
<button class="layui-btn layui-btn-primary btn4">加载层</button>
<button class="layui-btn layui-btn-primary btn5">tips层</button>
<button class="layui-btn layui-btn-primary btn6">button6</button>
<button class="layui-btn layui-btn-primary btn7">button7</button>
<button class="layui-btn layui-btn-primary btn8">button8</button>
<button class="layui-btn layui-btn-primary btn9">button9</button>
<button class="layui-btn layui-btn-primary btn10">button10</button>

<br/><br/>

<p>
    type参数:<br />
    0(信息框,默认)1(页面层)2(iframe层)3(加载层)
</p>

<script>
/*加载模块*/
layui.use('layer', function () {
    var layer = layui.layer;

    // 初始化就绪
    layer.ready(function () {
        layer.msg('很高兴一开场就见到你');
    });

    $('.btn1').on('click', function () {
        layer.msg('信息框');
    });
    $('.btn2').on('click', function () {
        layer.open({
            type: 1,
            content: '页面层',
            title: '我是页面层的标题'
        });
    });
    $('.btn3').on('click', function () {
        layer.open({
            type: 2,
            content: 'iframe.html',
            title: 'iframe层',
            area: ['800px', '800px'],
            success: function (layero, index) {
                // 获取iframe页的DOM
                var body = layer.getChildFrame('body', index);
                console.log(body.html()); //得到iframe页的body内容
                body.find('input').val('Hi, 我是从父页来的');
            }
        });
    });
    $('.btn4').on('click', function () {
        layer.open({
            type: 3,
            title: '加载层'
        });

        // 关闭加载层
        setTimeout(function () {
            layer.closeAll('loading');
        }, 2000);
    });
    $('.btn5').on('click', function () {
        layer.tips('默认就是向右的', '.btn5')
    });

    layer.config({
        skin: 'demo-class'
    });

    //图标
    $('.btn6').on('click', function () {
        layer.alert('酷毙了', {icon: 1});
    });

    $('.btn7').on('click', function () {
        layer.alert('不开心。。', {icon: 5});
    });

    $('.btn8').on('click', function () {
        layer.load(1);
    });

    $('.btn9').on('click', function () {
        layer.confirm('纳尼?', {
            btn: ['确认', '取消', '返回'], // 可以无限个按钮
            btn3: function (index, layero) {
                // 按钮三的回调
                console.log('按钮三的回调');
            }
        }, function (index, layero) {
            // 按钮一的回调
            console.log('按钮一的回调');
        }, function (index, layero) {
            // 按钮二的回调
            console.log('按钮二的回调');
        });
    });

    $('.btn10').on('click', function () {
        layer.open({
            content: 'test',
            shade: [0.8, '#393D49'],
            shadeClose: true, // 是否点击遮罩关闭
            shift: 0, // 动画,可选参数:0-6,
            moveType: 1, // 传统的拖拽方式
            btn: ['按钮一', '按钮二', '按钮三'],
            yes: function (index, layero) {
                // 按钮一的回调
                console.log('按钮一的回调');
            },
            btn2: function(index, layero) {
                // 按钮二的回调
                console.log('按钮二的回调');
            },
            btn3: function (index, layero) {
                // 按钮三的回调
                console.log('按钮三的回调');
            },
            cancel: function () {
                // 右上角关闭回调
                console.log('右上角关闭回调');
            }
        });
    });

});

</script>

</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text"/>
<p>这是要内嵌的html页</p>

</body>
</html>

多功能分页
没有详细介绍

流加载
代码demo.html

<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <title>流加载文档</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <script src="../layui/layui.js"></script>
    <style>
        ul#demo li {
            width: 48%;
            height: 100px;
            background: #eeeeee;
            margin: 0 5px 10px 5px;
            float: left;
        }
        ul#demo {
            width: 600px;
            height: 300px;
            overflow: auto;
        }
        #box {
            width: 600px;
            height: 300px;
            overflow: auto;
            margin-top: 50px;
        }
        #box img {
            margin: 0 5px 10px 5px;
        }
    </style>
</head>
<body>
<!--信息流-->
<ul id="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

<p>图片懒加载</p>

<div id="box">
    <img lay-src="//gw1.alicdn.com/bao/uploaded/i1/TB1OniJLXXXXXXzXpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw1.alicdn.com/bao/uploaded/i2/TB1_pszKVXXXXXGXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i3/TB156kaLXXXXXaXXpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i4/TB1jWOKKpXXXXauXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1FUw6NpXXXXb_XFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i3/TB1j7_3KVXXXXanXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw1.alicdn.com/bao/uploaded/i4/TB19vptNXXXXXbEXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1LuytNXXXXXaPaXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw2.alicdn.com/bao/uploaded/i3/TB1IZghJFXXXXbMXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1m4W8LpXXXXb7XpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw2.alicdn.com/bao/uploaded/i3/TB1T2RMKXXXXXcvXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw2.alicdn.com/bao/uploaded/i3/TB1TnPmJVXXXXalXFXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw1.alicdn.com/bao/uploaded/i3/TB1MjpSLVXXXXXzXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw2.alicdn.com/bao/uploaded/i1/TB10rxlNpXXXXb8XpXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i1/TB1Zn4dNXXXXXawXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw2.alicdn.com/bao/uploaded/i4/259002843/TB29jKia8LxQeBjy0FnXXcQwpXa_!!259002843.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i1/TB1U02kNXXXXXcFXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw1.alicdn.com/bao/uploaded/i3/TB157htMpXXXXalXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i1/TB1GJK1LpXXXXaVXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw1.alicdn.com/bao/uploaded/i1/TB1jMaTMVXXXXbJXVXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw2.alicdn.com/bao/uploaded/i4/TB1ewCGMVXXXXXvapXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1QtjVLXXXXXchXXXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
    <img lay-src="//gw3.alicdn.com/bao/uploaded/i2/TB1XkbLMVXXXXaNapXXXXXXXXXX_!!0-item_pic.jpg_250x250.jpg" alt=""/>
</div>

<script>
    layui.use('flow', function () {
        var flow = layui.flow;
        // 信息流
        flow.load({
            elem: '#demo', // 指定列表容器
            done: function (page, next) { // 到达临界点(默认滚动触发),触发下一页
                // console.log('触发下一页');
                var list = [];

                console.log(page);

                for(var i = page; i < 17; i++) {
                    list.push('<li>' + i + '</li>');
                }

                // 执行下一页渲染,如果不存在数据,则告诉flow已经没有更多
                next(list.join(''));

                /**
                 * 从服务器上请求
                 * @type {Array}
                 *
                 var lis = [];
                 //以Ajax请求为例,请求下一页数据(注意:page是从2开始返回)
                 $.getJSON('/api/list?page='+page, function(res){
                    //假设你的列表返回在data集合中
                    layui.each(res.data, function(index, item){
                        lis.push('<li>'+ item.title +'</li>');
                    });
                    //执行下一页渲染,如果不存在数据,则告诉flow已经没有更多
                    next(lis.join(''), res.data.length === 0);
                });
                 */

            }
        });

        // 图片懒加载
        //当你执行这样一个方法时,即对页面中的全部带有lay-src的img元素开启了懒加载(当然你也可以指定相关img)
        flow.lazyimg();

    });
</script>

</body>
</html>

日期选择ui很美

前端框架layui的更多相关文章

  1. 分享一个登录页面(前端框架layui)-20200318

    效果图 对该页面的总结: 1.前端框架layui layui官网:https://www.layui.com/,下载之后,简单配置就可使用 2.layui模块引用与使用的方式 <script&g ...

  2. Java程序员必备后台前端框架--Layui【从入门到实战】(一)

    layui入门使用及图标的使用 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 下载Layui与文件分析 下载直接去官网下载即可 文件分析 下载完成后,解压会 ...

  3. 一套一般般的前端框架 layui

    http://www.layui.com/doc/

  4. Java程序员必备后台前端框架--Layui【从入门到实战】(二)

    layui使用 导航菜单.选项卡 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] [编程工具:IDEA] 导航菜单 在layui官网中示例中,我们可以找到关于导航的例子: 我们点击查 ...

  5. 利用layui前端框架实现对不同文件夹的多文件上传

    利用layui前端框架实现对不同文件夹的多文件上传 问题场景: 普通的input标签实现多文件上传时,只能对同一个文件夹下的多个文件进行上传,如果要同时上传两个或多个文件夹下的文件,是无法实现的.这篇 ...

  6. layui前端框架

    项目中需要弹出层效果,使用了layui前端框架,主要使用了里面的弹出层特效(可以移动) html代码 要给这个标签绑定click方法 <a href='javascript:;' data-me ...

  7. layui前端框架实例(修复官网数据接口异常问题)

    layui前端框架实例,官网的实例会提示数据接口异常,已修复. 主要是修改数据表格,做一个可以用的实例,可以选中,编辑,删除等. gitee地址:https://gitee.com/pingg2019 ...

  8. H5前端框架推荐合集

    Ionic ionic 吧开发流程都帮你做好了,已经不再是单纯的UI框架,而是开发框架了,非常适合快速开发.基于angular2,丰富的UI组件,大大改进的编程模型, Semantic UI 中文官网 ...

  9. 整合X-Admin前端框架改造ABP

    “站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...

随机推荐

  1. centos搭建NFS网络文件系统

    NFS服务器端 安装NFS服务器非常之简单: yum install nfs-utils protmap 这样就安装好了,其中nfs-utils是提供NFS服务器程序和相应的管理工具.protmap是 ...

  2. nil、Nil、NULL和NSNull的区别和联系

    一.nil 我们给对象赋值时一般会使用object = nil,表示我想把这个对象释放掉: 或者对象由于某种原因,经过多次release,于是对象引用计数器为0了,系统将这块内存释放掉,这个时候这个对 ...

  3. Unity(二)生命周期LifetimeManager

    描述:Unity的生命周期是注册的类型对象的生命周期,而Unity默认情况下会自动帮我们维护好这些对象的生命周期,我们也可以显示配置对象的生命周期,Unity将按照配置自动管理. //创建一个Unit ...

  4. 解决 HttpClient 模拟 http 的get 请求后 ,出现 403 错误

    解决方法: URI uri = builder.build(); // 创建http GET请求 HttpGet httpGet = new HttpGet(uri); httpGet.setHead ...

  5. 在ASP.NET中引用自定义提示框

    在html网页中自定义提示框 正文: 在一般的B/S架构中项目,与用户的交互信息是非常重要的.在一般的情况下,设计人员都在把用户信息呈现在html中,用div和span去弹出相关信息.对于一般的情况而 ...

  6. nginx 的基础配置[转]

    nginx 的基础配置 分类: 工具软件2013-11-13 23:26 11人阅读 评论(0) 收藏 举报   目录(?)[-] 管理配置文件 全局配置 虚拟机server配置 location配置 ...

  7. 【转】进程与CPU

    声明:本博客转自:http://blog.chinaunix.net/uid-20737871-id-1881246.html 简单地说,CPU 亲和性(affinity) 就是进程要在某个给定的 C ...

  8. javascript 常用方法

    1. 判断某个object中是否包含某个属性: params.hasOwnProperty($scope.dataObj[i].alias) //true 包含 2.删除object中指定属性 del ...

  9. (转).NET 4.5中使用Task.Run和Parallel.For()实现的C# Winform多线程任务及跨线程更新UI控件综合实例

    http://2sharings.com/2014/net-4-5-task-run-parallel-for-winform-cross-multiple-threads-update-ui-dem ...

  10. select 练习2

    group by :select 分组字段,聚合函数 from 表名 where  条件 group by 分组字段 having 过滤条件 select cno,avg(degree) from s ...