我的位置：首页 › 大数据分析-亿信BI › BI-问题求助 › 导航树风格门户页头加收放按钮

导航树风格门户页头加收放按钮

复制链接 | 收藏本帖

5798

: 红颜为谁醉初学数据Lv2

发表于2018-6-29 09:31

悬赏1

已解决

楼主

在导航树风格门户页头和左树上加一个按钮，实现页头和左树部分的收起和展开。

最近看过此主题的会员

最佳答案

: CC化腐朽为神奇

发表于2018-6-29 09:31

丨

只看该作者

丨

取消关注该作者的回复

方法：Step1：调整左边树组件的宽度占比，给即将添加的左树收起按钮腾出位置

Step2：在树组件所在容器内层中添加图片组件image1，并设置对应的组件宽高、图片地址和鼠标单击脚本

脚本：
var layout = XGridLayout.getLayout(1), leftwidth = layout.getProperty("leftwidth");

if (leftwidth) {
layout.setProperty("leftwidth");
layout.setColWidth(0, leftwidth);
$p.$("guidetree").getDom().style.display = '';
this.src = "../../vfs/root/portals/pages/esp/SLBB/left.png";
layout.doLayout();
} else {
layout.setProperty("leftwidth", layout.getColWidth(0));
layout.setColWidth(0, 15);
$p.$("guidetree").getDom().style.display = 'none';
this.src = "../../vfs/root/portals/pages/esp/SLBB/right.png";
layout.doLayout();
}

脚本说明：蓝色字体部分分别是展开和收起时组件引用的图片路径，图片需提前上传到资源管理器中。
Step3：在布局内层cell_header下面新增容器内层，并设置固定高度

Step4:在新增的容器内层中添加图片组件image2，设置宽高、图片路径和鼠标单击脚本

脚本：
var layout = XGridLayout.getLayout(0), topheight = layout.getProperty("topheight");

if (topheight) {
layout.setProperty("topheight");
layout._property["heights"][0] = topheight;
this.src = "../../vfs/root/portals/pages/esp/SLBB/up_white.png";
layout.doLayout();
} else {
layout.setProperty("topheight", layout._property["heights"][0]);
layout._property["heights"][0] = 0;
this.src = "../../vfs/root/portals/pages/esp/SLBB/down_white.png";
layout.doLayout();
}

脚本说明：蓝色字体部分是展开时组件引用的图片路径，红色字体路径是收起时组件引用图片路径。图片需提前上传到资源管理器中。

Step5:xml中调整两个图片组件的位置左树图片按钮：
在门户的xml文件中搜索image1，在对应这行中添加变量top: 50%; 如下图

页头图片按钮：
在门户的xml文件中搜索image2，在image2的父节点cell1上添加变量： text-align: center; 如下图：

QQ空间微信

1个回答

只看楼主

: CC化腐朽为神奇数据达人Lv4

发表于2018-6-29 09:31

丨

只看该作者

丨

取消关注该作者的回复

沙发