主控制栏 main-control-bar
主控件栏是桌面系统和平板电脑上的矩形区域，其中包含所有可用于eCatalog搜索查看器的用户界面控件（大页面按钮除外）。
在手机上，它仍保留缩略图、目录、下载、打印、收藏夹、社交共享、全屏和关闭按钮。 但是，“第一页”、“最后一页”按钮和“页面指示器”从主控制栏中删除，并添加到辅助控制栏。 默认情况下，主控制栏显示在桌面系统和手机上的查看器区域顶部，并移动到平板电脑上的查看器区域底部。 它始终采用整个可用查看器宽度。 可以更改它在CSS中的颜色、高度和垂直位置（相对于查看器容器）。
使用以下CSS类选择器控制主控件栏的外观：
.s7ecatalogsearchviewer .s7controlbar
示例 — 设置一个高度为36像素且位于查看器容器顶部的灰色主控件栏。
.s7ecatalogsearchviewer .s7controlbar {
top: 0px;
height: 36px;
background-color: rgba(0, 0, 0, 0.5);
}
主控制栏支持可选滚动功能。 如果查看器宽度太小，并且没有足够的空间来容纳控制栏中的所有按钮预设，则会激活该查看器。 在这种情况下，控制栏右侧会显示一个双状态箭头按钮。 单击或点按此按钮可将所有控件栏元素向左或向右滚动，具体取决于滚动按钮的状态。 此功能的主要用例是带有纵向小屏幕的移动设备。
在主控制栏上启用滚动功能，在辅助控制栏上禁用滚动功能。 可使用以下CSS类选择器打开和关闭该功能：
.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer
当设置为静态时，将禁用滚动功能。
将此属性设置为绝对以启用滚动功能。
将滚动按钮添加到特殊容器元素中，以正确放置按钮。 利用该面板，可在滚动按钮高度小于控制栏高度时，将按钮周围的区域样式与控制栏背景的其他区域样式不同。
此滚动按钮容器的外观由以下CSS类选择器控制：
.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer
您可以通过CSS调整滚动按钮本身的大小和外观。
此按钮的外观可通过以下CSS类选择器来控制：
.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton
如果使用CSS sprite，则定位在图稿sprite中。
另请参阅 CSS Sprite。
state和selected属性选择器，它们可用于将不同的外观应用于不同的按钮状态。 特别是，state="selected"对应于初始滚动按钮状态（当可以将控件栏内容向左滚动时）。 state="default"对应于内容一直向左滚动时的状态，滚动按钮建议将其恢复到初始状态。按钮工具提示可以本地化。 有关详细信息，请参阅用户界面元素的本地化。
示例 — 在移动电话的主控件栏中启用滚动功能。 并且，设置一个64 x 64像素的滚动按钮，当选中或未选中时，该按钮会为4种不同的按钮状态中的每种状态显示不同的图像：
.s7ecatalogsearchviewer.s7size_small .s7controlbar .s7innercontrolbarcontainer {
position: absolute;
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollbuttoncontainer {
width:64px;
background-color: rgb(0, 0, 0);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton {
width:64px;
height:64px;
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='up'] {
background-image:url(images/v2/ControlBarLeftButton_dark_up_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='over'] {
background-image:url(images/v2/ControlBarLeftButton_dark_over_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='down'] {
background-image:url(images/v2/ControlBarLeftButton_dark_down_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='true'][state='disabled'] {
background-image:url(images/v2/ControlBarLeftButton_dark_disabled_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='up'] {
background-image:url(images/v2/ControlBarRightButton_dark_up_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='over'] {
background-image:url(images/v2/ControlBarRightButton_dark_over_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='down'] {
background-image:url(images/v2/ControlBarRightButton_dark_down_touch.png);
}
.s7ecatalogsearchviewer.s7size_small.s7touchinput .s7controlbar .s7scrollleftrightbutton[selected='false'][state='disabled'] {
background-image:url(images/v2/ControlBarRightButton_dark_disabled_touch.png);
}