電子郵件共用 | Adobe Experience Manager

電子郵件共用工具由添加到「社交共用」面板的按鈕和激活工具時顯示的模式對話框組成。按鈕的位置完全由社交共用工具管理。

電子郵件共用按鈕的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7emailshare

電子郵件共用工具的CSS屬性

width	按鈕的寬度。
height	按鈕的高度。
背景影像	為給定按鈕狀態顯示的影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

可以通過設定來從「社交共用」面板中刪除按鈕 display:none CSS類上的CSS屬性。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 設定28 x 28像素的電子郵件共用按鈕，該按鈕為四個不同按鈕狀態中的每個狀態顯示不同的影像。

.s7videoviewer .s7emailshare {
 width:28px;
 height:28px;
}
.s7videoviewer .s7emailshare[state='up'] {
background-image:url(images/v2/EmailShare_dark_up.png);
}
.s7videoviewer .s7emailshare[state='over'] {
background-image:url(images/v2/EmailShare_dark_over.png);
}
.s7videoviewer .s7emailshare[state='down'] {
background-image:url(images/v2/EmailShare_dark_down.png);
}
.s7videoviewer .s7emailshare[state='disabled'] {
background-image:url(images/v2/EmailShare_dark_disabled.png);
}

當對話框處於活動狀態時覆蓋網頁的背景覆蓋層由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7backoverlay

背面覆蓋的CSS屬性

不透明度	背景覆蓋不透明度。
背景色	背景覆蓋顏色。

示例 — 要設定背景覆蓋，使其為灰色且不透明度為70%:

.s7videoviewer .s7emaildialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

預設情況下，模式對話框會以案頭系統螢幕的中心顯示，並在觸摸設備上獲取整個網頁區域。在所有情況下，對話框的定位和大小由元件管理。對話框由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialog

對話框的CSS屬性

邊界半徑	對話框邊框半徑（如果對話框不佔用整個瀏覽器窗口）;
背景色	對話框背景顏色；
寬度	應取消設定，或設定為100%，在這種情況下，對話框將佔據整個瀏覽器窗口（此模式在觸摸設備上是首選模式）;
高度	應取消設定，或設定為100%，在這種情況下，對話框將佔據整個瀏覽器窗口（此模式在觸摸設備上是首選模式）。

示例 — 要設定對話框以使用整個瀏覽器窗口並在觸摸設備上具有白色背景：

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

對話框標題由表徵圖、標題文本和關閉按鈕組成。標題容器由以下CSS類選擇器控制

.s7videoviewer .s7emaildialog .s7dialogheader

對話框標題的CSS屬性

填補

標題內容的內填充。

表徵圖和標題文本被包裝到由

.s7videoviewer .s7emaildialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

填補	標題表徵圖和標題的內填充

標題表徵圖由以下CSS類選擇器控制

.s7videoviewer .s7emaildialog .s7dialogheadericon

對話框標題表徵圖的CSS屬性

寬度	表徵圖寬度。
高度	表徵圖高度。
背景影像	表徵圖影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

標題由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogheadertext

對話框標題文本的CSS屬性

字型粗細	字型粗細。
字型大小	字型高度。
字型系列	字型系列。
填補	內部文本填充。

關閉按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7closebutton

關閉按鈕的CSS屬性

頂部	垂直按鈕相對於標題容器的位置。
右側	水準按鈕相對於標題容器的位置。
寬度	按鈕寬度。
高度	按鈕高度。
填補	按鈕的內填充。
背景影像	每個狀態的按鈕影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

「關閉」(Close)按鈕工具提示和對話框標題可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 要設定帶填充的對話框標題、24 x 17像素表徵圖、粗體16點標題和28 x 28像素關閉按鈕。最後，將其從頂部放置兩個像素，從對話框容器右側放置兩個像素：

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

對話框頁腳由「取消」和「發送電子郵件」按鈕組成。頁腳容器由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogfooter

對話框頁腳的CSS屬性

border

邊框，可用於將頁腳與對話框的其餘部分視覺分離。

頁腳具有一個內容器，該內容器保留兩個按鈕。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

填補	頁腳和按鈕之間的內填充。

「取消」按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogcancelbutton

「取消」對話框的CSS屬性按鈕

寬度	按鈕寬度。
高度	按鈕高度。
color	每個狀態的按鈕文本顏色。
背景色	每個狀態的按鈕背景顏色。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

「發送電子郵件」按鈕由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogactionbutton

對話框操作按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
顏色	每個狀態的按鈕文本顏色。
背景色	每個狀態的按鈕背景顏色。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

此外，兩個按鈕共用公用CSS類，這些類可包含其他對話框按鈕相同的CSS設定：

