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

html主页框架

  • 前言
  • 功能说明
  • 效果
  • 使用
    • 初始化配置
    • 菜单加载
    • 主题修改回调
  • 其他
    • 非iframe页面内容使用方式
    • iframe页面内容使用方式

前言

这是一个基于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}, // 主题设置内容
});

菜单加载

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

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

data数据格式如下:

[{"mid":101,"mname":"首页","url": "page/home.html","icon":"<i class='layui-icon'>&#xe68e;</i>","children":[]},{"mid":102,"mname":"用户管理","url": "page/user.html","icon":"<i class='layui-icon'>&#xe66f;</i>","children":[]},{"mid":103,"mname":"系统管理","url": "","icon":"<i class='layui-icon'>&#xe716;</i>","children":[{"mid":10301,"mname":"角色管理","url": "page/role.html","icon":"<i class='layui-icon'>&#xe60a;</i>","children":[]},{"mid":10302,"mname":"结果页面","url": "","icon":"<i class='layui-icon'>&#xe60a;</i>","children":[{"mid":1030201,"mname":"成功页面","url": "page/success.html","icon":"<i class='layui-icon'>&#xe60a;</i>","children":[]},{"mid":1030202,"mname":"失败页面","url": "page/fail.html","icon":"<i class='layui-icon'>&#xe60a;</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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/149539.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

潮玩宇宙大逃杀游戏开发源码说明

潮玩宇宙大逃杀游戏是一款简单而刺激的游戏。玩家在倒计时结束前从8个房间中选择一个房间并投入宝石。倒计时结束后&#xff0c;系统会自动生成一个敌人&#xff0c;然后随机挑选一个房间并清除这个房间内的人。其余7个房间内的玩家就可以按照投入比例获得被清除掉玩家的宝石。…

接口测试基础与接口测试用例设计思路详解

接口测试简介 1.什么是接口 接口就是内部模块对模块&#xff0c;外部系统对其他服务提供的一种可调用或者连接的能力的标准&#xff0c;就好比usb接口&#xff0c;他是系统向外接提供的一种用于物理数据传输的一个接口&#xff0c;当然仅仅是一个接口是不能进行传输的&#x…

【数据结构】栈

1.58.33 栈 栈栈的概念及基本结构栈的存储栈的基本操作栈的置空初始化---StackInit()栈的初始化2.0---给栈开辟一点空间StackInit1()栈的销毁---StackDestory()入栈----StackPush()出栈----StackPop()获取栈中元素的数量---StackSize()判断栈是否为空---StackEmpty()获取栈顶元…

自动化测试系列 —— UI自动化测试

UI 测试是一种测试类型&#xff0c;也称为用户界面测试&#xff0c;通过该测试&#xff0c;我们检查应用程序的界面是否工作正常或是否存在任何妨碍用户行为且不符合书面规格的 BUG。了解用户将如何在用户和网站之间进行交互以执行 UI 测试至关重要&#xff0c;通过执行 UI 测试…

值得学习的演示文稿制作范例

1,在第一张幻灯片前插入1张新幻灯片,设置幻灯片大小为“全屏显示(16:9) ”;为整个演示文稿应用“离子会议室”主题,放映方式为“观众自行浏览”;除了标1题幻灯片外其它每张幻灯片中的页脚插入“晶泰来水晶吊坠”七个字。 2,第一张幻灯片的版式设置为“标题幻灯片”,主标题为“…

代码随想录算法训练营第二天|977.有序数组的平方 ,209.长度最小的子数组 ,59.螺旋矩阵II ,总结

977. 有序数组的平方 简单 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#xff1a;平方…

2311d模板替换运行时勾挂

原文 本周我完成了把_d_newarray{mTX,miTX,OpT}转换为单个模板的工作,并合并了PR这里. 它们分配并初化多维数组.与_d_newarray{U,T,iT}类似,_d_newaraym*现在由单个勾挂实现:_d_newarraymTX. 以前,用两个勾挂来区分默认初化和零初化类型._d_newarrayOpT是两个_d_newarraym{i,}T…

下载node-sass

先卸载node-sass npm uninstall node-sass重新下载node-sass,设置变量 sass_binary_site&#xff0c;指向淘宝镜像地址 npm i node-sass --sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/

面试笔记:你在开发中遇到过什么问题

持续更新~ java后端 mysql时差相差八小时。 tomcat的session有效时间只有两个小时。 tomcat的默认文件上传大小不大于1MB。 下载文件时文件名有特殊字符&#xff08;URL不支持的字符&#xff0c;空格&#xff0c;下划线等&#xff09;&#xff0c;文件名变成了请求地址的路…

外贸网站被谷歌收录的方法

在当今的数字化时代&#xff0c;拥有一个在线存在是任何企业或个人成功的关键。一个有效的网站不仅可以提供信息&#xff0c;还可以作为吸引潜在客户的强大工具。然而&#xff0c;如果网站没有被搜索引擎&#xff0c;如谷歌收录&#xff0c;那么它的价值将大打折扣。以下是一些…

含免费次数的常用API接口

银行卡三要素&#xff1a;检测输入的姓名、身份证号码、银行卡号是否一致。毫秒级响应、直联保障&#xff0c;支持全国所有银联卡 。运营商三要素 API&#xff1a;输入姓名、身份证号码、手机号码&#xff0c;验证此三种信息是否一致&#xff0c;返回验证结果、手机归属地、运营…

Python算法——树的镜像

Python中的树的镜像算法详解 树的镜像是指将树的每个节点的左右子树交换&#xff0c;得到一棵新的树。在本文中&#xff0c;我们将深入讨论如何实现树的镜像算法&#xff0c;提供Python代码实现&#xff0c;并详细说明算法的原理和步骤。 树的镜像算法 树的镜像可以通过递归…

hive数据库delete删除部分数据/删除分区内的数据

Hive delete 删除部分数据 一、hive删除数据1.1、删除整个表1.2、删除表中的特定行1.3、删除表中的特定分区1.4、删除分区内的部分数据1.5、清空表中的所有数据 二、扩展2.1、dynamic partition on Crud si not disabled, please set hive.crud.dynamic.partitiontrue to enabl…

音视频技术在手机上的应用与挑战

// 编者按&#xff1a;随着手机相机功能日益强大&#xff0c;4k&#xff0c;8k&#xff0c;各类特色短视频的拍摄&#xff0c;编辑、播放需求日益增长&#xff0c;短视频应用的火爆也对当前的手机音视频技术提出了更高的要求&#xff0c;如何更好地提高用户体验成为了行业共同…

蓝桥杯 大小写转换

islower/isupper函数 islower和issupper是C标准库中的字符分类函数&#xff0c;用于检查一个字符是否为小写字母或大写字母 需要头文件< cctype>,也可用万能头包含 函数的返回值为bool类型 char ch1A; char ch2b; //使用islower函数判断字符是否为小写字母 if(islower(…

SpringMVC 进阶

SpringMVC 进阶 一、拦截器 SpringMVC 中 Interceptor 拦截器的主要作⽤是拦截⽤⼾的请求并进⾏相应的处理。⽐如通过它来进⾏权限验证&#xff0c;或者是来判断⽤⼾是否登陆等操作。对于 SpringMVC 拦截器的定义⽅式有两种&#xff1a; 实现接⼝&#xff1a;org.springfram…

如何在3DMax中使用超过16个材质ID通道?

3DMAX效果通道扩展插件EffectsChannelEx教程 3DMax的材质ID通道允许我们生成渲染元素&#xff0c;这些元素可用于在合成或其他软件中产生处理或特殊效果。如对渲染或动画进行颜色校正。你可以在Photoshop中为你的静态3D渲染图像做这件事。或者使用After Effects、Blackmagic Fu…

git pull 报错 error object file is empty , The remote end hung up unexpectedly

报错原因分析&#xff1a;git pull的时候服务器在重启&#xff0c;导致git文件损坏 方法来源&#xff1a; 解决git错误: error object file is empty , The remote end hung up unexpectedly-CSDN博客 亲测有效 find .git/objects/ -type f -empty | xargs rm git fetch -p…

做外贸这么久,为什么一直做不好?

很多外贸业务员在开发客户过程中&#xff0c;总感觉自己做了很多事情&#xff0c;聊了很多客户&#xff0c;但却总是拿不到单子。 其实&#xff0c;这是由于缺乏对采购商心理的认识程度&#xff0c;没有换位思考&#xff0c;该做的事没做&#xff0c;不该做的事却忙得忘乎所以&…

day60

choice参数 1.引入 以一张信息表为例 性别 学历 工作经验 是否婚配 是否生子 客户来源 ... 针对某个可以列举完全的可能性字段&#xff0c;我们应该如何存储 只要某个字段的可能性时列举完全的&#xff0c;那么一般情况下都会采用choice参数 2.数据准备 from random imp…