zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    个人作业——软件产品案例分析
    事后诸葛亮(团队)
    【Alpha】阶段总结报告
    【Alpha】Daily Scrum Meeting第十次
    【Alpha】Daily Scrum Meeting第八次
    【Alpha】Daily Scrum Meeting第七次
    【Alpha】Daily Scrum Meeting第六次
    【转】简明 Vim 练级攻略
    简明区分escape、encodeURI和encodeURIComponent
    【拿来主义】当我们谈WEB缓存的时候,我们在谈些什么?
  • 原文地址:https://www.cnblogs.com/buyaoya-pingdao/p/15148945.html
Copyright © 2011-2022 走看看