內嵌共用 | Adobe Experience Manager

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主題：

建立對象：

開發人員
使用者

內嵌共用工具包含新增至Social共用面板的按鈕，以及啟動工具時顯示的模型對話方塊。按鈕的位置可完全由社交分享工具管理。

內嵌共用按鈕的外觀是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7embedshare

內嵌共用工具的 CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

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

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

您可以在其CSS類別上設定display:none CSS屬性，以從Social共用面板移除按鈕。

按鈕工具提示可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定28 x 28畫素的內嵌「共用」按鈕，並針對四種不同按鈕狀態分別顯示不同影像：

.s7ecatalogsearchviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

當對話方塊作用中時，覆蓋網頁的背景覆蓋圖會使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

背景覆蓋的 CSS屬性

不透明度

背景覆蓋不透明度。

背景色彩

背景覆蓋顏色。

範例 — 若要將背景覆蓋設定為具有70%不透明度的灰色：

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

依預設，強制回應對話方塊會以案頭系統熒幕的中心顯示，並會使用觸控裝置上的整個網頁區域。在所有情況下，對話方塊的定位與大小都由元件管理。此對話方塊是使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

對話方塊的 CSS屬性

邊框半徑

對話方塊邊框半徑（如果對話方塊未取用整個瀏覽器）。

背景色彩

對話方塊背景顏色。

寬度

應取消設定或設為100%，此時對話方塊會取用整個瀏覽器視窗（觸控裝置偏好此模式）。

高度

應取消設定或設為100%，此時對話方塊會取用整個瀏覽器視窗（觸控裝置偏好此模式）。

範例 — 若要設定對話方塊以使用整個瀏覽器視窗並在觸控裝置上擁有白色背景：

.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

對話方塊標題由圖示、標題文字和關閉按鈕組成。標題容器的控制方式

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

對話方塊標頭的 CSS屬性

內距

標頭內容的內部內距。

圖示和標題文字會包裝進由控制的額外容器中

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

對話方塊行的 CSS屬性

內距

頁首圖示和標題的內部邊框間距

標題圖示由下列CSS類別選取器控制

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

對話方塊標頭圖示的CSS屬性

寬度

圖示寬度。

高度

圖示高度。

背景影像

圖示影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

標題標題由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

對話方塊標頭文字的CSS屬性

字型粗細

字型粗細。

字型大小

字型高度。

字型系列

字型系列。

內距

內部文字內距。

使用下列CSS類別選取器來控制「關閉」按鈕：

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

關閉按鈕的 CSS屬性

前

相對於頁首容器的垂直按鈕位置。

右

相對於頁首容器的水準按鈕位置。

寬度

按鈕寬度。

高度

按鈕高度。

內距

按鈕的內部內距。

背景影像

每個狀態的按鈕影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

按鈕工具提示可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定包含填補的對話方塊標題，請以24 x 14畫素圖示及粗體16點標題顯示。最後，還有28 x 28畫素的「關閉」按鈕，從上方放置兩個畫素，從對話方塊容器右側放置兩個畫素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

對話方塊頁尾包含「取消」按鈕。頁尾容器由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

對話方塊頁尾的 CSS屬性

邊框

可用來視覺化區分頁尾與對話方塊其餘部分的框線。

頁尾有一個內部容器，可保留按鈕。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

對話方塊按鈕容器的CSS屬性

內距

頁尾與按鈕之間的內邊距。

全選按鈕由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

此按鈕僅在桌上型電腦系統上可用。

[全選]按鈕的 CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

色彩

每個狀態的按鈕文字顏色。

背景色彩

每個狀態的按鈕背景顏色。

NOTE

全選按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

使用下列CSS類別選取器來控制「取消」按鈕：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

對話方塊取消按鈕的 CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

色彩

每個狀態的按鈕文字顏色。

背景色彩

每個狀態的按鈕背景顏色。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

此外，這兩個按鈕共用共用的CSS類別可包含與其他對話方塊按鈕相同的CSS設定：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

按鈕的 CSS屬性

字型粗細

按鈕字型粗細。

字型大小

按鈕字型大小。

字型系列

按鈕字型系列。

行高

按鈕內的文字高度。影響垂直對齊。

方塊陰影

陰影。

右邊界

右側按鈕邊界。

