主控制條

主控制欄是案頭系統和平板電腦上的矩形區域，其中包含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屬性

說明

寬度

按鈕寬度。

高度

按鈕高度。

背景 — 影像

針對指定按鈕狀態顯示的影像。

背景位置

如果使用CSS精靈，則位於圖稿精靈內。

另請參閱 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);
}

本頁內容