功能

OutlookBar不仅可以作为一个菜单组件使用，还可以作为一个布局管理器的组件使用，使用效果如下图:

图表 134 菜单

图表 135 布局管理器

使用

一.作为菜单使用
1.定义菜单Menu
2.设定OutlookBar的menu属性

属性说明

属性	说明
animated	Group切换的时候是否提供滑动的轨迹
currentGroup	默认自动定位的group名称
menu	绑定的菜单对象

二．作为布局管理器使用
JSP中添加如下代码:

<d:OutlookBar id="outlookbar1">
<d:OutlookBarGroup name="group1" label="第一个组" />
</d:OutlookBar>

将组件标签添加到OutlookBarGroup组件标签的内部，改写好之后的代码如下:

<d:OutlookBar id="outlookbar1">
<d:OutlookBarGroup name="group1" label="第一个组">
<d:Tree id="tree1" />
</d:OutlookBarGroup>
<d:OutlookBarGroup name="group2" label="第二个组" padding="12">
<d:AutoForm id="formEmployee" />
</d:OutlookBarGroup>
<d:OutlookBarGroup name="group3" label="第三个组" padding="12">
<d:Calendar id="calendar1" />
</d:OutlookBarGroup>
<d:OutlookBarGroup name="group4" label="第四个组">
<div style="width: 100%; height: 100%; background-color: #FFDDFF"></div>
</d:OutlookBarGroup>
<d:OutlookBarGroup name="group5" label="第五个组">
<div style="width: 100%; height: 100%; background-color: #FFFFB3"></div>
</d:OutlookBarGroup>
<d:OutlookBarGroup name="group6" label="第六个组">
<div style="width: 100%; height: 100%; background-color: #CCFFFF"></div>
</d:OutlookBarGroup>
</d:OutlookBar>

其中OutlookBarGroup的属性说明:

属性	说明
disabled	是否禁止组的操作
icon	组使用图标的资源url
label	组的显示标题
name	组的名称,不要使用中文或特殊字符命名
padding	边框的分割距离
visible	是否隐藏

标签属性列表

css说明

你可以根据具体的需要在的你的工程目录home\smartweb\v2\skins\default\skin.css文件中修改关于OutlookBar的css属性
例如要改变OutlookBar 中鼠标悬停某个按钮时按钮边框的宽度，我们只需修改OutlookBar .HotButton中border-width的数值大小即可

.OutlookBar .HotButton {
background-color: #DDEDF9;
border-width: 1;
border-color: #7BB9E6;
border-style: solid;
padding: 2;
cursor: hand;
}

.OutlookBar {
border-width: 1;
border-color: #C0C0C0;
border-style: solid;
border-collapse: collapse;
}

.OutlookBar .Button {
border-width: 1;
border-color: #C0C0C0;
border-style: solid;
padding: 2;
cursor: hand;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DDDDDD);
}

.OutlookBar .DisabledButton {
color: gray;
border-width: 1;
border-color: #C0C0C0;
border-style: solid;
padding: 2;
cursor: hand;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#DDDDDD);
}

.OutlookBar .HotButton {
background-color: #FFFFFF;
border-width: 12;
border-color: #7BB9E6;
border-style: solid;
padding: 2;
cursor: hand;
}

.OutlookBar .ScrollButton {
cursor: hand;
padding: 1;
border-width: 1;
border-color: #CCCCCC;
border-style: solid;
background-color: white;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
-moz-opacity: 0.8;
}

.OutlookBar .Group {
}

.OutlookBar .IconGroup {
background-color: #EDF2F6;
}

.OutlookBar .IconGroup .SubButton {
padding: 4;
margin: 1;
}

.OutlookBar .IconGroup .SubButton_Disabled {
padding: 4;
margin: 1;
}

.OutlookBar .IconGroup .SubButton_Disabled TD {
color: gray;
}

.OutlookBar .IconGroup .HotSubButton {
padding: 4;
margin: 0;
background-color: #DDEDF9;
border-width: 1;
border-color: #7BB9E6;
border-style: solid;
}

.OutlookBar .IconGroup .SubIcon {
}

.OutlookBar .IconGroup .SubLabel {
padding: 2;
}

.OutlookBar .ListGroup {
background-color: #EDF2F6;
}

.OutlookBar .ListGroup .SubButton {
margin: 1;
}

.OutlookBar .ListGroup .SubButton_Disabled {
margin: 1;
}

.OutlookBar .ListGroup .SubButton_Disabled TD {
color: gray;
}

.OutlookBar .ListGroup .HotSubButton {
margin: 0;
background-color: #DDEDF9;
border-width: 1;
border-color: #7BB9E6;
border-style: solid;
}

.OutlookBar .ListGroup .SubIcon {
}

.OutlookBar .ListGroup .SubLabel {
padding: 4;
white-space: nowrap;
}

Class名称	说明
OutlookBar	OutlookBar默认风格设定
OutlookBar .Button	OutlookBar 按钮（Button）默认风格设定
OutlookBar .DisabledButton .OutlookBar .HotButton	OutlookBar按钮被禁止使用时的默认风格设定当鼠标悬停在按钮上，Button的默认风格设定
.OutlookBar .ScrollButton	？？？？？？？
.OutlookBar .IconGroup	MenuItem有图标时的默认风格设定
.OutlookBar .IconGroup .SubButton	MenuItem有图标时，菜单按钮可用时的默认风格设定
.OutlookBar .IconGroup .SubButton_Disabled	MenuItem有图标时，菜单按钮不可用时的默认风格设定
.OutlookBar .IconGroup .SubButton_Disabled TD	MenuItem有图标时，菜单按钮不可用时， OutlookBar的Table布局中菜单按钮所在TD区域的皮肤设定
.OutlookBar .IconGroup .HotSubButton	MenuItem有图标时，具有热点的菜单按钮的默认风格设定。
.OutlookBar .IconGroup .SubLabel	MenuItem有图标时，label的默认风格设定，见图OutlookBar-1
.OutlookBar .ListGroup	MenuItem无图标时的默认风格设定，见图OutlookBar-2
.OutlookBar .ListGroup .SubButton	MenuItem无图标时，菜单按钮可用时的默认风格设定，见图OutlookBar-3
.OutlookBar .ListGroup .SubButton_Disabled	MenuItem无图标时，菜单按钮不可用时的默认风格设定，见图OutlookBar-4
.OutlookBar .ListGroup .SubButton_Disabled TD	MenuItem无图标时，菜单按钮不可用时，OutlookBar的Table布局中菜单按钮所在TD区域的皮肤设定
.OutlookBar .ListGroup .HotSubButton	MenuItem无图标时，具有热点的菜单按钮的默认风格设定。
.OutlookBar .ListGroup .SubIcon
.OutlookBar .ListGroup .SubLabel	MenuItem有图标时，label的默认风格设定

Dorado 5 : 2.5.3.OutlookBar (RF2)

功能

使用

属性说明

标签属性列表

css说明

Attachments: