标签：lse padding 品牌 def password 导航 type bre sig
官方网站:https://www.layui.com/
下载地址:https://res.layui.com/static/download/layui/layui-v2.5.5.zip?v=
创建项目
省略
创建static目录 将下载的项目复制到static目录中
SMS:. ├─.idea └─static ├─css │ └─modules │ ├─laydate │ │ └─default │ └─layer │ └─default ├─font ├─images │ └─face └─lay └─modules
创建index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>电商后台系统</title> <link rel="stylesheet" href="static/css/layui.css"> </head> <body class="layui-layout-body"> <div class="layui-layout layui-layout-admin"> <div class="layui-header"> <div class="layui-logo">电商后台系统</div> <!-- 头部区域（可配合layui已有的水平导航） --> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item"><a href="">控制台</a></li> <li class="layui-nav-item"><a href="">设置</a></li> <li class="layui-nav-item"><a href="">会员</a></li> <li class="layui-nav-item"><a href="">商品</a></li> <li class="layui-nav-item"><a href="">交易</a></li> <li class="layui-nav-item"><a href="">门店</a></li> <li class="layui-nav-item"><a href="">网站</a></li> <li class="layui-nav-item"><a href="">营销</a></li> <li class="layui-nav-item"><a href="">统计</a></li> <li class="layui-nav-item"><a href="">手机端</a></li> <li class="layui-nav-item"><a href="">微信</a></li> <li class="layui-nav-item"> <a href="javascript:;">其它系统</a> <dl class="layui-nav-child"> <dd><a href="">邮件管理</a></dd> <dd><a href="">消息管理</a></dd> <dd><a href="">授权管理</a></dd> </dl> </li> </ul> <ul class="layui-nav layui-layout-right"> <li class="layui-nav-item"> <a href="javascript:;"> <img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 张三 </a> <dl class="layui-nav-child"> <dd><a href="">基本资料</a></dd> <dd><a href="">安全设置</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">退出系统</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:;">商品管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">商品分类</a></dd> <dd><a href="javascript:;">品牌管理</a></dd> <dd><a href="javascript:;">类型管理</a></dd> <dd><a href="javascript:;">规格管理</a></dd> <dd><a href="javascript:;">商品管理</a></dd> </dl> </li> <li class="layui-nav-item"> <a href="javascript:;">其他管理</a> <dl class="layui-nav-child"> <dd><a href="javascript:;">地区管理</a></dd> <dd><a href="javascript:;">空间管理</a></dd> <dd><a href="javascript:;">到货通知</a></dd> </dl> </li> <li class="layui-nav-item"><a href="">云市场</a></li> <li class="layui-nav-item"><a href="">发布商品</a></li> </ul> </div> </div> <div class="layui-body"> <div style="padding: 5px;height:100%;width:100%"> <!-- 内容主体区域 --> <iframe src="good.html" frameborder="0" id="demoAdmin" style="width: 100%; height: 100%;"></iframe> </div> </div> <div class="layui-footer"> <!-- 底部固定区域 --> © blb.com - 底部固定区域 </div> </div> <script src="static/layui.js"></script> <script> //JavaScript代码区域 layui.use(‘element‘, function(){ var element = layui.element; }); </script> </body> </html>
创建商品页面 good.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="static/css/layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --> </head> <body> <table class="layui-hide" id="test" lay-filter="test"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header">商品管理/商品信息</div> <div class="layui-card-body"> <form class="layui-form" action="" lay-filter="example"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">商品名称</label> <div class="layui-input-inline"> <input type="text" name="id" placeholder="请输入商品" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">货号</label> <div class="layui-input-inline"> <input type="text" name="id" placeholder="请输入货号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">商品分类</label> <div class="layui-input-inline"> <div class="layui-form"> <select name="label" class="layui-form-item"> <option value="0" selected="selected">请选择分类</option> <option value="1">分类1</option> <option value="2">分类2</option> </select> </div> </div> </div> <div class="layui-inline"> <label class="layui-form-label">上架</label> <div class="layui-input-inline"> <div class="layui-form"> <select name="label" class="layui-form-item"> <option value="0" selected="selected">请选择</option> <option value="1">出售中</option> <option value="2">仓库中</option> </select> </div> </div> </div> <div class="layui-inline"> <label class="layui-form-label">品牌</label> <div class="layui-input-inline"> <input type="text" name="title" placeholder="请输入品牌" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search"> <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i> </button> </div> </div> </form> </div> </div> </div> </div> </table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn" lay-event="isAll">全选</button> <button class="layui-btn" lay-event="save">新增</button> <button class="layui-btn" lay-event="remove">删除</button> </div> </script> <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="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> <script src="static/layui.js" charset="utf-8"></script> <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --> <script> layui.use([‘form‘,‘table‘], function(){ var table = layui.table; table.render({ elem: ‘#test‘ ,url:‘http://localhost:7300/mock/5e06d6ef83b40c266813ee7f/example/user/list‘ ,toolbar: ‘#toolbarDemo‘ //开启头部工具栏，并为其绑定左侧模板 ,defaultToolbar: [‘filter‘, ‘exports‘, ‘print‘, { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可 title: ‘提示‘ ,layEvent: ‘LAYTABLE_TIPS‘ ,icon: ‘layui-icon-tips‘ }] ,title: ‘商品列表‘ ,cols: [[ {type: ‘checkbox‘, fixed: ‘left‘} ,{field:‘id‘, title:‘平台货号‘, width:120, fixed: ‘left‘, unresize: true, sort: true} ,{field:‘username‘, title:‘商品名称‘, width:120, edit: ‘text‘} ,{field:‘email‘, title:‘品牌和分类‘, width:150, edit: ‘text‘, templet: function(res){ return ‘<em>‘+ res.email +‘</em>‘ }} ,{field:‘sex‘, title:‘价格(元)‘, width:100, edit: ‘text‘, sort: true} ,{field:‘city‘, title:‘库存‘, width:100} ,{field:‘sign‘, title:‘商品状态‘} ,{field:‘experience‘, title:‘平台推荐‘, width:120, sort: true} ,{field:‘logins‘, title:‘排序‘, width:120, sort: true} ,{field:‘joinTime‘, title:‘加入时间‘, width:120} ,{fixed: ‘right‘, title:‘操作‘, toolbar: ‘#barDemo‘, width:150} ]] ,page: true }); //头工具栏事件 table.on(‘toolbar(test)‘, function(obj){ var checkStatus = table.checkStatus(obj.config.id); switch(obj.event){ case ‘save‘: var data = checkStatus.data; layer.open({ type: 1, shade: false, title: false, //不显示标题 area: [‘620px‘, ‘440px‘], //宽高 content: $(‘#addForm‘), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响 cancel: function(){ layer.msg(‘捕获就是从页面已经存在的元素上，包裹layer的结构‘, {time: 5000, icon:6}); $(".layui-laypage-btn").click();//执行分页刷新当前页 } }); break; case ‘remove‘: var data = checkStatus.data; layer.msg(‘选中了：‘+ data.length + ‘ 个‘); break; case ‘isAll‘: layer.msg(checkStatus.isAll ? ‘全选‘: ‘未全选‘); break; //自定义头工具栏右侧图标 - 提示 case ‘LAYTABLE_TIPS‘: layer.alert(‘这是工具栏右侧自定义的一个图标按钮‘); break; }; }); //监听行工具事件 table.on(‘tool(test)‘, function(obj){ var data = obj.data; //console.log(obj) if(obj.event === ‘del‘){ layer.confirm(‘真的删除行么‘, function(index){ obj.del(); layer.close(index); }); } else if(obj.event === ‘edit‘){ layer.prompt({ formType: 2 ,value: data.email }, function(value, index){ obj.update({ email: value }); layer.close(index); }); } }); }); </script> </body> <div id="addForm" style="padding: 10px; background-color: #F2F2F2;display:none"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card"> <div class="layui-card-header"></div> <div class="layui-card-body"> <form class="layui-form" action="" lay-filter="example"> <div class="layui-form-item"> <label class="layui-form-label">商品名称</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="title" 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="password" name="price" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-block"> <div class="layui-form"> <select name="interest" class="layui-form-item" lay-filter="aihao"> <option value=""></option> <option value="0">写作</option> <option value="1">阅读</option> <option value="2">游戏</option> <option value="3">音乐</option> <option value="4">旅行</option> </select> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码框</label> <div class="layui-input-block"> <div class="layui-form"> <input type="checkbox" class="layui-form-item" name="like[write]" title="写作"> <input type="checkbox" class="layui-form-item" name="like[read]" title="阅读"> <input type="checkbox" class="layui-form-item" name="like[daze]" title="发呆"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">开关</label> <div class="layui-input-block"> <div class="layui-form"> <input type="checkbox" class="layui-form-item" name="close" lay-skin="switch" lay-text="ON|OFF"> </div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">单选框</label> <div class="layui-input-block"> <div class="layui-form"> <input class="layui-form-item" type="radio" name="sex" value="男" title="男" checked=""> <input class="layui-form-item" type="radio" name="sex" value="女" title="女"> </div> </div> </div> <div class="layui-form-item layui-form-text"> <label class="layui-form-label">文本域</label> <div class="layui-input-block"> <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-setval">赋值</button> <button type="button" class="layui-btn layui-btn-normal" id="LAY-component-form-getval">取值</button> <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button> </div> </div> </form> </div> </div> </div> </div> </div> </html>
标签：lse padding 品牌 def password 导航 type bre sig
原文地址：https://www.cnblogs.com/zhaochengf/p/12142691.html