.s7videoviewer .s7emaildialog .s7dialogfooter .s7button

按鈕的CSS屬性

字型粗細	按鈕字型粗細。
字型大小	按鈕字型大小。
字型系列	按鈕字型系列。
線高	按鈕內的文本高度。影響垂直對齊。
框陰影	投影。
邊距右	右按鈕邊距。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 要設定一個對話框頁腳，其中包含64 x 34取消按鈕和82 x 34發送電子郵件按鈕，並且每個按鈕狀態的文本顏色和背景顏色不同：

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

主對話框區域（頁眉和頁腳之間）包含右側的可滾動對話內容和滾動面板。在所有情況下，元件都管理此區域的寬度，無法在CSS中設定它。主對話框區域由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogviewarea

對話框查看區域的CSS屬性

高度	主對話框區域的高度。只有在對話框在案頭模式下工作時才應指定該對話框。當對話框的大小為佔用整個瀏覽器窗口時，它不適用。
背景色	主對話框區域的背景顏色。
margin	外邊距。

注意

主對話框區域支援可選 state 屬性選擇器。已設定為 sendsuccess 當電子郵件表單被提交並且對話框顯示確認消息時。只要確認消息很小，此屬性選擇器就可用於在顯示此確認消息時降低對話框高度。

示例 — 要將主對話框區域設定為初始300像素高，在顯示確認消息時設定為100像素高，請具有10像素邊距，並使用白色背景：

.s7videoviewer .s7emaildialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}
.s7videoviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] {
 height:100px;
}

所有表單內容（如標籤和輸入欄位）都駐留在由

.s7videoviewer .s7emaildialog .s7dialogbody

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

對話框主體的CSS屬性

填補

內填充。

示例 — 要將表單內容設定為具有十個像素填充：

.s7videoviewer .s7emaildialog .s7dialogbody {
    padding: 10px;
}

對話框窗體逐行填充，其中每行都包含窗體內容的一部分（如標籤和文本輸入欄位）。使用以下CSS類選擇器控制單個表單行：

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline

對話框行的CSS屬性

填補

內線填充。

示例 — 要設定對話框窗體，使每行具有十個像素填充：

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

對話框窗體中的所有靜態標籤都由

.s7videoviewer .s7emaildialog .s7dialoglabel

此類不適於控制標籤大小或位置，因為您可以將其應用於表單用戶介面不同位置的文本。

對話框標籤的CSS屬性。 

字型粗細	標籤字型粗細。
字型大小	標籤字型大小。
字型系列	標籤字型系列。
顏色	標籤文本顏色。

對話框標籤可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 將所有標籤設定為灰色，用9像素字型加粗：

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

在表單輸入欄位左側顯示的所有靜態標籤都受以下控制：

.s7videoviewer .s7emaildialog .s7dialoginputlabel

對話框輸入標籤的CSS屬性

寬度	靜態標籤的寬度。
文本對齊	水準文本對齊方式。
邊緣	靜態標籤邊距。
填補	靜態標籤填充。

示例 — 要將輸入欄位標籤設定為50像素寬度、右對齊、有十個填充像素和十個像素邊距，請執行以下操作：

.s7videoviewer .s7emaildialog .s7dialoginputlabel {
    margin-right: 10px;
    padding: 10px;
    text-align: right;
    width: 50px;
}

每個表單輸入欄位都包裝到容器中，以便您在輸入欄位周圍應用自定義邊框。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

邊界	輸入欄位容器周圍的邊框。
填補	內填充。

注意

輸入欄位容器支援可選 state 屬性選擇器。已設定為 verifyerror 當用戶在輸入資料格式上出錯時，內聯驗證失敗。此屬性選擇器可用於突出顯示窗體中不正確的用戶輸入。

從對話框主體的左側標籤到右側邊緣（包括「from」欄位和「message」欄位）擴展的大多數輸入欄位都受以下控制：

.s7videoviewer .s7emaildialog .s7dialoginputwide

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

寬度

輸入欄位寬度。

「收件人」輸入欄位較窄，因為它為右側的「刪除電子郵件」按鈕分配了空間。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialoginputshort

對話框輸入短欄位的CSS屬性

寬度

輸入欄位寬度。

示例 — 將表單設定為在所有輸入欄位周圍具有9個填充像素的一個像素灰度邊框。要對驗證失敗的欄位使用相同的紅色邊框，請使輸入欄位寬為250像素，其餘輸入欄位寬為300像素：

.s7videoviewer .s7emaildialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}
.s7videoviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] {
    border: 1px solid #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialoginputshort {
    width: 250px;
}
.s7videoviewer .s7emaildialog .s7dialoginputwide {
    width: 300px;
}

電子郵件輸入欄位也受以下控制：

