主控制栏

主控制栏是桌面系统和平板电脑上的矩形区域，其中包含eCatalog查看器可用的所有用户界面控件（“大页面”按钮除外）。

在移动电话上，它仍保留“缩略图”、“目录”、“下载”、“打印”、“收藏夹”、“社交共享”、“全屏”和“关闭”按钮。 但是，“第一页”和“最后一页”按钮以及“页面指示器”将从主控制栏中删除，并改为添加到辅助控制栏。 默认情况下，主控制栏显示在桌面系统和手机上的查看器区域顶部，并移至平板电脑上的查看器区域底部。 它始终采用整个可用的查看器宽度。 可以相对于查看器容器更改其在CSS中的颜色、高度和垂直位置。

主控制栏的外观由以下CSS类选择器控制：

.s7ecatalogviewer .s7controlbar

CSS属性

说明

顶端

查看器顶部的位置。

底部

查看器底部的位置。

height

主控制栏的高度。

背景颜色

主控制栏的背景颜色。

示例 — 设置一个高度为36像素且位于查看器容器顶部的灰色主控制栏。

.s7ecatalogviewer .s7controlbar {
 top: 0px;
 height: 36px;
 background-color: rgba(0, 0, 0, 0.5);
}

主控制栏支持可选的滚动功能。 如果查看器宽度太小，并且没有足够的空间来容纳控制栏中预设的所有按钮，则会激活该按钮。 在这种情况下，控制栏的右侧会显示一个两状态箭头按钮。 单击或点按此按钮可根据滚动按钮状态将所有控制栏元素滚动到左侧或右侧。 此功能的主要用例是纵向小屏幕的移动设备。

主控制栏已启用滚动功能，辅助控制栏已禁用滚动功能。 可使用以下CSS类选择器打开和关闭该功能：

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

CSS属性

说明

position

当设置为 静态 已禁用滚动功能。

将此属性设置为 绝对 以启用滚动功能。

滚动按钮将添加到可正确放置按钮的特殊容器元素中。 如果滚动按钮的高度小于控制栏高度，则允许您以不同方式设置按钮周围区域与控制栏背景的其余部分。

通过以下CSS类选择器控制此滚动按钮容器的外观：

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

CSS属性

说明

width

通常应等于或大于滚动按钮本身的宽度。

背景颜色

容器背景颜色。

您可以通过CSS来调整滚动按钮本身的大小和外观。

通过以下CSS类选择器控制此按钮的外观：

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

CSS属性

说明

宽度

按钮宽度。

高度

按钮高度。

背景图像

为给定按钮状态显示的图像。

背景位置

在图稿Sprite中放置（如果使用CSS Sprite）。

另请参阅 CSS Sprite .

注意

此按钮支持 state 和 selected 属性选择器，可用于将不同的外观应用于不同的按钮状态。 特别是， state="selected" 当可以将控制栏内容滚动到左侧时，对应于初始滚动按钮状态。 属性 state="default" 对应于内容一直向左滚动且滚动按钮建议将其返回到初始状态的状态。

按钮工具提示可进行本地化。 请参阅 用户界面元素的本地化 以了解更多信息。

示例 — 在手机的主控制栏中启用滚动功能。 此外，还应设置一个64 x 64像素的滚动按钮，该按钮在选择或未选择时，会针对4个不同按钮状态中的每个状态显示不同的图像：

.s7ecatalogviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
 position: absolute;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
 width:64px;
 background-color: rgb(0, 0, 0);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
 width:64px;
 height:64px;
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
 background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
 background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
 background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
 background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
 background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}

在此页面上