嵌入共享 | Adobe Experience Manager

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

主题：

创建对象：

开发人员
用户

嵌入共享工具由添加到“社交”共享面板的按钮以及激活该工具时显示的模式对话框组成。按钮的位置完全由社交共享工具管理。

嵌入共享按钮的外观可通过以下CSS类选择器来控制：

.s7ecatalogsearchviewer .s7embedshare

嵌入共享工具的 CSS属性

宽度

按钮宽度。

高度

按钮高度。

背景图像

针对给定按钮状态显示的图像。

背景位置

如果使用CSS sprite，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

此按钮支持state属性选择器，可用于将不同的外观应用于不同的按钮状态。

可以通过在社交共享面板的CSS类中设置display:none CSS属性来删除该按钮。

按钮工具提示可以本地化。有关详细信息，请参阅用户界面元素的本地化。

示例 — 要设置一个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，则定位在图稿sprite中。

另请参阅 CSS Sprite。

标题标题由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

对话框标题文本的CSS属性

字体粗细

字体粗细。

字体大小

字体高度。

字体系列

字体系列。

填充

内部文本边距。

使用以下CSS类选择器控制“关闭”按钮：

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

关闭按钮的 CSS属性

前

相对于标题容器的垂直按钮位置。

右

相对于标题容器的水平按钮位置。

宽度

按钮宽度。

高度

按钮高度。

填充

按钮的内边距。

背景图像

每个状态的按钮图像。

背景位置

如果使用CSS sprite，则定位在图稿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类选择器来控制分类：

.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像素高度，具有十像素边距，并使用白色背景：

.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属性

宽度

嵌入代码容器的宽度。

边框

嵌入代码容器周围的边框。

填充

内边距。

示例 — 要在嵌入代码文本周围设置1像素灰色边框，请使其宽度为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属性

填充

内边距。

示例 — 将嵌入大小面板设置为具有十个填充像素：

.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

组合框支持可能值为true和false的expanded属性选择器。组合框显示预定义的嵌入大小之一时使用值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，则定位在图稿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，则定位在图稿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类选择器来控制分类：

.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，则定位在图稿sprite中。

另请参阅 CSS Sprite。

NOTE

缩略图支持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，则定位在图稿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