.s7videoviewer .s7emaildialog .s7dialogmessage

此類用於為基礎 TEXTAREA 的子菜單。

對話框消息的CSS屬性

高度	消息高度。
換行	換行樣式。

示例 — 將電子郵件設定為50像素高且使用 break-word 換行：

.s7videoviewer .s7emaildialog .s7dialogmessage {
    height: 50px;
    word-wrap: break-word;
}

「添加另一個電子郵件地址」按鈕允許用戶在電子郵件表單中添加多個收件人。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton

對話框的CSS屬性添加電子郵件地址按鈕

高度	按鈕高度。
顏色	每個狀態的按鈕文本顏色。
背景影像	每個狀態的按鈕影像。
背景位置	按鈕影像在按鈕區域內的位置。
字型粗細	按鈕字型粗細。
字型大小	按鈕字型大小。
字型系列	按鈕字型系列。
線高	按鈕內的文本高度。影響垂直對齊。
文本對齊	水準文本對齊。
填補	內填充。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 要將「添加其他電子郵件地址」按鈕設定為25像素高，請使用右對齊的12點粗體字型，並為每種狀態使用不同的文本顏色和影像：

.s7videoviewer .s7emaildialog .s7dialogaddemailbutton {
 text-align:right;
 font-size:12pt;
 font-weight:bold;
 background-position:left center;
 line-height:25px;
 padding-left:30px;
 height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] {
 color:#000000;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] {
 color:#000000;
 text-decoration:underline;
 background-image:url(images/sdk/dlgaddplus_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] {
 color:#666666;
 background-image:url(images/sdk/dlgaddplus_up.png);
}

「刪除」按鈕允許用戶從電子郵件表單中刪除額外地址。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton

對話框的CSS屬性刪除電子郵件按鈕

寬度	按鈕寬度。
高度	按鈕高度。
背景影像	每個狀態的按鈕影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

注意

此按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同按鈕狀態。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 將「刪除」按鈕設定為25 x 25像素，並對每種狀態使用不同的影像：

.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton {
 width:25px;
 height:25px;
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] {
 background-image:url(images/sdk/dlgremove_up.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] {
 background-image:url(images/sdk/dlgremove_over.png);
}
.s7videoviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] {
 background-image:url(images/sdk/dlgremove_up.png);
}

正在共用的內容顯示在對話框主體的底部，並包括縮略圖、標題、原URL和說明。它被包裝在容器中，其控制為：

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent

對話框內容的CSS屬性

邊界	容器邊框。
填補	內填充。

示例 — 要設定底部容器，使其具有一個像素點點邊框且無填充：

.s7videoviewer .s7emaildialog .s7dialogbody .s7dialogcontent {
    border: 1px dotted #A0A0A0;
    padding: 0;
}

縮略圖影像由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogthumbnail

的 background-image 屬性由元件邏輯設定。

對話框縮略圖影像的CSS屬性

寬度	縮略圖寬度。
高度	縮略圖高度。
垂直對齊	垂直對齊縮略圖。
填補	內填充。

示例 — 將縮覽圖設定為90 x 60像素，並以十個填充像素對齊：

.s7videoviewer .s7emaildialog .s7dialogthumbnail {
    height: 60px;
    padding: 10px;
    vertical-align: top;
    width: 90px;
}

內容標題、原點和說明進一步分組到內容縮略圖右側的面板中。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialoginfopanel

對話框資訊面板的CSS屬性

寬度

面板寬度。

示例 — 將內容資訊面板設定為300像素寬：

.s7videoviewer .s7emaildialog .s7dialoginfopanel {
    width: 300px;
}

使用以下CSS類選擇器控制內容標題：

.s7videoviewer .s7emaildialog .s7dialogtitle

對話框標題的CSS屬性

邊緣	外邊距。
字型粗細	字型粗細。
字型大小	字型大小.
字型系列	字型系列。

示例 — 設定內容標題以使用粗體字型並具有十個像素邊距：

.s7videoviewer .s7emaildialog .s7dialogtitle {
    font-weight: bold;
    margin: 10px;
}

使用以下CSS類選擇器控制內容源：

.s7videoviewer .s7emaildialog .s7dialogorigin

對話框內容源的CSS屬性

邊緣	外邊距。
字型粗細	字型粗細。
字型大小	字型大小.
字型系列	字型系列。

示例 — 要設定內容原點以具有十個像素邊距：

.s7videoviewer .s7emaildialog .s7dialogorigin {
    margin: 10px;
}

使用以下CSS類選擇器控制內容說明：

.s7videoviewer .s7emaildialog .s7dialogdescription

對話框內容說明的CSS屬性

邊緣	外邊距。
字型粗細	字型粗細。
字型大小	字型大小.
字型系列	字型系列。

示例 — 將內容說明設定為具有十像素邊距並使用九點字型：

.s7videoviewer .s7emaildialog .s7dialogdescription {
    font-size: 9pt;
    margin: 10px;
}

當用戶輸入錯誤的輸入資料且內聯驗證失敗時，或者當提交表單時對話框必須顯示錯誤或確認消息時，會在對話框主體頂部顯示一條消息。它由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogerrormessage

對話框的CSS屬性錯誤消息

背景影像	錯誤表徵圖。預設為感嘆號。
背景位置	錯誤表徵圖位於消息區域內。
顏色	消息文本顏色。
字型粗細	字型粗細。
字型大小	字型大小.
字型系列	字型系列。
線高	消息內的文本高度。影響垂直對齊。
填補	內填充。

注意

此消息支援 state 屬性選擇器，具有以下可能值： verifyerror。 senderror, sendsuccess。屬性選擇器 verifyerror 在因內聯輸入驗證失敗而顯示消息時設定； senderror 在後端電子郵件服務報告錯誤時設定； sendsuccess 在成功發送電子郵件時設定。這樣，根據對話框狀態，可以以不同方式設定消息的樣式。

錯誤消息可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 設定消息以使用十點粗體。而且，它必須有25像素行高，左邊必須有20像素填充，使用感嘆號表徵圖，如果出現錯誤則使用紅色文本，如果成功，則不使用表徵圖和綠色文本：

.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] {
    background-image: url("images/sdk/dlgerrimg.png");
    color: #FF0000;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] {
    background-image: none;
    color: #00B200;
}
.s7videoviewer .s7emaildialog .s7dialogerrormessage {
    background-position: left center;
    font-size: 10pt;
    font-weight: bold;
    line-height: 25px;
    padding-left: 20px;
}

