layui的简单使用

最新推荐文章于 2024-03-25 09:58:11 发布
最新推荐文章于 2024-03-25 09:58:11 发布
阅读量895 收藏 1
点赞数
文章标签： layui css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo381821/article/details/119272850
版权

admin.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>STC电子流平台对接演示</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">STC电子流客户端</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="">首页</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">荣耀</a></li>
            <li class="layui-nav-item layui-hide-xs"><a href="">华为</a></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="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic2%2Fcover%2F00%2F31%2F67%2F5810c4460e1ca_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1630287917&t=11100ee7057ea4caf78a21bcd42931ea" class="layui-nav-img">
                    罗运永
                </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-this"><a href="javascript:;" url="submit.html">表单提交</a></li>
                <li class="layui-nav-item"><a href="javascript:;" url="view.html">查看待办</a></li>
                <li class="layui-nav-item"><a href="javascript:;" url="viewed.html">查看已办</a></li>
                <li class="layui-nav-item"><a href="javascript:;" url="trace.html">流程跟踪</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="submit.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%; border-radius: 2px;"></iframe>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        XXXXX ©2021 Huaweicloud.com 版权所有 苏ICP备17040376号-32 苏B2-20130048号
    </div>
</div>
<script src="./layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'jquery'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,$ = layui.jquery
            ,mainBody = $(".layui-body");

        //菜单点击事件
        $("li a[url]").click(function () {
            mainBody.empty();
            mainBody.append('<iframe src="'+$(this).attr('url')+'" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%; border-radius: 2px;"></iframe>');
        })

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

