html主页框架，前端首页通用架构，layui主页架构框架，首页框架模板
html主页框架
- 前言
- 功能说明
- 效果
- 使用
- 初始化配置
- 菜单加载
- 主题修改回调
- 其他
- 非iframe页面内容使用方式
- iframe页面内容使用方式
前言
这是一个基于layui、jquery实现的html主页架构
平时写的系统后台可以直接套用此框架
由本人整合编写实现，简单上手，完全免费使用，代码放到gitee上面了
功能说明
- 兼容iframe和非iframe模式
- 兼容移动端模式，默认最小宽度1100开始
- 支持21种主题更换
- 可开启/关闭标签页，设定点击左侧菜单是否需要刷新当前页
- 以及页面显示动画效果自定义
- 标签页开启后，超出将会自动定位当前标签页位置，可操作左右切换显示标签页，可关闭其他、左 边、右边标签页，刷新当前
- 支持菜单搜索
效果
PC端效果
移动端效果
使用
使用简单，下载下来就可以用
兼容layui2.6.8版本，及以上版本
码云下载：https://gitee.com/yuanyongqiang/lay-menu
初始化配置
设置layui的版本号和一些参数，
默认是非iframe模式的，如果需要iframe模式则需要设置为true，
还有回调顶部、主题样式初始化设置等
configObj.init({scrollTop: true, // 回到顶部layui: '2.6.8', // 请根据使用版本修改此处//iframe: false, // 是否开启iframe容器//theme: {'theme': 0, 'page': false, 'refresh': false, 'anim': 2}, // 主题设置内容
});
菜单加载
参数一是容器，参数二是数据
configObj.showMenu(".lay-left-menu", data);
data数据格式如下：
[{"mid":101,"mname":"首页","url": "page/home.html","icon":"<i class='layui-icon'></i>","children":[]},{"mid":102,"mname":"用户管理","url": "page/user.html","icon":"<i class='layui-icon'></i>","children":[]},{"mid":103,"mname":"系统管理","url": "","icon":"<i class='layui-icon'></i>","children":[{"mid":10301,"mname":"角色管理","url": "page/role.html","icon":"<i class='layui-icon'></i>","children":[]},{"mid":10302,"mname":"结果页面","url": "","icon":"<i class='layui-icon'></i>","children":[{"mid":1030201,"mname":"成功页面","url": "page/success.html","icon":"<i class='layui-icon'></i>","children":[]},{"mid":1030202,"mname":"失败页面","url": "page/fail.html","icon":"<i class='layui-icon'></i>","children":[]}]}]}
]
主题修改回调
每次修改主题时就好触发这个回调操作
configObj.themeCallback = function(data){console.log('主题设置：', JSON.stringify(data));
}
以上就可以了，简简单单
其他
非iframe页面内容使用方式
每个页面不需要引入重复的文件
<meta charset="utf-8">
<style>.layui-fluid,.layui-card {padding: 15px;}
</style>
<div class="layui-fluid"><div class="layui-card"><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">单行输入框</label><div class="layui-input-block"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">验证必填项</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div>
</div>
<script type="text/javascript">form.render();// 当前模块对象var userObj = {select: function(){},add: function(){},edit: function(){},}// 添加调用//userObj.add();//...
</script>
iframe页面内容使用方式
需要每个页面都要引入重复的文件
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Layui</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="../layui/css/layui.css" media="all"><!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --></head><style>.layui-fluid,.layui-card {padding: 15px;}</style><body><div class="layui-fluid"><div class="layui-card"><form class="layui-form" action=""><div class="layui-form-item"><label class="layui-form-label">单行输入框</label><div class="layui-input-block"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">验证必填项</label><div class="layui-input-block"><input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button><button type="reset" class="layui-btn layui-btn-primary">重置</button></div></div></form></div></div><script src="../layui/layui.js" charset="utf-8"></script><script type="text/javascript">// 当前模块对象var userObj = {select: function() {},add: function() {},edit: function() {},}// 添加调用//userObj.add();//...</script></body></html>
相关文章：
html主页框架，前端首页通用架构，layui主页架构框架，首页框架模板
html主页框架 前言功能说明效果使用初始化配置菜单加载主题修改回调 其他非iframe页面内容使用方式iframe页面内容使用方式 前言 这是一个基于layui、jquery实现的html主页架构 平时写的系统后台可以直接套用此框架 由本人整合编写实现，简单上手，完全免…...
SDWAN厂家排名
随着网络技术的不断发展，SDWAN（软件定义广域网）作为一种新兴的网络架构，正在受到越来 越多企业的关注和采用。选择一家可靠的SDWAN厂家成为企业成功部署和管理SDWAN的关键。本文将从技术实力、客户口碑以及市场占有率三个方面&…...
【STM32】CRC（循环冗余校验)
一、CRC的背景知识 1、什么是CRC (1)CRC（Cyclic Redundancy Check），循环冗余校验 (2)什么是校验，为什么需要校验：数据传输，数据存储过程中需要使用到的 (3)什么是冗余：表示比实际上要传输的数据…...
04.webpack中css的压缩和抽离
1.抽离css文件 利用mini-css-extract-plugin插件，替代style-loader const MiniCssExtractPlugin require(mini-css-extract-plugin) module.exports smart(webpackCommonConf, {mode: production,output: {// filename: bundle.[contentHash:8].js, // 打包代码…...
Vue 3 和 Spring Boot 3 的操作流程和执行步骤详解
1.介绍 在本篇博客中，我们将详细介绍Vue 3 和 Spring Boot 3 的操作流程和执行步骤。Vue 3 是一款流行的前端框架，而Spring Boot 3 是一款广泛应用于后端开发的框架。通过结合使用这两个框架，我们可以构建出功能强大的全栈应用。 2.Vue 3 的操…...
获取所有非manager的员工emp_no
个人网站 文章首发于公众号小肖学数据分析 题目来自牛客网 描述 有一个员工表employees简况如下: emp_nobirth_datefirst_namelast_namegenderhire_date100011953-09-02GeorgiFacelloM1986-06-26100021964-06-02BezalelSimmelF1985-11-21100031959-12-03PartoBamfordM1986…...
STM32存储左右互搏 SPI总线FATS文件读写FLASH W25QXX
STM32存储左右互搏 SPI总线FATS文件读写FLASH W25QXX FLASH是常用的一种非易失存储单元，W25QXX系列Flash有不同容量的型号，如W25Q64的容量为64Mbit，也就是8MByte。这里介绍STM32CUBEIDE开发平台HAL库实现FATS文件操作W25Q各型号FLASH的例程。…...
Sentinel 熔断规则 (DegradeRule)
Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件，主要以流量为切入点，从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 SpringbootDubboNacos 集成 Sentinel&…...
嵌入式Linux开发面试题和答案
熟练的编程语言： 问：“您在嵌入式系统开发中熟练使用哪些编程语言？”答：在嵌入式系统开发中，我熟练使用C、C和Python等编程语言。C语言因其接近硬件的操作和效率而被广泛应用；C则在需要面向对象编程时提供了…...
Linux安装Mysql详细教程(两种安装方法)
Linux之Mysql安装配置 第一种：Linux离线安装Mysql（提前手动下载好tar.gz包）第二种：通过yum安装配置Mysql（服务器有网络） 第一种：tar.gz包安装 1、 查看是否已经安装 Mysql rpm -qa | grep m…...
用向量数据库Milvus Cloud搭建GPT大模型+私有知识库的定制商业文案助手
随着智能助手的不断普及和发展，商业文案的创作也变得更加智能化和定制化。在这个信息爆炸的时代，商业文案的撰写已经不再是简单的文字表达，而是需要结合大数据分析和人工智能技术，以更好地满足目标客群的需求。在本文中，我们将介绍如何利用向量数据库Milvus Cloud搭建GPT大…...
redis---非关系型数据库
关系数据库与非关系型数据库 redis非关系型数据库，又名缓存型数据库。数据库类型：关系型数据库和非关系型数据库关系型数据库是一 个机构化的数据库,行和列。 列：声明对象。 行：记录对象属性。 表与表之间的的关联。 sql语句&…...
Java WebSocket 获取客户端 IP 地址
在开发 Web 应用程序时，我们通常需要获取客户端的 IP 地址用于日志记录、身份验证、限制访问等操作。当使用 WebSocket 协议时，我们可以使用 Java WebSocket API 来获取客户端的 IP 地址。 本文将介绍如何使用 Java WebSocket API 获取客户端 IP 地址&a…...
【HarmonyOS】低代码平台组件拖拽使用技巧之页签容器
【关键字】 HarmonyOS、低代码平台、Tabs、TabContent、页签导航 1、写在前面 前面几篇分别介绍了低代码平台中的堆叠容器、滚动容器、网格布局等三种容器的使用，实际开发中我们经常会有这样的需求，页面底部是三个Tab按钮点击时会分别切换不同的视图内…...
Linux fork和vfork函数用法
fork和vfork是用于创建新进程的函数，在Linux的C语言编程中非常常见。 fork函数 fork函数是用于创建一个新的进程，新进程是调用进程的副本。新进程将包含调用进程的地址空间、文件描述符、栈和数据。在fork之后，父进程和子进程将并发执行。 …...
Oracle Data Redaction和Oracle Data Pump
本实验的使用环境基于之前的博客：一个简单的Oracle Redaction实验 本实验参考文档为15.14 Oracle Data Redaction and Oracle Data Pump 先创建directory并赋权： -- connect to database or pluggable database alter session set containerorclpdb1;…...
python django 小程序图书借阅源码
开发工具： PyCharm，mysql5.7，微信开发者工具 技术说明： python django html 小程序 功能介绍： 用户端： 登录注册（含授权登录） 首页显示搜索图书，轮播图࿰…...
CI/CD --git版本控制系统
目录 一、git简介 二、git使用 三、github远程代码仓库 一、git简介 Git特点： 速度简单的设计对非线性开发模式的强力支持（允许成千上万个并行开发的分支）完全分布式有能力高效管理类似 Linux 内核一样的超大规模项目（速度和数…...
CSS中2种复合选择器
1:交集选择器 作用：选中同时符合多个条件的元素 语法：选择器1选择器2选择器n{} 注意：若交集选择器中有元素选择器，必须使用元素选择器开头 2:并集选择器 作用：同时选择多个选择器对应的元素 语法：选择…...
【Skynet 入门实战练习】开发环境搭建 | 运行第一个项目 | debug console 简单使用
文章目录 写在前面开发环境搭建skynet配置文件项目，启动！ debug console 写在前面 本系列【Skynet 入门实战练习】所有源码同步：https://gitee.com/Cauchy_AQ/skynet_practice 开发环境搭建 skynet skynet 框架地址：https://g…...
如何快速解密RPG Maker加密文件：新手必看的完整解密指南
如何快速解密RPG Maker加密文件：新手必看的完整解密指南 【免费下载链接】RPGMakerDecrypter Tool for decrypting and extracting RPG Maker XP, VX and VX Ace encrypted archives and MV and MZ encrypted files. 项目地址: https://gitcode.com/gh_mirrors/rp…...
【实战复盘】Win11 23H2 微信图片拖拽至抖店失效：跨越注册表修复的降级排障SOP
一、 故障描述与初始环境故障现象：用户无法将微信聊天窗口内的图片，直接拖拽至“抖店工作台”聊天输入框中，系统表现为拖拽操作被拦截或无响应。故障环境：Windows 11 23H2 版本。前置历史：该故障电脑此前拖拽功能正常&…...
基于LLM与多智能体架构的科研文献检索系统设计与实现
1. 项目概述：当AI遇上科研，一场信息检索的革命如果你是一名科研工作者，或者正在为毕业论文、项目报告而焦头烂额，那你一定对“找文献”这件事深有体会。面对海量的学术数据库，输入关键词，得到成千上万篇论文…...
一滴血预警眼底病变！NFL 全程评估糖尿病视网膜病变
核心结论：本研究通过眼内液与血浆多组学联合分析，证实神经丝轻链（NFL）是可通过血浆微创检测、覆盖糖尿病视网膜病变全病程的保守生物标志物，能有效预测发病及糖尿病血管并发症风险。一、研究概况该研究发表于糖尿病领域…...
嵌入式实战：STM32智能温度控制系统的算法优化与工程实现
嵌入式实战：STM32智能温度控制系统的算法优化与工程实现 【免费下载链接】STM32 项目地址: https://gitcode.com/gh_mirrors/stm322/STM32 在工业自动化、医疗设备和智能家居领域，温度控制系统的精度和稳定性直接影响着设备性能和用户体验。传统…...
透明背景图片制作方法，一个小程序就能搞定！
最近，我被一个问题烦透了——每次需要制作透明背景图片时，总要在各种工具之间折腾半天。直到我发现了一个神器，才彻底改变了我的工作流程。今天，我就来分享一下我用过的所有透明背景图片制作方法，以及为什么我现在最常…...
Lindy AI Agent工作流编排进阶：从单Step到多Agent协同的6种拓扑模式（附拓扑决策树）
更多请点击： https://intelliparadigm.com 第一章：Lindy AI Agent工作流编排进阶：从单Step到多Agent协同的6种拓扑模式（附拓扑决策树） 在 Lindy 框架中，AI Agent 的工作流编排已超越传统线性 Step 链式调用…...
5大实战技巧：深度掌握PyQt6桌面应用开发
5大实战技巧：深度掌握PyQt6桌面应用开发 【免费下载链接】PyQt-Chinese-tutorial PyQt6中文教程 项目地址: https://gitcode.com/gh_mirrors/py/PyQt-Chinese-tutorial 在Python生态中，PyQt6作为最强大的GUI开发框架，为开发者提供了创…...
本地部署9B代码智能体：基于vLLM与CoPaw-Flash的实践与深度评估
1. 项目概述：在本地部署与评估一个9B参数的代码智能体最近在折腾一个挺有意思的项目，尝试在单张NVIDIA H100 GPU上，部署并评估一个名为CoPaw-Flash-9B的本地代码智能体。这个模型基于Qwen3.5-9B微调而来，专门针对自主智能体任务进…...
im2col算法实现：从原理到代码的逐行剖析
1. im2col算法原理揭秘 想象你正在整理一副扑克牌，需要把相邻的几张牌快速组合起来。im2col算法的核心思想与此类似——它将图像中相邻的像素区域重新排列成矩阵的列，从而将卷积运算转化为高效的矩阵乘法。这个"image to column"的转换过程&am…...