投稿
  1. 极客之音首页
  2. 后端漫谈

layui的使用—秘诀ctrl+c/v

seven_ • • 后端漫谈 • 阅读 204

导读：本篇文章讲解 layui的使用—秘诀ctrl+c/v，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

layui的使用

代码整体布局：

在上篇代码的基础上增加了layui内容：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

layui案例：

Layui官网：https://layuion.com/docs/

lay1.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/8
  Time: 19:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>

    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer;
            var form = layui.form;

            layer.msg('Hello World');
        });
    </script>
</body>
</html>

在这里插入图片描述

lay2.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/8
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/css/layui.css">
</head>
<body>
    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">标题一</li>
            <li>标题二</li>
            <li>标题三</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">内容1</div>
            <div class="layui-tab-item">内容2</div>
            <div class="layui-tab-item">内容3</div>
        </div>
    </div>

    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/layui.js"></script>
    <script>
        layui.use(['layer', 'form'], function(){
            var layer = layui.layer
                ,form = layui.form;

            layer.msg('Hello World 222222');
        });
    </script>


</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

lay3.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/8
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/css/layui.css">
    <style type="text/css">
        .layui-container div{
            background-color: yellow;
            border: 2px solid red;
        }
    </style>
</head>
<body>

    <div class="layui-container">
        常规布局（以中型屏幕桌面为例）：
        <div class="layui-row">
            <div class="layui-col-md9">
                你的内容 9/12
            </div>
            <div class="layui-col-md3">
                你的内容 3/12
            </div>
        </div>

        移动设备、平板、桌面端的不同表现：
        <div class="layui-row">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                移动：6/12 | 平板：6/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
                移动：6/12 | 平板：6/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm12 layui-col-md4">
                移动：4/12 | 平板：12/12 | 桌面：4/12
            </div>
            <div class="layui-col-xs4 layui-col-sm7 layui-col-md8">
                移动：4/12 | 平板：7/12 | 桌面：8/12
            </div>
            <div class="layui-col-xs4 layui-col-sm5 layui-col-md4">
                移动：4/12 | 平板：5/12 | 桌面：4/12
            </div>
        </div>
    </div>

    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/layui.js"></script>



</body>
</html>

在这里插入图片描述

lay4.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/8
  Time: 19:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 layui</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/css/layui.css">
</head>
<body>
<%--    <input type="text" class="layui-input" id="test1">--%>
    <button type="button" class="layui-btn layui-btn-primary" id="mybtn">测试</button>
    <input type="text" name="mydate" id="mydate"/>


    <!-- 引入 layui.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/layui.js"></script>

    <script>
        // //layui引入组件
        // layui.use('laydate', function(){
        //     var laydate = layui.laydate;
        //
        //     //执行一个laydate实例
        //     laydate.render({
        //         elem: '#test1' //指定元素
        //     });
        // });

        layui.use(['layer','laydate'],function (){
            var layer=layui.layer,
                laydate=layui.laydate,
                $=layui.$;

            layer.msg("这是提示消息",{icon: 5});

            //渲染日期框
            laydate.render({
                //elem:渲染的目标元素
                elem:"#mydate"
            })

            //用$获取按钮绑定单击事件
            $("#mybtn").click(function (){
                //弹窗
                layer.alert("你好",{icon:6});
            })
        });


    </script>

</body>
</html>

在这里插入图片描述
点击测试,弹出信息：
在这里插入图片描述

lay5.jsp:

myuser.json:

{"code":0,"msg":"","count":1000,"data":[{"id":10000,"username":"user-0","sex":"女","city":"城市-0","sign":"签名-0","experience":255,"logins":24,"wealth":82830700,"classify":"作家","score":57},{"id":10001,"username":"user-1","sex":"男","city":"城市-1","sign":"签名-1","experience":884,"logins":58,"wealth":64928690,"classify":"词人","score":27},{"id":10002,"username":"user-2","sex":"女","city":"城市-2","sign":"签名-2","experience":650,"logins":77,"wealth":6298078,"classify":"酱油","score":31},{"id":10003,"username":"user-3","sex":"女","city":"城市-3","sign":"签名-3","experience":362,"logins":157,"wealth":37117017,"classify":"诗人","score":68},{"id":10004,"username":"user-4","sex":"男","city":"城市-4","sign":"签名-4","experience":807,"logins":51,"wealth":76263262,"classify":"作家","score":6},{"id":10005,"username":"user-5","sex":"女","city":"城市-5","sign":"签名-5","experience":173,"logins":68,"wealth":60344147,"classify":"作家","score":87},{"id":10006,"username":"user-6","sex":"女","city":"城市-6","sign":"签名-6","experience":982,"logins":37,"wealth":57768166,"classify":"作家","score":34},{"id":10007,"username":"user-7","sex":"男","city":"城市-7","sign":"签名-7","experience":727,"logins":150,"wealth":82030578,"classify":"作家","score":28},{"id":10008,"username":"user-8","sex":"男","city":"城市-8","sign":"签名-8","experience":951,"logins":133,"wealth":16503371,"classify":"词人","score":14},{"id":10009,"username":"user-9","sex":"女","city":"城市-9","sign":"签名-9","experience":484,"logins":25,"wealth":86801934,"classify":"词人","score":75},{"id":10010,"username":"user-10","sex":"女","city":"城市-10","sign":"签名-10","experience":1016,"logins":182,"wealth":71294671,"classify":"诗人","score":34},{"id":10011,"username":"user-11","sex":"女","city":"城市-11","sign":"签名-11","experience":492,"logins":107,"wealth":8062783,"classify":"诗人","score":6},{"id":10012,"username":"user-12","sex":"女","city":"城市-12","sign":"签名-12","experience":106,"logins":176,"wealth":42622704,"classify":"词人","score":54},{"id":10013,"username":"user-13","sex":"男","city":"城市-13","sign":"签名-13","experience":1047,"logins":94,"wealth":59508583,"classify":"诗人","score":63},{"id":10014,"username":"user-14","sex":"男","city":"城市-14","sign":"签名-14","experience":873,"logins":116,"wealth":72549912,"classify":"词人","score":8},{"id":10015,"username":"user-15","sex":"女","city":"城市-15","sign":"签名-15","experience":1068,"logins":27,"wealth":52737025,"classify":"作家","score":28},{"id":10016,"username":"user-16","sex":"女","city":"城市-16","sign":"签名-16","experience":862,"logins":168,"wealth":37069775,"classify":"酱油","score":86},{"id":10017,"username":"user-17","sex":"女","city":"城市-17","sign":"签名-17","experience":1060,"logins":187,"wealth":66099525,"classify":"作家","score":69},{"id":10018,"username":"user-18","sex":"女","city":"城市-18","sign":"签名-18","experience":866,"logins":88,"wealth":81722326,"classify":"词人","score":74},{"id":10019,"username":"user-19","sex":"女","city":"城市-19","sign":"签名-19","experience":682,"logins":106,"wealth":68647362,"classify":"词人","score":51}]}