submit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .layui-form-label {
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        .layui-form-mid {
            padding: 5px 0!important;
        }
        .layui-form-item .layui-input-inline {
             width: 400px;
        }
    </style>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>表单提交演示</legend>
</fieldset>

<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人名称</label>
        <div class="layui-input-block">
            <input type="text" name="candidateName" autocomplete="off" placeholder="请输入名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人身份证号</label>
        <div class="layui-input-block">
            <input type="text" name="candidateIDNumber" autocomplete="off" placeholder="请输入身份证号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人手机号</label>
        <div class="layui-input-block">
            <input type="text" name="candidatePhone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人Email</label>
        <div class="layui-input-block">
            <input type="text" name="candidateEmail" autocomplete="off" placeholder="请输入Email" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">审批人</label>
        <div class="layui-input-inline">
            <input type="text" name="auditUser" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button type="button" class="layui-btn layui-btn-sm">查询</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">审批组织</label>
        <div class="layui-input-inline">
            <input type="text" name="auditOrg" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button type="button" class="layui-btn layui-btn-sm">查询</button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</div>

<script src="./layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function() {
        var form = layui.form
            ,$ = layui.jquery
            , layer = layui.layer;

        //监听提交
        form.on('submit(demo1)', function(data){
            var param = data.field;
            $.ajax({
                url: 'fwqfgwq',
                type: 'POST',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(param),
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    console.log(res)
                    layer.alert("提交成功", {icon: 1});
                },
                error: function (xhr) {
                    layer.alert("提交失败："+xhr.status, {icon: 2});
                }
            });

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

resubmit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重新表单提交</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .layui-form-label {
            width: 100px;
        }
        .layui-input-block {
            margin-left: 130px;
        }
        .layui-form-mid {
            padding: 5px 0!important;
        }
        .layui-form-item .layui-input-inline {
             width: 400px;
        }
    </style>
</head>
<body style="padding-top: 30px;">
<div class="layui-form" lay-filter="OrderForm">
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人名称</label>
        <div class="layui-input-block">
            <input type="text" name="candidateName" autocomplete="off" placeholder="请输入名称" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人身份证号</label>
        <div class="layui-input-block">
            <input type="text" name="candidateIDNumber" autocomplete="off" placeholder="请输入身份证号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人手机号</label>
        <div class="layui-input-block">
            <input type="text" name="candidatePhone" autocomplete="off" placeholder="请输入手机号" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">应聘人Email</label>
        <div class="layui-input-block">
            <input type="text" name="candidateEmail" autocomplete="off" placeholder="请输入Email" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">审批人</label>
        <div class="layui-input-inline">
            <input type="text" name="auditUser" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button type="button" class="layui-btn layui-btn-sm">查询</button>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">审批组织</label>
        <div class="layui-input-inline">
            <input type="text" name="auditOrg" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button type="button" class="layui-btn layui-btn-sm">查询</button>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">重新提交</button>
        </div>
    </div>
</div>

<script src="./layui/layui.js"></script>
<script>
    layui.use(['form', 'layer', 'jquery'], function() {
        var form = layui.form
            ,$ = layui.jquery
            , layer = layui.layer
            ,currentIndex = parent.layer.getFrameIndex(window.name);

        var obj = parent.cData;
        form.val("OrderForm", {
            "candidateName":obj.candidateName,
            "candidateEmail":obj.candidateEmail
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            var param = data.field;
            console.log(param)
            $.ajax({
                url: 'fwqfgwq',
                type: 'POST',
                contentType: "application/json;charset=utf-8",
                data: JSON.stringify(param),
                beforeSend: function () {
                    layer.load(2);
                },
                complete: function () {
                    layer.closeAll('loading');
                },
                success: function (res) {
                    console.log(res)
                    layer.alert("提交成功", {icon: 1});
                    parent.layer.close(currentIndex);
                },
                error: function (xhr) {
                    layer.alert("提交失败："+xhr.status, {icon: 2});
                }
            });

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

view.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看待办</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .layui-form-mid {
            padding: 0 0!important;
        }
        .layui-form-item .layui-input-inline {
            width: 400px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查看待办演示</legend>
</fieldset>
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">待办人</label>
        <div class="layui-input-inline">
            <input type="text" name="auditUser" placeholder="你要查哪个人的待办就输入哪个" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button id="query" type="button" class="layui-btn">查询</button>
        </div>
    </div>
    <div style="padding: 0 30px;">
        <table class="layui-hide" id="demo" lay-filter="test"></table>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">撤销</a>
</script>

<script src="./layui/layui.js"></script>
<script>
    var cData = {};
    layui.use(['table','jquery','layer'], function(){
        var table = layui.table
            ,layer = layui.layer
            ,$ = layui.jquery
        //展示已知数据
        table.render({
            elem: '#demo',
            id:'demo'
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'candidateName', title: '用户名', width: 120}
                ,{field: 'candidateEmail', title: '邮箱', minWidth: 150}
                ,{field: 'sign', title: '签名', minWidth: 160}
                ,{field: 'sex', title: '性别', width: 80}
                ,{field: 'city', title: '城市', width: 100}
                ,{field: 'experience', title: '积分', width: 80, sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
            ]]
            ,data:[]
        });
        //工具栏事件
        table.on('tool(test)', function(obj){
            switch(obj.event){
                case 'edit':
                    cData = obj.data;
                    layer.open({
                        title: '修改表单',
                        type: 2,
                        area: ['1051px', '591px'],
                        fixed: false, //不固定
                        maxmin: true,
                        content: "resubmit.html"
                    });

                    break;
                case 'del':
                    layer.msg('删掉了：'+ JSON.stringify(obj.data));
                    break;
            };
        });
        
        var data = [{
            "id": "10001"
            ,"candidateName": "杜甫"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "116"
            ,"ip": "192.168.0.8"
            ,"logins": "108"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10002"
            ,"candidateName": "李白"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "12"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
            ,"LAY_CHECKED": true
        }, {
            "id": "10003"
            ,"candidateName": "王勃"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "65"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10004"
            ,"candidateName": "贤心"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "666"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10005"
            ,"candidateName": "贤心"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "86"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10006"
            ,"candidateName": "贤心"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "12"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10007"
            ,"candidateName": "贤心"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "16"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10008"
            ,"candidateName": "贤心"
            ,"candidateEmail": "test@candidateEmail.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "106"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }];
        
        $("#query").click(function () {
            table.reload('demo', {
                data:data
            })
        });
    });
</script>
</body>
</html>

viewed.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看已办</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        .layui-form-mid {
            padding: 0 0!important;
        }
        .layui-form-item .layui-input-inline {
            width: 400px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查看已办演示</legend>
</fieldset>
<div class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">待办人</label>
        <div class="layui-input-inline">
            <input type="text" name="auditUser" placeholder="你要查哪个人的待办就输入哪个" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
            <button id="query" type="button" class="layui-btn">查询</button>
        </div>
    </div>
    <div style="padding: 0 30px;">
        <table class="layui-hide" id="demo"></table>
    </div>
</div>

<script src="./layui/layui.js"></script>
<script>
    layui.use(['table','jquery','layer'], function(){
        var table = layui.table
            ,layer = layui.layer
            ,$ = layui.jquery
        //展示已知数据
        table.render({
            elem: '#demo',
            id:'demo'
            ,cols: [[ //标题栏
                {field: 'id', title: 'ID', width: 80, sort: true}
                ,{field: 'username', title: '用户名', width: 120}
                ,{field: 'email', title: '邮箱', minWidth: 150}
                ,{field: 'sign', title: '签名', minWidth: 160}
                ,{field: 'sex', title: '性别', width: 80}
                ,{field: 'city', title: '城市', width: 100}
                ,{field: 'experience', title: '积分', width: 80, sort: true}
            ]]
            ,data:[]
        });

        var data = [{
            "id": "10001"
            ,"username": "杜甫"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "116"
            ,"ip": "192.168.0.8"
            ,"logins": "108"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10002"
            ,"username": "李白"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "12"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
            ,"LAY_CHECKED": true
        }, {
            "id": "10003"
            ,"username": "王勃"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "65"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10004"
            ,"username": "贤心"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "666"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10005"
            ,"username": "贤心"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "86"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10006"
            ,"username": "贤心"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "12"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10007"
            ,"username": "贤心"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "16"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }, {
            "id": "10008"
            ,"username": "贤心"
            ,"email": "test@email.com"
            ,"sex": "男"
            ,"city": "浙江杭州"
            ,"sign": "人生恰似一场修行"
            ,"experience": "106"
            ,"ip": "192.168.0.8"
            ,"logins": "106"
            ,"joinTime": "2016-10-14"
        }];

        $("#query").click(function () {
            table.reload('demo', {
                data:data
            })
        });
    });
</script>
</body>
</html>

trace.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>流程跟踪</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>流程跟踪</legend>
</fieldset>

<ul class="layui-timeline" style="padding-left: 25px;">
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月18日</h3>
            <p>
                layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
            </p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis" style="color: red"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月16日</h3>
            <p>杜甫的思想核心是儒家的仁政思想，他有<em>“致君尧舜上，再使风俗淳”</em>的宏伟抱负。个人最爱的名篇有：</p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">8月15日</h3>
            <p>
                中国人民抗日战争胜利日
                <br>铭记、感恩
            </p>
        </div>
    </li>
    <li class="layui-timeline-item">
        <i class="layui-icon layui-timeline-axis"></i>
        <div class="layui-timeline-content layui-text">
            <div class="layui-timeline-title">过去</div>
        </div>
    </li>
</ul>
<script src="./layui/layui.js"></script>
<script>
    layui.use(['form', 'layer'], function() {
        var form = layui.form
            , layer = layui.layer;
    })
</script>
</body>
</html>

luo381821
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui 打开弹出层追加自定义class设置样式
onlylele的博客
09-12 7646
js:判断处理打开弹框操作 if(layEvent === 'topay'){ //去付款 getpayAccount();//加载支付账户内容； $("#purchase_total").text(data.total_fee);//应付总额 $("#purchase_paied").text(d...
layUI基本使用——基本元素
BUG专业户
04-19 1279
layui基本使用----- 基本元素 (按钮,导航,选项卡,表格,表单)
layui遇到的一些问题
最新发布
Benxiaohai_311的博客
03-25 1479
1、layui nav 菜单栏默认收缩 默认收缩的是li上的class 去掉layui-nav-itemed。就可以了。我一直再找的是ul标签上的。
layUI基本使用——布局
BUG专业户
04-12 7808
layui布局使用,包含布局容器的固定宽度和完整宽度，栅格系统的列组合，列间距，列偏移，列嵌套
LayUI学习笔记:LayUI的基本资料和页面元素
qq_41135146的博客
04-10 465
LayUI学习笔记:LayUI的基本资料和页面元素 1.LayUI的基本资料 1.1.LayUI的介绍 ​ layui是一款采用自身模块规范编写的前端UI框架。由国人开发，16年出厂的框架。 1.2.LayUI的特点 ​ 1.layui属于轻量级框架，简单美观，适用于开发后端模式，在服务端页面上有非常好的效果。 ​ 2.layui是提供给后端开发人员的ui框架，基于DOM驱动。 2.页面元素 2.1布局容器 <!-- 固定宽度（两侧有留白） --> <div class="layui-c
031-表单元素
aihiao的专栏
01-25 685
1. 在一个容器中设定class="layui-form"来标识一个表单元素块, 通过规范好的html结构及CSS类, 来组装成各式各样的表单元素, 并通过内置的form模块来完成各种交互。 2. 表单元素依赖form模块。(请注意: 如果不加载form模块, select、checkbox、radio等将无法显示, 并且无法使用form相关功能)。 3. 表单容器 3.1. form元素添加class="layui-form"属性, 作为layui的表单容器: <form class="
layui项目显示待处理项
weixin_41692437的博客
08-10 389
表头提示待处理项
搭建layUI框架（一）
积跬步，至千里
02-18 7484
因为工作需要开发一个后端系统，用layUI，虽然这想UI出来有一段时间了，同时也比较火，但是没有用过，以前用的UI都是easyUI，或者自己画的UI，等之类的框架，本人觉得还是很不错的，当然以前的一些框架也很不错!废话不多说，上代码，哈哈 1，引用layui的js文件和Css文件就不说了，自己官网下载 https://www.layui.com/ 2，页面框架搭建 2.1样式部分 &lt...
移除同级元素的class给点击的元素添加class
小寒风的
12-24 651
<div class="layui-btn-container"> <button type="button" class="layui-btn layui-btn-primary" value="-1" onclick="selectCompany(this)">全部公司</button> {foreach $list as $val} <button type="button" class="layui-btn layui..
关于layui动态给表单元素添加属性和样式
YanXiHelloWorld的博客
03-22 6882
1.要求：radio按钮选择通过拒绝时，拒绝理由动态禁用。 <div class="layui-form-item"> <label class="layui-form-label">审核结果<span style="color: red;">*</span></label> <div class="layui-input-bl
layui-设置div固定在页面上不随滚动条滚动
qq_43604300的博客
08-08 2057
思考：腾讯云的服务器购买界面，选择不同的配置会显示对应的价格，价格框固定在页面底部，不会随着滚动条滚动而滚动，便于用于查看价格。这里实现的是固定这个价格框，使其不会滚动。layui中div的属性设置放在CSS中，首先设置一个CSS样式。最终的效果显示是这样的，即使滚动页面也不会，这个价格框也不会动。然后在body中引用。...
Layui各常用组件使用方法简单示例
12-14
此资源包括了Layui各常用组件的使用方法,前端页面功能以及与后端功能接口对接的简单示例
springboot+layui简单demo实例
04-18
idea开发工具，使用了mybatis generator插件和lombook插件，maven导入依赖后，安装lombook或者自己封装即可。有问题请私信
layui 简单实现 TABLE 分页功能
08-08
layui 简单实现 TABLE 分页功能 https://blog.csdn.net/djk8888/article/details/126163042
LayUI简单页面模板.zip
10-19
该模板适用于Java后端开发的管理系统简单模板（包括简单的登录页面，添加页面，修改页面.......）
Spring boot +mybatis + layui简单demo
07-02
Spring boot +mybatis + layui简单demo，实现数据增删改查，附带sql文件，实现分页、模糊查询等
layui 动态添加的元素事件
xuxiaopang0417的博客
07-16 7195
<div class="layui-form-item"> <div class="layui-input-block"> <label><input class="layui-btn" type="button" data-method="addInput" value="add"><...
layui基础
qq_44333590的博客
03-15 1067
form表单 页面元素 结构： //第一层：form标签，并给class赋值为layui-form <form class="layui-form " lay-filter="addForm" id="addForm"> //每一项就用一个div标签并给class值layui-for-item值 <div class="layui-form-item"> //标题给一个label标签给class值layui-form-label值 <label clas
【layui-表单模块 layui.form学习】
qq_48968230的博客
07-10 1019
有关layui-form模块文档内容的学习
layui2.7.6 使用手册下载
07-26
Layui是一个简单易用的前端开发框架，它包含了许多常用的UI组件和工具，可帮助开发者快速构建界面。如果想要下载Layui2.7.6版本的使用手册，可以按照以下步骤进行操作： 1. 打开Layui的官方网站...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值