主控制欄

主控制列是案頭系統和平板電腦上的矩形區域,其中包含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精靈

注意

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

本頁內容

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now