1. 程式人生 > 其它 >8月16日 layui使用

8月16日 layui使用

今天嘗試使用layui模板

特別要注意在將模板複製時需要將html檔案中的引用地址進行修改

如果html檔案寫在webcontent資料夾下,那麼就可以引用放在資料夾中的

<link rel="icon" href="layuimini/images/favicon.ico">
<link rel="stylesheet" href="layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="layuimini/css/layuimini.css?v=2.0.4.2" media="all">
<link rel="stylesheet" href="layuimini/css/themes/default.css" media="all">
<link rel="stylesheet" href="layuimini/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">

而如果將檔案放在比如說page資料夾下面,需要注意,此時該html檔案與那寫 js檔案同級,所以應該

<script src="../layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>

這樣加上../

通過修改init.json檔案 menuinfo就可以根據需求修改側邊選單欄

"menuInfo": [
{
"title": "常規管理",
"icon": "fa fa-address-book",
"href": "",
"target": "_self",
"child": [
{
"title": "主頁兩級",
"href": "",
"icon": "fa fa-home",
"target": "_self",
"child": [
{
"title": "主頁一",
"href": "page/welcome-1.html",
"icon": "fa fa-tachometer",
"target": "_self"
},
{
"title": "主頁二",
"href": "page/welcome-2.html",
"icon": "fa fa-tachometer",
"target": "_self"
},
{
"title": "主頁三",
"href": "page/welcome-3.html",
"icon": "fa fa-tachometer",
"target": "_self"
}
]
},
{
"title": "熱詞列表",
"href": "page/table.html",
"icon": "fa fa-bar-chart",
"target": "_self"
},
{
"title": "詞雲展示",
"href": "page/cloud.jsp",
"icon": "fa fa-gears",
"target": "_self"
},
{
"title": "表格",
"href": "page/table.html",
"icon": "fa fa-file-text",
"target": "_self"
},

另外如果開啟json檔案中文亂碼的話,右擊該檔案選擇properties ,選擇other 修改成utf-8

根據自己需要來修改index.html 來改變模板的樣子,比如說註釋掉頭部選單

<!--電腦端頭部選單-->
<!-- <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show"> -->
<!-- </ul> -->

<!--手機端頭部選單-->
<!-- <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show"> -->
<!-- <li class="layui-nav-item"> -->
<!-- <a href="javascript:;"><i class="fa fa-list-ul"></i> 選擇模組</a> -->
<!-- <dl class="layui-nav-child layuimini-menu-header-mobile"> -->
<!-- </dl> -->
<!-- </li> -->
<!-- </ul> -->

不過在看了很多教程之後還是對layui怎麼從後臺獲取資料具有很大的疑惑

學習時間:12:09到15:59