abstract:<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css"&
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"> <script type="text/javascript" src="static/layui/layui.js"></script> <style type="text/css"> .header span{background: #009688;color: #fff;padding: 10px;margin-left: 30px;line-height: 37px;} .header button{float: right;} .header {border-bottom: 2px #009688 solid;} </style> </head> <body style="padding:10px;"> <div class="header"> <span>管理员列表</span> <button class="layui-btn layui-btn-sm" onclick="add();">添加</button> </div> <table class="layui-table"> <thead> <tr> <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th> <th lay-data="{field:'username', width:80}">用户名</th> <th lay-data="{field:'sex', width:80, sort: true}">性别</th> <th lay-data="{field:'city', width:80}">城市</th> <th lay-data="{field:'sign', width:160}">签名</th> <th lay-data="{field:'experience', width:80, sort: true}">积分</th> <th lay-data="{field:'classify', width:80}">职业</th> <th lay-data="{field:'wealth', width:135, sort: true}">财富</th> </tr> </thead> <tbody> <tr> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td> <button class="layui-btn layui-btn-xs">默认按钮</button> <button class="layui-btn layui-btn-normal layui-btn-xs" onclick="add();">编辑</button> <button class="layui-btn layui-btn-warm layui-btn-xs">按钮</button> <button class="layui-btn layui-btn-danger layui-btn-xs" onclick="del()">取消</button> </td> </tr> <tr> <td>张爱玲</td> <td>汉族</td> <td>1920-09-30</td> <td>于千万人之中</td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> </tr> <tr> <td>Helen Keller</td> <td>拉丁美裔</td> <td>1880-06-27</td> <td> Life is either </td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> </tr> <tr> <td>岳飞</td> <td>汉族</td> <td>1103-北宋崇宁二年</td> <td>也抹不去“民族英雄”的事实</td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> </tr> <tr> <td>孟子</td> <td>华夏族(汉族)</td> <td>公元前-372年</td> <td>猿强,则国强。国强</td> <td>贤心</td> <td>汉族</td> <td>1989-10-14</td> <td>人生似修行</td> </tr> </tbody> </table> <script> layui.use(['layer'], function(){ var element = layui.element; var layer = layui.layer; }); function del(){ layer.confirm('确定要删除吗?', { icon:2, // 0到6 btn: ['确定', '取消'] //可以无限个按钮 }, function(index, layero){ //按钮【按钮一】的回调 }, function(index){ //按钮【按钮二】的回调 }); } function add(){ layer.open({ type: 2, title:'添加管理员', area:['480px','420px'], content: 'add.html' }); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="static/layui/css/layui.css"> <script type="text/javascript" src="static/layui/layui.js"></script> </head> <body> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-inline"> <input type="text" name="title" 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="title" 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="title" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">选择框</label> <div class="layui-input-inline"> <select name="city" lay-verify="required"> <option value=""></option> <option value="0">北京</option> <option value="1">上海</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">状态</label> <div class="layui-input-block"> <input type="checkbox" name="" title="禁用" lay-skin="primary"> </div> </div> <button class="layui-btn">保存</button> </form> <script> layui.use('form', function(){ var form = layui.form; }); </script> </body> </html>
Correcting teacher:天蓬老师Correction time:2019-06-29 13:10:37
Teacher's summary:其实, layui最早被大家知道的就是它的弹层, 第一次用得时候, 会觉得很神奇... 它的弹层就是layer