支持纯静态的Layuimini版本

本人做了点小小的改动,在来的基础上添加了对静态的支持。

零、起因

要做个项目,但是用的是JSP,想着用Layui,然后去找模板,发现这个Layuimini。但是这个需要后端接口,还不能实时更新菜单,就像把它做成静态的,单页面的,传统的HTML那样的。

壹、项目

项目地址:LayuiminiStatic

写得有点仓促,也没经过大量测试,有问题请多留言 ~

项目ReadME文档:


layuimini后台模板

项目介绍

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


在原版Laymini iframe V2 2.0.6.1 的基础上添加了静态的支持,可以不使用接口,支持配置全局新页面打开或者在源网页打开,就最原始的Html的那种效果,方便一些刚刚学Web的同学使用(说的就是我QwQ),或者说每个页面的菜单都不一样的也可以用这个(但是要刷新整个页面)。

原始的功能也支持,使用起来暂时没发现啥问题。

就是我的代码写得有点乱,搞了挺久了,有点暴躁,不过注释还算全,后面再整理吧。

主要修改了 /js/lay-module/layuimini 下的 miniAdmin.js、miniMenu.js和miniTab.js这几个文件

代码仓库(iframe 多tab版)

v2版

直接 git clone https://github.com/Minuy/layuimini_static.git

使用说明

新增参数

miniAdmin.render(options,menu);

  • 新增options.notTabButPage 默认为false,true时在新窗口或当前窗口打开新页面,而不是在iframe中,策略取决于target属性。同时打开后,菜单项的href为"",或者没定义,按钮是不能被选中的,但是可以跳转连接(通过下面的page属性),这样可以防止新窗口打开后旧窗口菜单项与内容对不上的尴尬。
  • 新增menu,这个是init.json,直接写代码里即可,可选,(优先选择接口)

    菜单配置中菜单项
  • 新增 "active":false ,默认为false,表示选中的菜单项,全局最多一个为true(会检测的,把多的设置为false),设置后一打开页面就是选中这个的,但是这个不会触发Hash去切换iframe,只会改样式
  • 新增 "page":"url" ,这个是配合options.notTabButPage属性新窗口打开的链接或者本窗口刷新的链接

运行时js代码会自动根据active找条链路,用来选中菜单项,并同时展开它的父菜单,这个链路的属性为 '_active'

使用时根据说明去添加就好了

源项目文档:

文档地址:查看文档

源项目:https://github.com/zhongshaofa/layuimini


项目ReadME文档结束

叁、总结

项目不满足我们要求时大胆的去改!敢想敢做!

但是由于时间有限,改时大可按照自己的需求直接去改,不需要做到很标准,后面有时间了再重构就好了。本次改进从了解Layui到遇到Layuimini到熟悉它到修改它,花的时间比较多,属于是不可控了。害,我高数还没学......

“鸡汤”如下:

  • 不要完美主义,掌握好度,学习本着自己的目标去!!
  • 加紧学习,抓住中心。宁精勿杂,宁专勿多。
  • 努力工作,要有计划,有重点,有条理。
  • 放弃不难,但坚持一定很酷!

整理这个又花了半个小时,上面中间两句来自周总理的“我的修养要则”,我觉得说得很好,我想做到,但是想着简单,做着难....... (>_<) 同志们,共勉!

