電子郵件共用 | Adobe Experience Manager

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

主題：

建立對象：

開發人員
使用者

電子郵件共用工具包含新增至Social共用面板的按鈕，以及啟動工具時顯示的強制回應對話方塊。按鈕的位置可完全由社交分享工具管理。

電子郵件共用按鈕的外觀是由下列CSS類別選取器所控制：

.s7ecatalogsearchviewer .s7emailshare

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

寬度

按鈕的寬度。

高度

按鈕的高度。

背景影像

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

背景位置

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

另請參閱 CSS Sprite。

NOTE

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

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

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

範例 — 設定28 x 28畫素的電子郵件共用按鈕，該按鈕會針對四種不同按鈕狀態分別顯示不同影像。

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

背面覆蓋的 CSS屬性

不透明度

背景覆蓋不透明度。

背景色彩

背景覆蓋顏色。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

對話方塊的 CSS屬性

邊框半徑

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

背景色彩

對話方塊背景顏色；

寬度

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

高度

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

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

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

對話方塊標題由圖示、標題文字和「關閉」按鈕組成。標題容器由下列CSS類別選取器控制

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

對話方塊標頭的 CSS屬性

內距

標頭內容的內部內距。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

對話方塊行的 CSS屬性

內距

頁首圖示和標題的內部內距。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

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

寬度

圖示寬度。

高度

圖示高度。

背景影像

圖示影像。

背景位置

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

另請參閱 CSS Sprite。

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

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

字型粗細

字型粗細。

字型大小

字型高度。

字型系列

字型系列。

內距

內部文字內距。

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

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

關閉按鈕的 CSS屬性

前

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

右

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

寬度

按鈕寬度。

高度

按鈕高度。

內距

按鈕的內部內距。

背景影像

每個狀態的按鈕影像。

背景位置

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

另請參閱 CSS Sprite。

NOTE

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

「關閉」按鈕工具提示和對話方塊標題可以本地化。如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定具有填補的對話方塊標題，請以24 x 17畫素圖示及粗體16點標題來設定。最後，還有28 x 28畫素的「關閉」按鈕，它定位在對話方塊容器上方的兩個畫素和右方的兩個畫素：

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

對話方塊頁尾包含取消和傳送電子郵件按鈕。頁尾容器由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

對話方塊頁尾的 CSS屬性

邊框

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

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

內距

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

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

寬度

按鈕寬度。

高度

按鈕高度。

色彩

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

背景色彩

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

NOTE

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

使用下列CSS類別選取器來控制傳送電子郵件按鈕：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

對話方塊動作按鈕的CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

色彩

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

背景色彩

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

NOTE

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

按鈕的 CSS屬性

字型粗細

按鈕字型粗細。

字型大小

按鈕字型大小。

字型系列

按鈕字型系列。

行高

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

方塊陰影

陰影。

右邊界

右側按鈕邊界。

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

範例 — 若要設定具有64 x 34取消按鈕和82 x 34傳送電子郵件按鈕的對話方塊頁尾，每個按鈕狀態的文字顏色和背景顏色會不同：

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

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

高度

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

背景色彩

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

利潤

外部邊界。

NOTE

主要對話方塊區域支援選用的state屬性選取器。當電子郵件表單提交且對話方塊顯示確認訊息時，此欄位會設為sendsuccess。只要確認訊息很小，就會在顯示此類確認訊息時，使用此屬性選取器來降低對話方塊高度。

範例 — 若要將主要對話方塊區域一開始設定為300畫素高度，並在顯示確認訊息時設定為100畫素高度，請使用十畫素邊界，並使用白色背景：

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

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

對話方塊主體的 CSS屬性

內距

內邊距。

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

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

對話方塊表單是逐行填入，其中每一行都包含部分表單內容（如標籤和文字輸入欄位）。單一表單行由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

對話方塊行的 CSS屬性

內距

內線邊距。

範例 — 若要設定對話方塊表單，讓每行有10個畫素邊距：

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

對話方塊表單中的所有靜態標籤都是使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

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

對話方塊標籤的 CSS屬性。 

字型粗細

標簽字型粗細。

字型大小

標簽字型大小。

字型系列

標簽字型系列。

色彩

標籤文字顏色。

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

對話方塊輸入標籤的 CSS屬性

寬度

靜態標籤的寬度。

text-align

水準文字對齊方式。

利潤

靜態標籤邊界。

內距

靜態標籤內距。

範例 — 若要將輸入欄位標籤設定為50畫素寬度、靠右對齊、有10個畫素的內距，並在右側有10個畫素邊界：

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

每個表單輸入欄位都會包裝到容器中，以便您在輸入欄位周圍套用自訂邊框。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

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

邊框

輸入欄位容器周圍的邊框。

內距

內邊距。

NOTE

輸入欄位容器支援選用的state屬性選取器。當使用者在輸入資料格式中發生錯誤且內嵌驗證失敗時，其會設為verifyerror。此屬性選取器可用來反白顯示表單中錯誤的使用者輸入。

從左上至對話方塊內文右邊緣的標籤展開的大多數輸入欄位（包括「寄件者」欄位和「訊息」欄位）都是使用下列CSS類別選取器來控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

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

寬度

輸入欄位寬度。

[收件者]欄位較窄，因為它為右側的移除電子郵件按鈕分配了空間。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

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

寬度

輸入欄位寬度。

範例 — 將表單設定為有一個畫素灰色邊框，在所有輸入欄位周圍有九個畫素的內距。對於驗證失敗的欄位，使用相同的紅色邊框。最後，要有250畫素寬的終止欄位，其餘的輸入欄位有300畫素寬的終止欄位：

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

