主控制欄

主控制列是案頭系統和平板電腦上的矩形區域，其中包含eCatalog Search檢視器可用的所有使用者介面控制項（「大頁面」按鈕除外）。

在行動電話上，它仍會保留縮圖、目錄、下載、列印、我的最愛、社交分享、全螢幕和關閉按鈕。但是，「首頁」和「最後一頁」按鈕和「頁面指示器」會從主控制列中移除，並改為新增至次控制列。依預設，主控制列會顯示在案頭系統和行動電話的檢視器區域頂端，並移至平板電腦的檢視器區域底部。它一律會佔用整個可用檢視器寬度。您可以相對於檢視器容器，變更其在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屬性	說明
位置	設為 static 時，捲動功能會停用。將此屬性設定為絕對以啟用滾動功能。

捲動按鈕會新增至特殊容器元素，以正確定位按鈕，並讓您在捲動按鈕的高度小於控制列高度時，以不同方式設定按鈕周圍區域的樣式。

此捲動按鈕容器的外觀是透過下列CSS類別選擇器來控制：

.s7ecatalogsearchviewer .s7controlbar .s7scrollbuttoncontainer

CSS屬性	說明
width	通常應等於或大於捲動按鈕本身的寬度。
背景色	容器背景顏色。

您可以使用CSS來調整捲動按鈕的大小並設定其外觀。

此按鈕的外觀由下列CSS類別選擇器控制：

.s7ecatalogsearchviewer .s7controlbar .s7scrollleftrightbutton

CSS屬性	說明
寬度	按鈕寬度。
高度	按鈕高度。
背景影像	為指定按鈕狀態顯示的影像。
背景位置	如果使用CSS精靈，請放在圖稿精靈內。另請參閱 CSS精靈。

注意

此按鈕支援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); 
}