按鈕工具提示可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定具有64 x 34 「取消」按鈕、82 x 34 「全部選取」按鈕，且每個按鈕狀態的文字顏色和背景顏色不同的對話方塊頁尾：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

主要對話方塊區域位於頁首和頁尾之間，右側包含可捲動對話方塊內容和捲動面板。在任何情況下，元件都會管理此區域的寬度，無法在CSS中進行設定。主要對話方塊區域可使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea

對話方塊檢視區域的 CSS屬性

高度

主要對話方塊區域的高度。只有在對話方塊在案頭模式中運作時，才應指定它。當對話方塊的大小設定為佔據整個瀏覽器視窗時，此選項不適用。

背景色彩

主要對話方塊區域的背景顏色。

利潤

外部邊界。

範例 — 若要將主要對話方塊區域設定為300畫素高度、有10畫素邊界，並使用白色背景：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

所有表單內容（例如標籤和輸入欄位）都位於由以下CSS類別選取器控制的容器內：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody

如果此容器的高度似乎大於主對話方塊區域，元件會自動啟用垂直捲動。

對話方塊主體的 CSS屬性

內距

內邊距。

範例 — 若要將表單內容設定為有十個畫素的內距：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

對話方塊表單中的所有靜態標籤皆由控制

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

此類別不適合控制標籤大小或位置，因為您可以將其套用至表單使用者介面中不同位置的文字。

對話方塊標籤的 CSS屬性。 

字型粗細

標簽字型粗細。

字型大小

標簽字型大小。

字型系列

標簽字型系列。

色彩

標籤文字顏色。

對話方塊標籤可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 將所有標籤設定為灰色、粗體加九畫素字型：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

內嵌程式碼上方所顯示的文字復本大小，由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

對話方塊輸入範圍欄位的 CSS屬性

寬度

輸入欄位寬度。

內距

內邊距。

範例 — 若要將文字複製設定為430畫素寬，並在底部有10個畫素的內距：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

內嵌程式碼會包裝在容器中，並使用下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

對話方塊輸入容器的 CSS屬性

寬度

內嵌程式碼容器的寬度。

邊框

內嵌程式碼容器周圍的邊框。

內距

內邊距。

範例 — 若要在內嵌程式碼文字周圍設定一畫素灰色邊框，請使其寬度為430畫素，並有10畫素邊框間距：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

實際的內嵌程式碼文字是使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

對話方塊輸入容器的 CSS屬性

自動換行

文字環繞樣式。

範例 — 若要設定內嵌程式碼以使用break-word自動換行：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

內嵌大小標籤和下拉式清單位於對話方塊底部，並放入由下列CSS類別選取器控制的容器中：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

對話方塊內嵌大小面板的 CSS屬性

內距

內邊距。

範例 — 若要設定內嵌大小面板，使其有10個畫素的內距：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

內嵌大小標籤的大小和對齊方式由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

對話方塊內嵌大小面板的 CSS屬性

垂直對齊

垂直標籤對齊方式。

寬度

標籤寬度。

範例 — 若要將內嵌大小標籤設定為靠上對齊和80畫素寬：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

內嵌大小下拉式方塊的寬度是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

組合方塊的 CSS屬性

寬度

下拉式方塊寬度。

NOTE

下拉式方塊支援expanded屬性選擇器，可能的值為true和false。當下拉式方塊顯示預先定義的其中一個內嵌大小時，會使用值true，因此應採用所有可用的寬度。在下拉式方塊中選取自訂大小選項時，會使用值false，因此它應該縮小以留出空間給自訂寬度和高度輸入欄位。

範例 — 設定內嵌大小下拉式方塊在顯示預先定義的專案時為300畫素寬，並在顯示自訂大小時為110畫素寬：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

下拉式方塊文字的高度是由特殊內部元素所定義，並受到下列CSS類別選取器的控制：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

組合方塊文字的 CSS屬性

高度

下拉式方塊文字高度。

範例 — 若要將內嵌大小下拉式方塊文字高度設定為40畫素：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

下拉式方塊右側有一個「下拉式」按鈕，它由以下CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

組合方塊按鈕的 CSS屬性

前

下拉式方塊內的垂直按鈕位置。

右

水準按鈕在下拉式方塊中的位置。

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

每個狀態的按鈕影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

