1 Star 0 Fork 1.6K

feikor / layuimini

forked from ThinkG / layuimini 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

layuimini后台模板

项目介绍

最简洁、清爽、易用的layui后台框架模板。

项目会不定时进行更新,建议star和fork一份。

技术交流QQ群:763822524 加群请备注来源:如gitee、github、官网等

代码仓库

主要特性

  • 界面足够简洁清爽。
  • 一个接口几行代码而已直接初始化整个框架,无需复杂操作。
  • 支持多tab,可以打开多窗口。
  • 支持无限级菜单和对font-awesome图标库的完美支持。
  • url地址hash定位,可以清楚看到当前tab的地址信息。
  • 刷新页面会保留当前的窗口,并且会定位当前窗口对应左侧菜单栏。
  • 移动端的友好支持。

效果预览

总体预览 Image text

1、多tab窗口

Image text

2、无限级菜单

Image text

3、菜单缩放并提示菜单标题

Image text

4、url地址hash定位

Image text

5、刷新保留窗口,并对应菜单栏

Image text

6、移动端的友好支持

Image text

使用说明

一、在index.html文件内进行初始化

  • base: "js/" 填写layuimini.js对应的目录。

  • layuimini.init(); 方法内的参数请填写动态api地址。(实际应用中建议后端api做缓存)

  • api地址返回的参数可以参考api目录下的init.json文件或者查看使用说明的第二点的参数说明

   layui.config({
       base: "js/"
   }).extend({
       "layuimini": "layuimini"
   });
   layui.use(['element', 'layer', 'layuimini'], function () {
       var $ = layui.jquery,
           element = layui.element,
           layer = layui.layer;

       layuimini.init('api/init.json');
   });

二、api地址返回的参数说明

  • clearInfo是服务端清理缓存信息(clearInfo.clearUrl:服务端清理缓存接口地址,为空则不请求;)
返回参数对应的事例(code:0,清除缓存失败;code:1,表示清除缓存成功;)

{
  "code": 1,
  "msg": "清除服务端缓存成功"
}
  • homeInfo是首页信息

  • menuInfo是头部模块和左侧菜单对应的信息

  • module id必须唯一,例如 menuInfo.ceshi、menuInfo.setting对应的ceshi和setting就是模块id,他们的值必须唯一,否则模块切换会有冲突。

{
"clearInfo": {
  "clearUrl": "api/clear.json"
},
"homeInfo": {
  "title": "首页",
  "icon": "fa fa-snowflake-o",
  "href": "page/welcome.html"
},
"menuInfo": {
  "ceshi": {
    "title": "测试管理",
    "icon": "fa fa-address-book",
    "child": [{
      "title": "icon列表",
      "href": "page/icon.html",
      "icon": "fa fa-dot-circle-o",
      "target": "_self"
    }, {
      "title": "UI管理",
      "href": "",
      "icon": "fa fa-snowflake-o",
      "target": "",
      "child": [ {
        "title": "表单",
        "href": "page/form.html",
        "icon": "fa fa-calendar",
        "target": "_self"
      },{
        "title": "按钮",
        "href": "page/button.html",
        "icon": "fa fa-snowflake-o",
        "target": "_self"
      }, {
        "title": "弹出层",
        "href": "page/layer.html",
        "icon": "fa fa-snowflake-o",
        "target": "_self"
      }, {
        "title": "静态表格",
        "href": "page/table.html",
        "icon": "fa fa-snowflake-o",
        "target": "_self"
      }]
    }, {
      "title": "测试无限层",
      "href": "",
      "icon": "fa fa-meetup",
      "target": "",
      "child": [{
        "title": "按钮1",
        "href": "page/button.html",
        "icon": "fa fa-calendar",
        "target": "_self",
        "child": [{
          "title": "按钮2",
          "href": "page/button.html",
          "icon": "fa fa-snowflake-o",
          "target": "_self",
          "child": [{
            "title": "按钮3",
            "href": "page/button.html",
            "icon": "fa fa-snowflake-o",
            "target": "_self"
          }, {
            "title": "表单4",
            "href": "page/form.html",
            "icon": "fa fa-calendar",
            "target": "_self"
          }]
        }]
      }]
    }]
  },
  "setting": {
    "title": "设置管理",
    "icon": "fa fa-gears",
    "child": [{
      "title": "icon列表 [setting]",
      "href": "page/icon.html",
      "icon": "fa fa-dot-circle-o",
      "target": "_self"
    }, {
      "title": "按钮列表 [setting]",
      "href": "page/button.html",
      "icon": "fa fa-caret-square-o-left",
      "target": "_self"
    }]
  }
}
}

空文件

简介

基于 layui 编写的最简洁、易用的后台框架模板。只需提供一个接口就直接初始化整个框架,无需复杂操作。 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/feikor/layuimini.git
git@gitee.com:feikor/layuimini.git
feikor
layuimini
layuimini
master

搜索帮助