如果需要垂直滾動，則捲動條將呈現在對話框右邊緣附近的面板中，該面板由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7dialogscrollpanel

對話框滾動面板的CSS屬性

寬度

滾動面板寬度。

示例 — 將滾動面板設定為44像素寬：

.s7videoviewer .s7emaildialog .s7dialogscrollpanel {
    width: 44px;
}

捲動條區域的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7scrollbar

捲動條的CSS屬性

寬度	捲動條寬度。
頂部	垂直捲動條從滾動面板頂部偏移。
底部	垂直捲動條從滾動面板的底部偏移。
右側	水準捲動條從滾動面板的右邊緣偏移。

示例 — 要設定寬為28像素的捲動條，從滾動面板的頂部、右側和底部設定8像素的邊距：

.s7videoviewer .s7emaildialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

捲動條軌道是頂部和底部滾動按鈕之間的區域。該元件自動設定軌道的位置和高度。磁軌由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack

滾動軌道的CSS屬性

寬度	軌道寬度。
背景色	軌道背景顏色。

示例 — 要設定寬度為28像素且具有灰色背景的捲動條軌道：

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

捲動條拇指在滾動軌道區域內垂直移動。其垂直位置完全由元件邏輯控制，但是拇指高度不會根據內容量動態地改變。可以使用以下CSS類選擇器配置拇指高度和其他方面：

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollthumb

捲動條拇指的CSS屬性

寬度	拇指寬度。
高度	拇指高度。
上填充	軌道頂部之間的垂直填充。
填充底部	軌道底部之間的垂直填充。
背景影像	為給定的拇指狀態顯示的影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

注意

拇指支撐 state 屬性選擇器，可用於將不同外觀應用於不同的拇指狀態： up。 down。 over, disabled。

按鈕工具提示可以本地化。請參閱用戶介面元素的本地化的子菜單。

示例 — 要設定捲動條拇指，該拇指為28 x 45像素，頂部和底部有10個像素邊距，並且每種狀態具有不同的圖稿：

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

頂部和底部滾動按鈕的外觀由以下CSS類選擇器控制：

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7videoviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

頂部和底部滾動按鈕的CSS屬性

寬度	按鈕寬度。
高度	按鈕高度。
背景影像	為給定按鈕狀態顯示的影像。
背景位置	如果使用CSS浮雕，則在圖稿浮雕內定位。請參閱 CSS繁體。

注意

這些按鈕支援 state 屬性選擇器，可用於將不同外觀應用於不同的按鈕狀態： up。 down。 over, disabled。

示例 — 設定28 x 32像素且每種狀態具有不同圖稿的滾動按鈕：

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

adobe.com 上的資源

Ecommerce Integrations Automated Onboarding Content Intelligence Mobile Forms Digital Asset Management Content Management System

全新的改善搜尋

adobe.com 上的資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe