• html主页框架，前端首页通用架构，layui主页架构框架，首页框架模板

    html主页框架

    前言

    这是一个基于layui、jquery实现的html主页架构
    平时写的系统后台可以直接套用此框架
    由本人整合编写实现，简单上手，完全免费使用，代码放到gitee上面了

    功能说明

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

    效果

    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}, // 主题设置内容
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    菜单加载

    参数一是容器，参数二是数据

    configObj.showMenu(".lay-left-menu", data);

    • 1

    data数据格式如下：

    [
	{
		"mid":101,
		"mname":"首页",
		"url": "page/home.html",
		"icon":"",
		"children":[]
	},{
		"mid":102,
		"mname":"用户管理",
		"url": "page/user.html",
		"icon":"",
		"children":[]
	},{
		"mid":103,
		"mname":"系统管理",
		"url": "",
		"icon":"",
		"children":[
			{
				"mid":10301,
				"mname":"角色管理",
				"url": "page/role.html",
				"icon":"",
				"children":[]
			},{
				"mid":10302,
				"mname":"结果页面",
				"url": "",
				"icon":"",
				"children":[
						{
						"mid":1030201,
						"mname":"成功页面",
						"url": "page/success.html",
						"icon":"",
						"children":[]
					},{
						"mid":1030202,
						"mname":"失败页面",
						"url": "page/fail.html",
						"icon":"",
						"children":[]
					}
				]
			}
		]
	}
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49

    主题修改回调

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

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

    • 1
    • 2
    • 3

    以上就可以了，简简单单

    其他

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    iframe页面内容使用方式

    需要每个页面都要引入重复的文件

    DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Layuititle>
		<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">
		
	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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
  • 相关阅读:
    服务器就是一台电脑吗？服务器的功能和作用
    从原理总结chatGPT的Prompt的方法
    Springboot自定义缓存配置 CacheManager集成redis
    【我的C/C++语言学习进阶之旅】JNI开发之转换C层返回的结构体为Java实体Bean
    oracle的序列和触发器
    美容美发美甲业收银系统源码演示-服务卡项常见问题解答分享
    个微多账号聚合聊天管理如何实现？
    LeetCode-698. 划分为k个相等的子集【数组，回溯】
    怎么检测一个线程是否拥有锁？
    Golang 企业级web后端框架
  • 原文地址：https://blog.csdn.net/weixin_43992507/article/details/134506052