layMenu后台框架，html主页框架，前端UI框架，后台首页框架，layui主页架构框架，系统后台框架模板-CSDN博客

本文链接：https://blog.csdn.net/weixin_43992507/article/details/134506052

html主页框架

前言
功能说明
效果
使用（三步搞定）
其他
- 非iframe页面内容使用方式
- iframe页面内容使用方式

前言

layMenu后台框架是一个基于layui、jquery实现的html主页架构
平时写的系统后台可以直接套用此框架
已经封装好了直接调用方法即可，简单上手，完全免费使用，代码放到gitee上面了

功能说明

兼容iframe和非iframe模式
兼容移动端模式，默认最小宽度1100开始
支持21种主题更换
可开启/关闭标签页，设定点击左侧菜单是否需要刷新当前页
以及页面显示动画效果自定义
标签页开启后，超出将会自动定位当前标签页位置，可操作左右切换显示标签页，可关闭其他、左边、右边标签页，刷新当前
支持菜单搜索
自定义左侧式菜单、头部式菜单、头部与左侧式菜单
自定义logo是否固定

效果

PC端效果

左侧式菜单

在这里插入图片描述

头部式菜单

在这里插入图片描述

头部与左侧式混合菜单

在这里插入图片描述

移动端

在这里插入图片描述

使用（三步搞定）

使用简单，下载下来就可以用
兼容layui2.6.8版本，及以上版本
码云下载：https://gitee.com/yuanyongqiang/lay-menu

一、初始化配置

设置layui的版本号和一些参数，
默认是非iframe模式的，如果需要iframe模式则需要设置为true，
还有回调顶部、主题样式初始化设置等

// 初始化配置
configObj.init({
	scrollTop: true, // 回到顶部
	layui: '2.6.8', // 请根据使用版本修改此处（必须三位数）
	//iframe: true, // 是否开启iframe模式
	//theme: {'theme': 16, 'menu': 2, 'page': true, 'logo': false, 'refresh': false, 'radius': true, 'anim': 2}, // 主题设置内容
});

二、菜单加载

data是菜单数据

configObj.loadMenu(data);

data数据格式如下：

[
	{
		"mid":101,
		"mname":"首页",
		"url": "page/home.html",
		"icon":"<i class='layui-icon lay-icon'>&#xe68e;</i>",
		"children":[]
	},{
		"mid":102,
		"mname":"用户管理",
		"url": "page/user.html",
		"icon":"<i class='layui-icon lay-icon'>&#xe66f;</i>",
		"children":[]
	},{
		"mid":103,
		"mname":"系统管理",
		"url": "",
		"icon":"<i class='layui-icon lay-icon'>&#xe716;</i>",
		"children":[
			{
				"mid":10301,
				"mname":"角色管理",
				"url": "page/role.html",
				"icon":"<i class='layui-icon lay-icon'>&#xe60a;</i>",
				"children":[]
			},{
				"mid":10302,
				"mname":"结果页面",
				"url": "",
				"icon":"<i class='layui-icon lay-icon'>&#xe60a;</i>",
				"children":[
						{
						"mid":1030201,
						"mname":"成功页面",
						"url": "page/success.html",
						"icon":"<i class='layui-icon lay-icon'>&#xe60a;</i>",
						"children":[]
					},{
						"mid":1030202,
						"mname":"失败页面",
						"url": "page/fail.html",
						"icon":"<i class='layui-icon lay-icon'>&#xe60a;</i>",
						"children":[]
					}
				]
			}
		]
	},{
		"mid":104,
		"mname":"Layui 新官网",
		"url": "https://layui.dev/",
		"urlType": 1, // 外部链接
		"icon":"<i class='layui-icon lay-icon'>&#xe609;</i>",
		"children":[]
	}
]

三、主题修改回调

每次修改主题时就会触发这个回调操作

configObj.themeCallback = function(data){
	console.log('主题设置：', JSON.stringify(data));
}

跳转页面/切换标签页

非iframe下使用方式

configObj.setTabUrl({
    mid: 100001,
    url: 'page/xxx.html',
    mname: '某某菜单',
})

iframe下使用方式

window.parent.configObj.setTabUrl({
    mid: 100001,
    url: 'page/xxx.html',
    mname: '某某菜单',
})

以上就可以了，简简单单

其他

菜单页面使用方式例子（只是建议）

非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>