lay5.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/8
  Time: 19:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>开始使用 layui</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/css/layui.css">
</head>
<body>

    <table id="test"></table>

    <!-- 引入 layui.js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/layui.js"></script>

    <script>
        layui.use('table', function(){
            var table = layui.table;

            //渲染表格数据
            table.render({
                elem: '#test' //渲染的目标元素
                ,url: '${pageContext.request.contextPath}/assets/data/myuser.json' //发送请求获取数据
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,page:true //启用分页
                ,cols: [[  //表格列的定义
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'username', width:80, title: '用户名'}
                    ,{field:'sex', width:80, title: '性别', sort: true,templet:function (d){
                            console.log(d);
                            if(d.sex=="男")
                                return "<font color='blue'>男</font>";
                            else
                                return "<font color='red'>女</font>";
                        }}
                    ,{field:'city', width:80, title: '城市'}
                    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'experience', title: '积分', sort: true}
                    ,{field:'score', title: '评分', sort: true}
                    ,{field:'classify', title: '职业'}
                    ,{field:'wealth', width:137, title: '财富', sort: true}
                ]]
            });
        });
    </script>

</body>
</html>

在这里插入图片描述

lay6.jsp: (待补充：见下篇)

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/9
  Time: 8:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/css/layui.css">
</head>
<body>

<!--要渲染的数据表格-->
<table id="stu"></table>

<!--弹出表单-->


<!-- 引入 layui.js -->
<script type="text/javascript" src="${pageContext.request.contextPath}/assets/plugins/layui-v2.6.8/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        //渲染表格数据
        table.render({
            elem: '#stu' //渲染的目标元素
            ,url: '${pageContext.request.contextPath}/StudentServlet/queryForLayUI' //发送请求获取数据
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,page:true //启用分页
            ,cols: [[  //表格列的定义
                {field:'studentId', width:80, title: '学号', sort: true}
                ,{field:'name', width:80, title: '姓名'}
                ,{field:'sex', width:80, title: '性别', sort: true,templet:function (d){
                        console.log(d);
                        if(d.sex=="男")
                            return "<font color='blue'>男</font>";
                        else
                            return "<font color='red'>女</font>";
                    }}
                ,{field:'province', width:80, title: '省份'}
                ,{field:'birthday', title: '生日', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                ,{field:'classId', title: '班级编号', hidden:true}
                ,{field:'className', title: '班级名字', sort: true}
            ]]
        });
    });
</script>
</body>
</html>

在这里插入图片描述

lay7.jsp:

<%--
  Created by IntelliJ IDEA.
  User: 33154
  Date: 2022/8/9
  Time: 16:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>layout 管理系统大布局 - Layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">layout demo</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>

            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">nav groups</a>
                <dl class="layui-nav-child">
                    <dd><a href="">menu 11</a></dd>
                    <dd><a href="">menu 22</a></dd>
                    <dd><a href="">menu 33</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">Your Profile</a></dd>
                    <dd><a href="">Settings</a></dd>
                    <dd><a href="">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">menu group 1</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">menu 1</a></dd>
                        <dd><a href="javascript:;">menu 2</a></dd>
                        <dd><a href="javascript:;">menu 3</a></dd>
                        <dd><a href="">the links</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;">menu group 2</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">list 1</a></dd>
                        <dd><a href="javascript:;">list 2</a></dd>
                        <dd><a href="">超链接</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
                <li class="layui-nav-item"><a href="">the links</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>
<!-- 引入 layui.js -->
<script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });

    });
</script>
</body>
</html>

在这里插入图片描述

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

// A code block
var foo = 'bar';

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118066.html

赞 (0)
seven_的头像seven_bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！