此按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態。

範例 — 若要將下拉式按鈕設為28 x 28畫素，並為每個狀態設定個別影像：

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

此面板在開啟下拉式方塊時會顯示內嵌大小清單，受控於下列CSS類別選取器：

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

面板的大小和位置由元件控制。您不可透過CSS變更此設定。

下拉式方塊的 CSS屬性

邊框

面板邊框。

範例 — 若要將下拉式方塊面板設定為一個畫素灰色邊框：

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

下拉式面板中的單一專案，由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

下拉式專案錨點的 CSS屬性

背景色彩

專案背景。

範例 — 若要將下拉式方塊面板專案設定為白色背景：

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

在下拉式方塊面板內所選專案的左側顯示的核取記號，由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

核取方塊的 CSS屬性

寬度

圖示寬度。

高度

圖示高度。

背景影像

專案影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

範例 — 若要將勾號圖示設定為25 x 25畫素：

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

在內嵌大小下拉式方塊中選取「自訂大小」選項時，對話方塊右側會顯示兩個額外的輸入欄位，讓使用者可輸入自訂內嵌大小。這些欄位會包裝在容器中，而容器是由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

對話方塊自訂大小面板的 CSS屬性

已離開

與內嵌大小下拉式方塊的距離。

範例 — 將自訂大小輸入欄位面板設定為下拉式方塊右側的20畫素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

每個自訂大小輸入欄位都會包裝在容器中，以呈現框線並設定欄位之間的邊界。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

對話方塊自訂大小的 CSS屬性

邊框

輸入欄位周圍的邊框。

寬度

輸入欄位寬度。

利潤

輸入欄位邊界。

內距

輸入欄位內距。

範例 — 若要設定自訂大小輸入欄位，使其有一個畫素灰色邊框、邊界、邊框間距，以及寬度為70畫素：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

如果需要垂直捲動，卷軸會呈現在對話方塊右邊緣附近的面板中，而此面板是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

對話方塊捲動面板的 CSS屬性

寬度

捲動面板寬度。

範例 — 將捲動面板設定為44畫素寬

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

卷軸區域的外觀是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

卷軸的 CSS屬性

寬度

卷軸寬度。

前

垂直卷軸從捲動面板頂端位移。

後

垂直卷軸從捲動面板底部位移。

右

水準卷軸從捲動面板的右邊緣位移。

範例 — 若要設定寬度為28畫素的卷軸，且卷軸面板的上下左右各有8個畫素的邊界：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

卷軸軌跡是上下捲動按鈕之間的區域。元件會自動設定軌跡的位置和高度。使用以下CSS類別選取器來控制追蹤

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

卷軸軌跡的 CSS屬性

寬度

追蹤寬度。

背景色彩

追蹤背景顏色。

範例 — 若要設定寬度為28畫素且背景為灰色的卷軸軌跡：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

卷軸縮圖在捲動軌跡區域內垂直移動。其垂直位置完全由元件邏輯控制。不過，縮圖高度不會隨著內容量而動態變更。您可以使用以下CSS類別選取器來設定縮圖高度和其他方面：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

卷軸縮圖的 CSS屬性

寬度

縮圖寬度。

高度

縮圖高度。

內距頂端

軌道頂端之間的垂直邊框間距。

內距底部

軌道底部之間的垂直邊框間距。

背景影像

針對指定縮圖狀態顯示的影像。

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

Thumb支援state屬性選取器，可用來將不同的外觀元素套用至不同的縮圖狀態： up、down、over和disabled。

範例 — 若要設定卷軸縮圖，其大小為28 x 45畫素，上下各有10個畫素邊界，且每個狀態的圖稿都不同：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

上下捲動按鈕的外觀是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

無法使用CSS top、left、bottom和right屬性來定位捲動按鈕。相反地，檢視器邏輯會自動進行定位。

頂端和底部捲動按鈕的 CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

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

背景位置

若使用CSS拼寫，則定位在圖稿sprite內。

另請參閱 CSS Sprite。

NOTE

這些按鈕支援state屬性選取器，可用來將不同的外觀元素套用至不同的按鈕狀態： up、down、over和disabled。

按鈕工具提示可本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 設定28 x 32畫素的捲動按鈕，每個狀態都有不同的圖稿：

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8

內嵌共用 embed-share