【Web】支持纯静态的Layuimini版本的更多相关文章

  1. ffmpeg 纯静态编译,以及添加自定义库流程摘要

    需求:    1. 纯静态编译ffmpeg ,即ldd ./ffmpeg 的结果是:not a dynamic executable    2.  修改ffmpeg 项目,添加自定义功能库    3. ...

  2. 利用基于Go Lang的Hugo配合nginx来打造属于自己的纯静态博客系统

    Go lang无疑是目前的当红炸子鸡,极大地提高了后端编程的效率,同时有着极高的性能.借助Go语言我们 可以用同步的方式写出高并发的服务端软件,同时,Go语言也是云原生第一语言,Docker,Kube ...

  3. Flutter Web 支持现已进入稳定版

    作者 / Mariam Hasnany, Product Manager, Flutter 我们对 Flutter 的愿景是成为一个可移植的 UI 框架,在全平台上构建精美的应用体验.做为 Flutt ...

  4. 亲测VS2010纯静态编译QT4.8.0,实现VS2010编译调试Qt程序,QtCreator静态发布程序(图文并茂,非常详细)

    下载源代码,注意一定是源码压缩包如qt-everywhere-opensource-src-4.8.0.zip,不是Qt发布的已编译的不同版本的标准库如qt-win-opensource-4.8.0- ...

  5. Scala 的 Web 框架 Lift 开始 3.0 版本开发

    Scala 的 Web 框架 Lift 开始 3.0 版本开发 http://demo.liftweb.net/ http://liftweb.net/download Lift 框架在不断的成长和改 ...

  6. Springboot 系列(五)Spring Boot web 开发之静态资源和模版引擎

    前言 Spring Boot 天生的适合 web 应用开发,它可以快速的嵌入 Tomcat, Jetty 或 Netty 用于包含一个 HTTP 服务器.且开发十分简单,只需要引入 web 开发所需的 ...

  7. 利用hexo来配合nginx来打造属于自己的纯静态博客系统

    什么是静态网站生成器?顾名思义,就是以最快的速度生成一个高可用的web页面,我们知道Django作为一款非常流行的框架被广泛应用,但是部署起来实在是太麻烦了,各种命令各种配置,动态页面必然要涉及数据库 ...

  8. LAL v0.32.0发布,更好的支持纯视频流

    Go语言流媒体开源项目 LAL 今天发布了v0.32.0版本.距离上个版本刚好一个月时间,LAL 依然保持着高效迭代的状态. LAL 项目地址:https://github.com/q19120177 ...

  9. 通过ASP生成html纯静态页面的简单示例

    本站收录这篇文章通过ASP生成html纯静态页面的简单示例,详细解说文章中相关静态 asp 技术与知识,欢迎能给大家一些在这方面的支持和帮助!下面是详细内容: 原理:通过浏览器传送变量,如 http: ...

  10. 使用coding、daocloud和docker打造markdown纯静态博客

    说起独立博客的技术演变,从数据库到纯文本放git是一大进步,从HTML到markdown又是一大进步. 解析技术有没有进步呢?既然markdown是纯文本了,再用PHP/Python/Ruby去实时解 ...

随机推荐

  1. Solution Set -「NOIP Simu.」20221014

    \(\mathscr{A}\sim\)「Unknown」tothecrazyones   有 \(n\) 堆石子, 第 \(i\) 堆有 \(a_i\) 个. Alice 和 Bob 轮流抓取, Al ...

  2. Redis学习笔记之spring-data-redis

    一.关于spring-data-redis spring-data-redis针对jedis提供了如下功能: 连接池自动管理,提供了一个高度封装的"RedisTemplate"类 ...

  3. SpringBoot-整合Open Feign

    -------------------------------------------------- Spring Boot简单整合Open Feign一.使用Open Feign1.引入依赖2.添加 ...

  4. Linux常见问题合集

    Linux基本指令 连接SSH ssh uesrname@ip 例如:ssh root@192.168.43.217 Linux 创建多级目录命令: mkdir -p 示例:mkdir -p proj ...

  5. Paillier算法

    介绍 1999年欧密会上,首次提出Paillier算法,2001年,Damgard等人对该方案简化,推出当前最优的Paillier方案. 加密方案 Carmichael函数 困难问题 合数剩余类问题( ...

  6. 浅析IPV6单栈的优缺点

    本文分享自天翼云开发者社区<浅析IPV6单栈的优缺点>,作者:赵****越 IPv6单栈是一种仅使用IPv6协议栈的方案,与IPv4单栈相比,它具有更大的地址空间.更高的安全性和更好的隐私 ...

  7. Nityacke's 分块(未补全)

    P2801 教主的魔法 区间加区间查询一个数排名. 对于每个块,维护其有序序列.修改时散块暴力重构,整块打tag. 查询是简单的.时间复杂度 \(O(n\log B+\dfrac{qn}{B}\log ...

  8. manim边学边做--通用变换

    在 Manim 动画制作中,Transform.TransformFromCopy.ReplacementTransform和Restore是四个通用的对象变换动画类. 这几个类能够实现从一个对象到另 ...

  9. Git与Github远程仓库使用

    目录 连接远程仓库Github 配置git信息 生成key 添加Key 测试连通 Git基本了解 初级使用 初始化项目 建议修改编码显示 查看项目文件内容改动状态 修改好推送暂存区 提交本地版本库 推 ...

  10. 大数据之路Week10_day05 (Redis总结I)

    正文 1.为什么使用redis 分析:博主觉得在项目中使用redis,主要是从两个角度去考虑:性能和并发.当然,redis还具备可以做分布式锁等其他功能,但是如果只是为了分布式锁这些其他功能,完全还有 ...