在項目中使用layUI
- 2019 年 10 月 8 日
- 筆記
項目結構.png
- 下載官方的壓縮包，解壓之後把layui文件放到項目裡面。
- 在index.html 文件中引入js和css 文件。
- 這裡引入./layui/css/layui.css 和 ./layui/layui.all.js。 jquery可以不引用。
- 特別注意： var layer = layui.layer ,form = layui.form ,laydate = layui.laydate ,laypage = layui.laypage;
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="./layui/css/layui.css"> </head> <body> <input type="button" value="按鈕" id="btn"> <input type="text" class="layui-input" id="test1"> <div id="demo7"></div> <script src="./layui/jquery-2.0.3.js"></script> <script src="./layui/layui.all.js"></script> <script type="text/javascript"> var stimer = "" //由於模組都一次性載入，因此不用執行 layui.use() 來載入對應模組，直接使用即可： ;!function(){ var layer = layui.layer ,form = layui.form ,laydate = layui.laydate ,laypage = layui.laypage; laydate.render({ elem: '#test1' ,done: function(value, date, endDate){ stimer = value; console.log(stimer); // console.log(value); //得到日期生成的值，如：2017-08-18 // console.log(date); //得到日期時間對象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0} // console.log(endDate); //得結束的日期時間對象，開啟範圍選擇（range: true）才會返回。對象成員同上。 } }); laypage.render({ elem: 'demo7' ,count: 100 ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'] ,jump: function(obj){ console.log(obj) } }); }(); </script> </body> </html>
報錯.png
發現以上問題就是沒有定義這個變數laypage。 在上面定義就可以了。
layui的頁面.png
