侧边菜单栏的一种处理方式(新)
本帖最后由 willning 于 2022-8-15 15:35 编辑重要提示
活字格在V8.0中,活字格提供“设置行列布局命令”,通过设置特定列“可见/不可见”,可直接解决该问题
帮助文档
此外,“PC组件包——Element Plus”的EL-导航菜单,内建有折叠功能,也可直接解决该问题
下载 & 文档 效果展示
============以下为旧版本的解决方案,适用于V7.0 Update 1及更早期版本============
各位大佬, 不知道各位小伙伴在开发的过程中有没有过这样的烦恼。因为开发设备的不同,导致我们基本上只能按照720p的屏幕的像素点来进行设计,然后再设置双向拉伸来适配高分辨率的设备(如果按照高分屏开发,在低分辨率的屏幕上的体验极差),鉴于此,屏幕资源就显得额外的重要,每一个列表里面的字段我们都想尽可能的把宽度留宽一点,或者尽可能多的塞进多一些字段。但是,有很多系统为了操作方便,都会在母版页的左边放上一个菜单栏,就像这样:
这样咱们每一个页面就都损失了左边的一大块区域。于是借鉴其他网站的处理方式就是咱们把这个菜单栏隐藏起来,鼠标滑倒左边时呼出菜单,鼠标移出的时候隐藏菜单,设置好的效果就像这样:
在活字格中,做到这样的效果也不是很难,具体步骤如下:
1、在母版页中,在占位区的左边,划一块区域出来放置咱们的菜单,把菜单单元格的名字设置为"treebar",当然你也可以设置其他的名字。并把这些列设置为隐藏
2、在活字格设置页面,添加js文件/并且设定母版页和页面均水平拉伸(如果工程不设置拉伸,那么我认为屏幕也不会不够用)
js文件在工程附件中。
正常情况应该就可以了,如果有不适合自己的地方,可以在js文件中更改代码,代码注释如下:
//如果在页面中没有以treebar命名,那么要把这里所有的treebar改位你的命名。
setTimeout(treebarfct, 2000);//设置延时,建议不更改,第一次启动页面时需要等待2s才能呼出菜单
function treebarfct() {
$("").css("display", "block");
$("").css("z-index", "999");
$("").mouseleave(function () {
$("").animate({ left: "0px", width: "0px" }, 500);
});
var value = parseFloat($("").height());
var readmore = document.createElement('div');
readmore.setAttribute('id', 'toucharea');
readmore.style.width = "3px";//这里可以设置,数值越大,那么鼠标就不用那么靠近最左侧就可以呼出菜单
readmore.style.height = value+100+'px';
readmore.style.zIndex = '9';
readmore.style.position = "absolute";
readmore.style.display = "block";
readmore.style.left = '0px';
readmore.style.top = '0px';
readmore.style.background = 'rgba(5,15,55,0)';
readmore.onmouseover = function () {
$("").animate({ left: "0px", width: "200px" }, 500);
};
$("").after(readmore);
}
我谢老板还是我谢老板~没错 :hjyzw: :kiss: :hjyzw::hjyzw: 感谢支持~! 哇。。。正好需要这个 哇。。。正好需要这个 谢厅威武 :):):):)
页:
[1]
2