主控制栏

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

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

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

.s7ecatalogsearchviewer .s7controlbar

CSS属性

说明

顶端

查看器顶部的位置。

底部

查看器底部的位置。

height

主控制栏的高度。

背景颜色

主控制栏的背景颜色。

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

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

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

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

.s7ecatalogsearchviewer .s7controlbar .s7innercontrolbarcontainer

CSS属性

说明

position

当设置为静态时,将禁用滚动功能。

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

滚动按钮将添加到特殊容器元素,该容器元素可正确放置按钮,并允许您在滚动按钮的高度小于控制栏高度时,以不同于控制栏背景的其他部分来设置按钮周围区域的样式。

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

CSS属性

说明

width

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

背景颜色

容器背景颜色。

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

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

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

CSS属性

说明

宽度

按钮宽度。

高度

按钮高度。

背景图像

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

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

此按钮支持stateselected属性选择器,它们可用于将不同的外观应用到不同的按钮状态。 具体而言,当可以将控制栏内容滚动到左侧时,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); 
}

在此页面上