Layui官方網站
官方網站: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>