使用layui实现部分刷新

        <div class="link">
                <li class="layui-nav-item">
                    <a
                       href="${path}/View/user.jsp"
                       lay-text="用户管理"
                    ><button class="layui-btn layui-btn-danger">用户管理</button></a>
                </li>
                <li class="layui-nav-item">
                    <a
                            href="${path}/View/dep.jsp"
                            lay-text="部门管理"
                    ><button class="layui-btn">部门管理</button></a>
                </li>
                <li class="layui-nav-item">
                    <a
                            href="${path}/base.jsp"
                            lay-text="公告管理"
                    ><button  class="layui-btn layui-btn-normal">公告管理</button></a>
                </li>
                <li class="layui-nav-item">
                    <a
                            href="${path}/user-info.jsp"
                            lay-text="个人信息"
                    ><button class="layui-btn layui-btn-warm">个人信息</button></a>
                </li>
            </div>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很抱歉,作为人工智能,我无法演示界面操作。以下是使用layui实现登录页面的示例代码: HTML代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登录页面</title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <style> #login { width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #eee; border-radius: 5px; box-shadow: 0 0 10px #eee; text-align: center; } #login h2 { margin-bottom: 20px; } </style> </head> <body> <div id="login"> <h2>用户登录</h2> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" placeholder="请输入用户名" autocomplete="off" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input" lay-verify="required"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script> <script> layui.use(['form', 'layer'], function(){ var form = layui.form; var layer = layui.layer; form.on('submit(login)', function(data){ layer.msg(JSON.stringify(data.field)); return false; }); }); </script> </body> </html> ``` 解析: 1. 引入layui的CSS和JS文件。 2. 使用HTML和CSS布局登录页面,其中,form必须设置class为layui-form,因为后面会用到layui.form进行处理。 3. 给用户名和密码的input标签设置name和placeholder属性,方便后续获取表单数据和提示输入内容。 4. 给登录和重置按钮都设置 class="layui-btn",才能展示为layui风格的按钮。 5. 给登录按钮添加lay-filter="login"属性,这里"login"是一个自定义的标识符,我们可以在JS代码中使用。同时,为了让按钮支持提交表单,需要添加lay-submit属性。 6. 在JS代码中,通过layui.use()方法调用模块,并在回调函数中处理事件。这里需要使用layui.form模块,用于监听表单提交事件。当提交表单时,会执行回调函数中的代码,获取表单数据并展示。 7. 最后,使用layer.msg()方法展示表单数据。它属于layer模块的方法,可以弹出提示框或者确认框等。 以上代码仅作为示例,使用layui可以实现更多功能和效果,具体可以参考layui的官方文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值