電子郵件訊息輸入欄位也由以下控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

此類別可讓您設定基礎TEXTAREA專案的特定屬性。

對話方塊訊息的CSS屬性

高度

訊息高度。

自動換行

文字環繞樣式。

範例 — 若要將電子郵件訊息設定為50畫素高，並使用break-word個自動換行：

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

「新增其他電子郵件地址」按鈕可讓使用者在電子郵件表單中新增多個收件者。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

對話方塊的 CSS屬性新增電子郵件地址按鈕

高度

按鈕高度。

色彩

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

背景影像

每個狀態的按鈕影像。

背景位置

按鈕區域內部的按鈕影像位置。

字型粗細

按鈕字型粗細。

字型大小

按鈕字型大小。

字型系列

按鈕字型系列。

行高

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

text-align

水準文字對齊方式。

內距

內邊距。

NOTE

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

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

範例 — 若要將「新增其他電子郵件地址」按鈕設定為25畫素高，請使用對齊方式正確的12點粗體字型，並針對每個狀態使用不同的文字顏色和影像：

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

「移除」按鈕可讓使用者從電子郵件表單中移除額外的收件者。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

對話方塊的 CSS屬性移除電子郵件按鈕

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

每個狀態的按鈕影像。

背景位置

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

另請參閱 CSS Sprite。

NOTE

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

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

範例 — 若要將「移除」按鈕設定為25 x 25畫素，並針對每種狀態使用不同的影像：

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

要共用的內容會顯示在對話方塊內文的底部，並包含縮圖、標題、原始URL和說明。它會包裝到容器中，並由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

對話方塊內容的 CSS屬

邊框

容器邊框。

內距

內邊距。

範例 — 若要設定底部容器具有一個畫素點狀框線且沒有邊框間距：

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

若要控制縮圖影像，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

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

對話方塊縮圖影像的CSS屬性

寬度

縮圖寬度。

高度

縮圖高度。

垂直對齊

垂直對齊縮圖。

內距

內邊距。

範例 — 將縮圖設定為90 x 60畫素，並以十個畫素邊框間距對齊頂端：

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

內容標題、來源和說明會進一步分組到內容縮圖右側的面板中。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

對話方塊資訊面板的CSS屬性

寬度

面板寬度。

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

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

使用下列CSS類別選取器來控制內容標題：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

對話方塊標題的 CSS屬性

利潤

外部邊界。

字型粗細

字型粗細。

字型大小

字型大小。

字型系列

字型系列。

範例 — 若要設定內容標題以使用粗體字型並有10個畫素邊界：

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

使用下列CSS類別選取器來控制內容來源：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

對話方塊內容來源的 CSS屬性

利潤

外部邊界。

字型粗細

字型粗細。

字型大小

字型大小。

字型系列

字型系列。

範例 — 若要將內容來源設定為10畫素邊界：

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

使用下列CSS類別選取器來控制內容說明：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

對話方塊內容描述的CSS屬性

利潤

外部邊界。

字型粗細

字型粗細。

字型大小

字型大小。

字型系列

字型系列。

範例 — 若要設定內容說明，使其有10個畫素邊界，並使用9點字型：

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

當使用者輸入錯誤的輸入資料且內嵌驗證失敗時，對話方塊內文的頂端會顯示訊息。在提交表單時，當對話方塊必須呈現錯誤或確認訊息時，也會顯示此訊息。若要控制CSS類別，請使用下列CSS類別選取器：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

對話方塊的CSS屬性錯誤訊息

背景影像

錯誤圖示。預設為驚歎號。

背景位置

錯誤圖示在訊息區域中的位置。

色彩

訊息文字色彩。

字型粗細

字型粗細。

字型大小

字型大小。

字型系列

字型系列。

行高

訊息內的文字高度。影響垂直對齊。

內距

內邊距。

NOTE

此訊息支援具有以下可能值的state屬性選擇器： verifyerror、senderror和sendsuccess。當訊息因內嵌輸入驗證失敗而顯示時，會設定值verifyerror。當後端電子郵件服務回報錯誤時，會設定值senderror。成功傳送電子郵件時設定值sendsuccess。如此一來，即可根據對話方塊狀態，以不同方式設定訊息樣式。

按鈕工具提示可以本地化。

如需詳細資訊，請參閱使用者介面元素的本地化。

範例 — 若要設定訊息以使用10點粗體字型，請在左側使用25畫素行高和20畫素邊框間距。最後，使用驚歎號圖示，如果有錯誤則使用紅色文字，如果有成功則使用無圖示和綠色文字：

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

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

寬度

捲動面板寬度。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

卷軸的 CSS屬性

寬度

卷軸寬度。

前

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

後

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

右

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

範例 — 若要設定寬度為28畫素的卷軸，捲動面板的上、右和底部各有8個畫素的邊界：

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

捲動軌跡的 CSS屬性

寬度

磁軌寬度。

背景色彩

軌跡背景顏色。

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

卷軸縮圖的 CSS屬性

寬度

縮圖寬度。

高度

縮圖高度。

內距頂端

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

內距底部

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

背景影像

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

背景位置

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

另請參閱 CSS Sprite。

NOTE

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

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

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

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

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

寬度

按鈕寬度。

高度

按鈕高度。

背景影像

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

背景位置

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

另請參閱 CSS Sprite。

NOTE

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

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

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

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

recommendation-more-help

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

電子郵件共用 :headding-anchor:email-share