用html做一个通用的页面菜单栏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用html做一个通用的页面菜单栏相关的知识，希望对你有一定的参考价值。
用html做一个通用的页面菜单栏，就像淘宝的那个菜单栏，每个页面都一样的菜单栏，求思路，求代码，谢谢了，谢谢
要实现这个功能其实非常简单，下面的思路希望对你有用。步骤如下：一般WEB开发把页面分成3个模块：header.tpl content.tpl footer.tpl。head和footer一般都是固定不变的，唯一变化的部分是content。你说的菜单应该是header部分的导航部分。例如主页的代码可以这样写：
<html>
<head></head>
<body>
include file="head.tpl" <!-- 导航部分 -->
include file="content.tpl" <!-- 变化内容 -->
include file="footer.tpl" <!-- 版权内容 -->
</body>
</html>追问
这个好像只有JSP才能用吧？？HTML 能用么？？
追答跟JSP PHP语言没有关系, 和Smarty有关。
参考技术A 淘宝的用的应该是框架的，尽量不要用js去添加页面内容，很占资源的，放大效果的话，把一个页面都用js输出，就知道对加载速度的影响了。可以在一个页面做出来菜单栏，然后用框架(FRAME)。
我用的是.net，可以用母版页实现这个功能，html的话，用frame框架做比较好 参考技术B 看看iframe吧追问
您知道，吧iframe里面的层，弹出到引用他的层的最高位置吗？？？
就是我每个页面都引用它，它里面有个层，不管是哪个页面引用他，点击iframe里面的按钮弹出层后，这个层都显示在最高位置
引用过来后，被引用的页面弹层，只会在iframe这个框里面显示，不会再当前引用页面的最高层显示，求怎样让被引用页面弹层在，当前引用页面弹到最高层，而不是在iframe框里面显示
动态菜单栏
要求
根据接口数据动态设置菜单，层级层列都不确定。同时获取到菜单栏之后，每个栏位还需要单独二次请求接口获取栏位的数量。父节点数量需要前端处理，将所有子节点栏位加起来。
三个未知：
栏位未知，层级未知，详情页面未知。
问题
- 菜单栏层级列数都不确定，需要根据后端数据渲染，怎么处理？
这边需要用到组件递归。项目用的是element的el-menu。 - 菜单栏层级列数都不确定，每个栏位需要请求不同的接口获取数据，且要渲染到对应栏位展示。不确定的多层栏位怎么请求接口。
设置了一个变量，将菜单栏赋值。然后变量递归，根据获得的接口数据对变量参数进行修改。 - 且怎么更新多不确定的多层栏位的组件上？
对组件进行ref设置。递归组件的refs，依次强制更新。 - 点击菜单栏跳转不同详情页面，栏位数量未知那详情页面也位置，页面怎么处理才能实时根据不同菜单展示数据？
和后端确定，栏位信息设置type，且type相同需要跳转相同模版页面，根据携带的数据不同，页面展示不同数据。router-view使用keep-alive，将路由信息设置为key。这样路由信息不同页面会重新actived。再设置几套页面模板。根据type不同跳转不同模板进行页面渲染。 - 详情页面的信息都在菜单栏上，怎么在点击的时候能取得这些栏位信息。
可以放在路由meta上，点击菜单的时候动态设置meta。详情页进去的时候，钩子函数监听获取这些数据。 - 层级未知，父节点数量需要将所有子节点栏位加起来，怎么相加？
使用computed，传入你当前节点的数据，递归数据当前节点数据。这样可以计算你下面所有子节点的数量。
// index.vue 父组件 菜单栏部分
<template>
<el-menu :default-active="defalutActive" @select="menuSelect">
<el-menu-item class="gray" index="-1">
<span class="total">
总数：
<em>{{ totalCount || 0 }}</em>
</span>
</el-menu-item>
<deep-menu :menuData.sync="allNav" ref="deepMenu" />
</el-menu>
</template>
<script>
export default {
methods: {
//循环菜单栏获取数量
loadCount() {
let vue = this;
if (!vue.keyword) {
vue.loading;
return;
}
vue.loading = false;
this.totalCount = 0;
var allNav = JSON.parse(JSON.Stringify(this.allNav));
allNav.forEach((element, index) => {
deepArray(element);
});
//数组递归 请求接口获取数量
function deepArray(element) {
if (element.isShow !== 1) return;
if (element.children.length > 0) {
element.count = 0;
element.children.forEach((ele, idx) => {
deepArray(ele);
});
} else {
vue.getCount(element).then((count) => {
// 获取栏位数量之后更新组件，数量
element.count = count;
vue.totalCount += count;
vue.allNav = allNav;
vue.$refs.deepMenu.reload();
});
}
}
},
//请求url获取数量
getCount(ele) {
return new Promise((resolve, reject) => {
if (!ele.hasownProperty("countUrl") || !ele.countUrl) return;
commonAxios("post", "/search/" + ele.countUrl + "/count", {
keyword: this.keyword,
}).then((res) => {
if (res && res["intCode"] && res["intCode"] == "200") {
return resolve(Number(res["data"].total) || 0);
} else {
this.$message.error((res && res["message"]) || "数据获取失败!");
}
});
});
},
},
};
</script>// deep-menu.vue
<--
@Date:2021-08-2709:04:10
*@LastEditTime:2021-08-2715:12:29
@Description :智搜菜单栏深度嵌套
-->
<template>
<div>
<div v-for="(items, indexs) in menuData" :key="items.id">
<el-menu-item
v-if="(items.isShow = 1 && items.children.length == 0)"
:index="indexs + \'-\' + items.id"
>
<span slot="title">
{{items.name} }
<em class="fn-right">{{ menuCount(items) }} </em> //计算数量
</span>
</el-menu-item>
<el-submenu
v-else-if="items.isShow === 1 && items.children.length > 0"
:index="indexs + \'-\' + items.id"
>
<template slot="title">
<span>
{{ items.name }}
<em class="fn-right">{{ menuCount(items) }} </em>
</span>
</template>
<deep-menu
menuData.sync="items.children"
:ref="\'deepMenu-\' + items.id"
/>
</el-submenu>
</div>
</div>
</template>
<script>
export default {
name: "deepMenu",
props: {
menuData: {
type: Array | Object,
defalut: [],
},
},
computed: {
//计算该节点下面所有子节点的数量相加
menuCount() {
return function (element) {
let ls_return = 0;
deepAdd(element);
return ls_return;
function deepAdd(element) {
if (element.children.length > 0) {
element.children.forEach((ele) => {
deepAdd(ele);
});
} else {
ls_return += Number(element.count) || 0;
}
}
};
},
},
methods: {
reload() {
this.$forceUpdate();
deepUpdate(this.$refs);
function deepUpdate(element) {
if (Object.prototype.toString.call(element) == "[object Object]") {
for (let key in element) {
let ls_ref = element[key][0].$refs;
element[key][0].$forceUpdate();
if (Object.keys(ls_ref).length > e) {
element[key][e].$forceUpdate();
deepUpdate(ls_ref);
}
}
}
}
},
},
};
</script>以上是关于用html做一个通用的页面菜单栏的主要内容，如果未能解决你的问题，请参考以下文章
如何用java做出左侧是菜单栏,单击,右侧可进行页面切换的效果,求源代码