連結共用

連結分享工具包含新增至Social分享面板的按鈕，以及啟動工具時顯示的強制回應對話方塊。 按鈕的位置由Social分享工具完全管理。

連結共用按鈕的外觀由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7linkshare

連結共用工具的CSS屬性

width

按鈕寬度。

height

按鈕高度。

背景 — 影像

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

背景位置

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

另請參閱 CSS Sprite .

注意

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

您可以透過設定 display:none 其CSS類上的CSS屬性。

按鈕工具提示可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例：若要設定28 x 28像素的連結共用按鈕，並針對四個不同按鈕狀態中的每一個顯示不同的影像：

.s7ecatalogsearchviewer .s7linkshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7linkshare[state='up'] {
background-image:url(images/v2/LinkShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='over'] {
background-image:url(images/v2/LinkShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='down'] {
background-image:url(images/v2/LinkShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7linkshare[state='disabled'] {
background-image:url(images/v2/LinkShare_dark_disabled.png);
}

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

.s7ecatalogsearchviewer .s7linkdialog .s7backoverlay

背景覆蓋的CSS屬性

不透明度

背景覆蓋圖不透明度。

背景顏色

背景覆蓋圖顏色。

範例：若要設定背景覆蓋圖為灰色且不透明度為70%:

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

依預設，強制回應對話方塊會顯示在案頭系統的畫面中央，並在觸控裝置上取用整個網頁區域。 在所有情況下，對話框的定位和大小由元件管理。 使用以下CSS類選擇器控制該對話框：

.s7ecatalogsearchviewer .s7linkdialog .s7dialog

對話框的CSS屬性

邊框半徑

對話框邊框半徑，以防對話框不佔用整個瀏覽器。

背景顏色

對話框背景顏色。

寬度

應為未設定或設為100%，在此情況下，對話方塊會取用整個瀏覽器視窗（觸控裝置最好使用此模式）。

高度

應為未設定或設為100%，在此情況下，對話方塊會取用整個瀏覽器視窗（觸控裝置最好使用此模式）。

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

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

對話框標題由表徵圖、標題文本和關閉按鈕組成。 集箱容器由

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader

對話框標題的CSS屬性

填補

頁首內容的內部邊框間距。

圖示和標題文字會包裝在由

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheader .s7dialogline

對話框行的CSS屬性

填補

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

使用下列CSS類選擇器控制標題表徵圖

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadericon

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

寬度

圖示寬度。

高度

圖示高度。

背景 — 影像

圖示影像。

背景位置

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

另請參閱 CSS Sprite .

使用下列CSS類選擇器控制標題：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogheadertext

對話框標題文本的CSS屬性

字型粗細

字型寬度。

字型大小

字型高度。

字型系列

字型系列。

填補

內部文字邊框間距。

使用下列CSS類選擇器控制關閉按鈕：

.s7ecatalogsearchviewer .s7linkdialog .s7closebutton

關閉按鈕的CSS屬性

頂部

相對於標題容器的垂直按鈕位置。

右側

相對於標題容器的水準按鈕位置。

寬度

按鈕寬度。

高度

按鈕高度。

填補

按鈕的內邊框間距。

背景 — 影像

每個狀態的按鈕影像。

背景位置

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

另請參閱 CSS Sprite .

注意

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

「關閉」按鈕工具提示和對話框標題可以本地化。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例 — 若要設定對話方塊標題，使用邊框間距、22 x 12像素圖示和粗體16點標題。 最後，28 x 28像素的「關閉」按鈕，從頂部放置兩個像素，從對話框容器的右側放置兩個像素：

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

對話框頁尾由「取消」按鈕組成。 頁尾容器可透過下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter

對話框頁尾的CSS屬性

border

可用於以視覺方式將頁尾與對話框其餘部分分開的邊框。

頁腳具有保持按鈕的內容器。 它由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbuttoncontainer

對話框按鈕容器的CSS屬性

填補

頁尾和按鈕之間的內邊框間距。

使用以下CSS類選擇器控制「全部選擇」按鈕：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogactionbutton

按鈕僅在案頭系統上可用。

「全部選擇」按鈕的CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

color

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

背景顏色

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

注意

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

使用下列CSS類選擇器控制取消按鈕：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogcancelbutton

對話框取消按鈕的CSS屬性

寬度

按鈕寬度。

高度

按鈕高度。

色彩

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

背景顏色

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

注意

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialogfooter .s7button

按鈕的CSS屬性

字型粗細

按鈕字型寬度。

字型大小

按鈕字型大小。

字型系列

按鈕字型系列。

線高

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

框陰影

陰影。

邊距 — 右

右鍵邊距。

按鈕工具提示可翻譯。 請參閱 用戶介面元素本地化 以取得更多資訊。

示例 — 要設定具有64 x 34取消按鈕的對話框頁尾，每個按鈕狀態的文本顏色和背景顏色不同：

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

主對話框區域（在頁首和頁尾之間）包含對話框內容。 在所有情況下，元件都會管理此區域的寬度 — 無法在CSS中設定它。 主對話框區域由以下CSS類選擇器控制：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogviewarea

對話框查看區域的CSS屬性

高度

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

背景顏色

主對話框區域的背景顏色。

margin

外邊距。

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

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

所有表單內容（如標籤和輸入欄位）都駐留在由以下CSS類選擇器控制的容器內：

.s7ecatalogsearchviewer .s7linkdialog .s7dialogbody

對話框主體的CSS屬性

填補

內部填充。

範例：若要設定表單內容，應有十個像素邊框間距：

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

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

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglabel

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

對話框標籤的CSS屬性。 ​

字型粗細

標籤字型寬度。

字型大小

標籤字型大小。

字型系列

標籤字型系列。

色彩

標籤文本顏色。

對話方塊標籤可以翻譯。 請參閱 用戶介面元素本地化 以取得更多資訊。

範例：若要將所有標籤設為灰色、粗體和九像素字型：

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

使用下列CSS類別選取器來控制顯示在連結頂端的文字副本大小：

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputwide

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

寬度

文字寬度。

填補

內部填充。

範例：若要將文字副本設定為430像素寬，且底部有10個像素邊框：

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

共用連結會包裝在容器中，並透過下列CSS類別選取器加以控制：

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer

對話框輸入容器的CSS屬性

邊框

共用連結容器周圍的邊框。

填補

內部填充。

範例：若要在內嵌程式碼文字周圍設定一個像素灰色邊框，並有九個像素的邊框間距：

.s7ecatalogsearchviewer .s7linkdialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 9px;
}

共用連結本身由下列CSS類別選取器控制：

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink

對話框的CSS屬性共用連結

寬度

共用連結寬度。

範例：若要將共用連結設為450像素寬：

.s7ecatalogsearchviewer .s7linkdialog .s7dialoglink {
    width: 450px;
}

本頁內容