主控制栏

上次更新: 2023-11-04
  • 创建对象:
  • Developer
    User

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

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

使用以下CSS类选择器控制主控件栏的外观:

.s7ecatalogviewer .s7controlbar

CSS属性

说明

顶端

位于查看器顶部。

底部

位于查看器底部。

height

主控制栏的高度。

background-color

主控件栏的背景颜色。

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

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

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

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

.s7ecatalogviewer .s7controlbar .s7innercontrolbarcontainer

CSS属性

说明

位置

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

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

将滚动按钮添加到特殊容器元素中,以正确放置按钮。 利用该面板,可在滚动按钮高度小于控制栏高度时,将按钮周围的区域样式与控制栏背景的其他区域样式不同。

此滚动按钮容器的外观由以下CSS类选择器控制:

.s7ecatalogviewer .s7controlbar .s7scrollbuttoncontainer

CSS属性

说明

width

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

background-color

容器背景颜色。

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

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

.s7ecatalogviewer .s7controlbar .s7scrollleftrightbutton

CSS属性

说明

width

按钮的宽度。

height

按钮的高度。

background-image

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

background-position

如果使用CSS sprite,则定位在图稿sprite中。

另请参阅 CSS脚本 .

注意

此按钮支持 stateselected 属性选择器,可用于将不同的外观应用于不同的按钮状态。 特别是, 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);
}

在此页面上