DEMO解析第九期：门户

复制链接 | 收藏本帖

5778

楼主

一、门户的构成
1、恢复备份

1）创建门户

在【门户管理】中创建新门户，选择从空白页面创建一个id为“PCdemo”的门户：

2）恢复门户备份

将如下的zip文件在【文件】导航树根节点进行上传，zip压缩包无需解压。

2、门户组件介绍

该门户的样式基本上是用产品实现的，某些功能通过脚本实现。由于不同的模块有颜色和内容的区分，因此每个模块对应了一个门户页面。

每个门户的结构和功能相同，因此下面以领导驾驶舱门户页面为例做详细介绍：

1) 左侧菜单栏

左侧上部是本公司logo及所在模块的名称，此处为图片组件。鼠标悬浮于此会出现下拉框，可进行模块间的切换。

左侧中间是用户的登录名称和退出按钮，登录名称使用宏获取登录用户的信息：<#=login.name#>。退出按钮使用的是【链接】组件，注意需要设置背景图片和鼠标单击事件。

左侧下方是菜单栏，该菜单栏定制了高亮效果：左侧有一条白色的竖线。菜单栏使用的是【树】组件，脚本在事件中进行编辑和引用。

2) 功能按钮

在门户的右上角有3个功能按钮：返回导航，移动端下载，页面刷新。这三个功能按钮都是使用【链接】组件实现的。均添加了背景图片和鼠标悬停/移出的图片效果。

返回导航功能比较简单，直接将导航页的页面地址放在组件的链接地址中即可。

鼠标悬停在移动端下载按钮，会出现下拉框，该脚本添加在门户页面的事件中。

刷新按钮在鼠标单击事件中编辑刷新报表的脚本。

3) 报表展现区域

门户中间为报表展现区域，使用的是【子窗口】组件，其四个角为圆弧型的，是分别在四个角添加了简单面板组件实现的。

二、脚本说明
脚本1：门户页面脚本

此脚本中实现了三个功能：

1）左上角切换模块的下拉框

2）右上角移动端下载按钮的下拉框

3）门户的伸缩按钮功能

createSSImg();
var txt = queryObj("../../vfs/root/portals/pages/esp/PCdemo/nav_frag.txt?version=3");
$(txt).appendTo($p.$("image2").getDom().parentNode);
$p.$("image2").getDom().setAttribute("_t_nav","demolist");
$p.$("image2").getDom().style.cursor = "pointer";
$p.$("anchor1").getDom().setAttribute("_t_nav","qrcode");
var txt = queryObj("../../vfs/root/portals/pages/esp/PCdemo/qrcode_frag.txt?version=2");
$(txt).appendTo($p.$("anchor1").getDom().parentNode);
var qcloud = {};
$('[_t_nav]').hover(function () {
var _nav = $(this).attr('_t_nav');
clearTimeout(qcloud[_nav + '_timer']);
qcloud[_nav + '_timer'] = setTimeout(function () {
$('[_t_nav]').each(function () {
$(this)[_nav == $(this).attr('_t_nav') ? 'addClass' : 'removeClass']('nav-up-selected');
});
$('#' + _nav).stop(true, true).slideDown(200);
}, 150);
}, function () {
var _nav = $(this).attr('_t_nav');
clearTimeout(qcloud[_nav + '_timer']);
qcloud[_nav + '_timer'] = setTimeout(function () {
$('[_t_nav]').removeClass('nav-up-selected');
$('#' + _nav).stop(true, true).slideUp(200);
}, 150);
});
addStyleSheet(".slimScrollBar{display:block !important;}");

复制代码

注：【加载完成】中使用的函数在【自定义脚本】中进行定义。脚本中所引用的文件均在备份包中可查到。

脚本2：导航树脚本

导航树的样式脚本：

function(xtree,isEditStatus,widget){
addStyle(document, "../../vfs/root/portals/pages/esp/PCdemo/treeicon/1whitestyle.css?v=1");
if(!isEditStatus){
xtree.getBgContainer().style.overflowX='hidden';
}
}

复制代码

三、配色信息

背景：#292D3C

模块主题颜色

白色：#FFFFFF

蓝绿：#12B0B8

紫色：#5264DF

绿色：#00C47B

蓝色：#0072FF

四、资源文件