Layui入门
LayUI
引入LayUI
<!DOCTYPE html> <html lang="en"> <head><meta http-equiv="Content-Type" content="text/html" charset="UTF-8"><title>Title</title><!--引入layui.css--><link rel="stylesheet" href="layui/css/layui.css"></head> <body> <!--具體內容一--><!--引入layui.js--> <script src="layui/layui.js"></script> </body> </html>彈出層
<script>layui.use(['layer', 'form'], function () {let layer = layui.layer;let form = layui.form;let $ = layui.jquery;$("#btn0").on('click', function () {layer.open({type: 1,//類型，0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）content: "<h2 style='color:red'> helloooooooooooo</h2>",skin: 'layui-layer-molv',//內置皮膚layui-layer-lan和layui-layer-molvarea: ['800px', '500px'],//自定義寬高icon: 1,btn: ['按鈕1', '按鈕2', '按鈕3'],yes: function (index, layero) {layer.alert("按鈕1");},btn2: function () {layer.alert("按鈕2");},btn3: function () {layer.alert("按鈕3");},cancel: function () {alert("彈窗已關閉")},btnAlign: 'c',//上面按鈕居中，l:居左，r:居右，c:居中closeBtn: 1,//右上角的關閉圖標:x,0：關閉，1或者2：開啟shade: 0.6,//遮罩，數字表示透明度，1是全黑，0是關閉id: 1001,//該彈窗的唯一標志//maxmin:1,//該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可fixed: true,//即鼠標滾動時，層是否固定在可視區域。如果不想，設置fixed: false即可scrollbar: true,//是否允許出現滾動條maxWidth: "500px",//最大寬度,只有當area: 'auto'時，maxWidth的設定才有效。maxHeight: "200px",//最大高度,只有當高度自適應時，maxHeight的設定才有效。success: function (layero, index) {alert("彈窗成功彈出");console.log(layero, index);}})})$("#btn1").on('click', function () {layer.open({type: 1,content: $("#test01"),area: ['500px', '300px'],icon: 2,maxmin: true})})$("#btn2").on('click', function () {layer.open({type: 2,content: '08.html',maxmin: true})})$("#btn3").on('click', function () {layer.open({type: 3,content: "加載中",})})$("#btn4").on('click', function () {layer.open({type: 4,content: ['這是內容', '#btn4']})})}) </script>open屬性
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <button type="button" class="layui-btn" id="btn0">type=0</button> <button type="button" class="layui-btn" id="btn1">type=1</button> <button type="button" class="layui-btn" id="btn2">type=2</button> <button type="button" class="layui-btn" id="btn3">type=3</button> <button type="button" class="layui-btn" id="btn4">type=4</button> <button type="button" class="layui-btn" id="btn5">type=5</button> <div id="test01"><!--監聽下拉框--><div class="layui-form"><div class="layui-form-item"><label class="layui-form-label">下拉選擇框</label><div class="layui-input-inline"><select name="interest" id=""><option value="1">寫作</option><option value="2">閱讀</option><option value="3">游戲</option><option value="4">睡覺</option></select></div></div><!--監聽復選框--><div class="layui-form-item"><label class="layui-form-label">復選框</label><div class="layui-input-block"><input type="checkbox" name="like[write]" value="寫作" title="寫作" lay-filter="fxk"><input type="checkbox" name="like[read]" value="閱讀" title="閱讀" lay-filter="fxk"></div></div></div><!--監聽開關--><div class="layui-form-item"><label class="layui-form-label">開關</label><div class="layui-input-block"><input type="checkbox" checked lay-skin="switch" value="開關的值" lay-text="開|關" lay-filter="kg"></div></div><!--監聽單選框--><div class="layui-form-item"><label for="" class="layui-form-label">單選框</label><div class="layui-input-block"><input type="radio" name="sex" value="1" title="男" lay-filter="sex" checked><input type="radio" name="sex" value="0" title="女" lay-filter="sex"></div></div><!--監聽提交事件--><div class="layui-form-item"><div class="layui-input-block"><button type="button" class="layui-btn" lay-submit lay-filter="tj">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div> </div> <script src="layui/layui.js"></script> <script>layui.use(['layer', 'form'], function () {let layer = layui.layer;let form = layui.form;let $ = layui.jquery;$("#btn0").on('click', function () {layer.open({type: 1,//類型，0（信息框，默認）1（頁面層）2（iframe層）3（加載層）4（tips層）content: "<h2 style='color:red'> 嵌入文本</h2>",skin: 'layui-layer-molv',//內置皮膚layui-layer-lan和layui-layer-molvarea: ['800px', '500px'],//自定義寬高icon: 1,btn: ['按鈕1', '按鈕2', '按鈕3'],yes: function (index, layero) {layer.alert("按鈕1");},btn2: function () {layer.alert("按鈕2");},btn3: function () {layer.alert("按鈕3");},cancel: function () {alert("彈窗已關閉")},btnAlign: 'c',//上面按鈕居中，l:居左，r:居右，c:居中closeBtn: 1,//右上角的關閉圖標:x,0：關閉，1或者2：開啟shade: 0.6,//遮罩，數字表示透明度，1是全黑，0是關閉id: 1001,//該彈窗的唯一標志//maxmin:1,//該參數值對type:1和type:2有效。默認不顯示最大小化按鈕。需要顯示配置maxmin: true即可fixed: true,//即鼠標滾動時，層是否固定在可視區域。如果不想，設置fixed: false即可scrollbar: true,//是否允許出現滾動條maxWidth: "500px",//最大寬度,只有當area: 'auto'時，maxWidth的設定才有效。maxHeight: "200px",//最大高度,只有當高度自適應時，maxHeight的設定才有效。success: function (layero, index) {alert("彈窗成功彈出");console.log(layero, index);}})})$("#btn1").on('click', function () {layer.open({type: 1,content: $("#test01"),area: ['500px', '400px'],icon: 2,maxmin: true})})$("#btn2").on('click', function () {layer.open({type: 2,content: 'https://www.aliyun.com/',maxmin: true})})$("#btn3").on('click', function () {layer.open({type: 3,content: "加載中",})})$("#btn4").on('click', function () {layer.open({type: 4,content: ['這是內容', '#btn4']})})}) </script> </body> </html>表格
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="layui/css/layui.css"> </head> <body> <table id="demo" lay-filter="test1"></table><script type="text/html" id="titleTpl">{{# if(d.sex == '男'){ }}<a href="#" class="layui-table-link">雄</a>{{# } else { }}<a href="#" class="layui-table-link">雌</a>{{# } }} </script><script type="text/html" id="tablebar1"><div class="layui-btn-container"><button type="button" class="layui-btn" id="getAll" lay-event="getAll">獲取選中行</button><button type="button" class="layui-btn" id="delAll" lay-event="delAll">批量刪除</button></div> </script><script type="text/html" id="tablebar2"><div class="layui-btn-container"><button type="button" class="layui-btn" lay-event="detail">查看</button><button type="button" class="layui-btn" lay-event="edit">編輯</button><button type="button" class="layui-btn" lay-event="del">刪除</button></div> </script> <script src="layui/layui.js"></script> <script>layui.use(['table', 'layer'], function () {let table = layui.table;let layer = layui.layer;let $ = layui.jquery// 監聽頭工具欄事件table.on("toolbar(test1)", function (obj) {let checkStatus = table.checkStatus(obj.config.id);switch (obj.event) {case 'getAll':alert("getAll");if (checkStatus.data.length != 0) {let dataJson = JSON.stringify(checkStatus.data);alert(dataJson)console.log(checkStatus.data[0].username);//獲取選中行的數據console.log(checkStatus.data);//獲取選中行的數據console.log(checkStatus.data.length);//獲取選中行數量，可作為是否有選中行的條件console.log(checkStatus.isAll);//表格是否全選} else {layer.tips('請先選擇數據行', '#getAll')}}})//監聽單元格工具條table.on('tool(test1)', function (obj) {let data = obj.data;let tr = obj.trswitch (obj.event) {case 'detail':alert("查看");break;case 'del':alert('刪除');layer.confirm("真的刪除行嗎？", function (index) {obj.del();layer.close(index)});break;case 'edit':alert("編輯");obj.update({id: "更新后的id", username: '更新后的username', score: '更新后的評分', experience: '更新后的積分', sex: '更新后的性別', wealth: '更新后的財富', city: '更新后的城市', sign: '更新后的簽名', classify: '更新后的職業'});break;}table.on('edit(test1)',function (obj) {alert(obj.field);console.log(obj.value); //得到修改后的值console.log(obj.field); //當前編輯的字段名console.log(obj.data); //所在行的所有相關數據})table.on('sort(test1)',function (obj) {alert(obj.field)console.log(obj.field)console.log(obj.type); //當前排序類型：desc（降序）、asc（升序）、null（空對象，默認排序）console.log(this); //當前排序的 th 對象})table.on('checkbox(test1)',function (obj) {alert(obj.checked)})})table.render({elem: '#demo',//對應table的idheight: 'full-200',defaultToolbar: ["filter", "exports", "print"],url: 'json/data.json',toolbar: "#tablebar1",limit: 10,limits: [5, 10, 15, 20],page: true,cols: [[{type: 'checkbox', fixed: 'left'},//field:對應json的數據字段，title:字段名，with:該字段的寬度，sort:開啟排序，fixed：將列固定{field: 'id', title: 'ID', width: '10%', sort: true, fixed: 'left'}//edit:表格可編輯, {field: 'username', title: '用戶名', width: '10%', edit: true}//templet的三種使用方法, {field: 'score', title: '評分', width: '10%', sort: true, templet: function (d) {return d.experience >= '500' ? '高級' : '一般';}}, {field: 'experience',title: '積分',width: '10%',sort: true,templet: '<div><a href="#" class="layui-table-link">積分：{{d.experience}}</a></div>'}, {field: 'sex', title: '性別', width: '10%', sort: true, templet: '#titleTpl'}//hide:將該列隱藏, {field: 'wealth', title: '財富', width: 135, sort: true, hide: true}, {field: 'city', title: '城市', width: '10%', hide: true}, {field: 'sign', title: '簽名', width: '10%', hide: true}, {field: 'classify', title: '職業', width: '20%'}//toolbar, {fixed: 'right', title: '操作', width: 250, align: 'left', toolbar: '#tablebar2'}]]})}) </script> </body> </html>總結
- 上一篇： 数据库课程设计（上）（学生成绩管理系统）
- 下一篇： 台式您想使用系统还原计算机吗,系统还原功