嵌入共享 embed-share

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

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

.s7ecatalogsearchviewer .s7embedshare

嵌入共享工具的CSS属性

width
按钮宽度。
height
按钮高度。
background-image
针对给定按钮状态显示的图像。
background-position

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

另请参阅 CSS脚本.

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

可以通过设置从Social共享面板中删除按钮 display:none CSS属性的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属性

不透明度
背景叠加不透明度。
background-color
背景叠加颜色。

示例 — 要将背景叠加设置为具有70%不透明度的灰色,请执行以下操作:

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

默认情况下,模式对话框会以桌面系统屏幕的中心位置显示,并在触控设备上显示整个网页区域。 在所有情况下,对话框的位置和大小都由组件管理。 使用以下CSS类选择器控制该对话框:

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

对话框的CSS属性

border-radius
对话框边框半径(如果对话框不占用整个浏览器)。
background-color
对话框背景颜色。
width
应取消设置或设置为100%,在这种情况下,对话框会占用整个浏览器窗口(触控设备首选此模式)。
height
应取消设置或设置为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属性

width
图标宽度。
height
图标高度。
background-image
图标图像。
background-position

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

另请参阅 CSS脚本.

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

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

对话框标题文本的CSS属性

font-weight
字体粗细。
font-size
字体高度。
字体系列
字体系列。
填充
内部文本边距。

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

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

关闭按钮的​ CSS属性

顶端
相对于标题容器的垂直按钮位置。
相对于标题容器的水平按钮位置。
width
按钮宽度。
height
按钮高度。
填充
按钮的内边距。
background-image
每个状态的按钮图像。
background-position

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

另请参阅 CSS脚本.

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

width
按钮宽度。
height
按钮高度。
color
每个状态的按钮文本颜色。
background-color
每个状态的按钮背景颜色。
NOTE
全选按钮支持 state 属性选择器,可用于将不同的外观应用于不同的按钮状态。

使用以下CSS类选择器可控制“取消”按钮:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

对话框取消按钮的CSS属性

width
按钮宽度。
height
按钮高度。
color
每个状态的按钮文本颜色。
background-color
每个状态的按钮背景颜色。
NOTE
此按钮支持 state 属性选择器,可用于将不同的外观应用于不同的按钮状态。

此外,这两个按钮共享公用的CSS类,该类可以包含与其他对话框按钮相同的CSS设置:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

按钮的CSS属性

font-weight
按钮字体粗细。
font-size
按钮字体大小。
字体系列
按钮字体系列。
line-height
按钮内的文本高度。 影响垂直对齐。
盒阴影
投影。
右边距
右按钮边距。

按钮工具提示可以本地化。 请参阅 用户界面元素的本地化 以了解更多信息。

示例 — 要设置一个对话框页脚,其中具有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属性

height
主对话框区域的高度。 仅当对话框在桌面模式下工作时,才应指定它。 当调整对话框的大小以占据整个浏览器窗口时,此选项不适用。
background-color
主对话框区域的背景颜色。
margin
外边距。

示例 — 要将主对话框区域设置为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属性。 ​

font-weight
标签字体粗细。
font-size
标签字体大小。
字体系列
标签字体系列。
color
标签文本颜色。

可以本地化对话框标签。 请参阅 用户界面元素的本地化 以了解更多信息。

示例 — 将所有标签设置为灰色,粗体带九像素字体:

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

显示在嵌入代码顶部的文本副本的大小由以下CSS类选择器控制:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

对话框输入范围字段的CSS属性

width
输入字段宽度。
填充
内边距。

示例 — 将文本副本的宽度设置为430像素,并在底部填充10像素:

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

嵌入代码将封装在容器中,并使用以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

对话框输入容器的CSS属性

width
嵌入代码容器的宽度。
边界
嵌入代码容器周围的边框。
填充
内边距。

示例 — 要在嵌入代码文本周围设置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属性

vertical-align
垂直标签对齐方式。
width
标签宽度。

示例 — 将嵌入大小标签设置为顶部对齐和80像素宽:

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

嵌入大小组合框的宽度由以下CSS类选择器控制:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

组合框的CSS属性

width
组合框宽度。
NOTE
组合框支持 expanded 属性选择器,可能的值为 truefalse. 值 true 在组合框显示预定义的嵌入大小之一时使用,因此应采用所有可用宽度。 值 false 在组合框中选择了“自定义大小”选项时使用,因此应将其收缩以便为自定义宽度和高度输入字段留出空间。

示例 — 将嵌入大小组合框设置为在显示预定义项目时为300像素宽,在显示自定义大小时为110像素宽:

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

组合框文本的高度由特殊内部元素定义,并使用以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

组合框文本的CSS属性

height
组合框文本高度。

示例 — 要将嵌入大小组合框文本高度设置为40像素,请执行以下操作:

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

组合框的右侧有一个“下拉”按钮,它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

组合框按钮的CSS属性

顶端
组合框内的垂直按钮位置。
水平按钮在组合框中的位置。
width
按钮宽度。
height
按钮高度。
background-image
每个状态的按钮图像。
background-position

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

另请参阅 CSS脚本.

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

background-color
项目背景。

示例 — 将组合框面板项目设置为具有白色背景:

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

组合框面板中选定项目的左侧显示的复选标记,它受以下CSS类选择器的控制:

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

复选框的CSS属性

width
图标宽度。
height
图标高度。
background-image
项目图像。
background-position

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

另请参阅 CSS脚本.

示例 — 将复选标记图标设置为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属性

边界
输入字段周围的边框。
width
输入字段宽度。
margin
输入字段边距。
填充
输入字段边距。

示例 — 要将自定义大小输入字段设置为具有一个像素灰色边框、边距、内边距和70像素宽:

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

如果需要垂直滚动,则滚动条将在对话框右边缘附近的面板中呈现,该面板由以下CSS类选择器控制:

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

对话框滚动面板的CSS属性

width
滚动面板宽度。

示例 — 将滚动面板的宽度设置为44像素

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

滚动条区域的外观可通过以下CSS类选择器来控制:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

滚动条的CSS属性

width
滚动条宽度。
顶端
垂直滚动条从滚动面板顶部偏移。
底部
垂直滚动条从滚动面板底部偏移。
水平滚动条从滚动面板的右边缘偏移。

示例 — 设置一个宽度为28像素的滚动条,该滚动条在滚动面板的顶部、右侧和底部具有8像素边距:

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

滚动条轨道是上下滚动按钮之间的区域。 组件会自动设置轨道的位置和高度。 使用以下CSS类选择器控制跟踪

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

滚动条轨道的CSS属性

width
轨道宽度。
background-color
跟踪背景颜色。

示例 — 设置宽度为28像素且背景为灰色的滚动条轨道:

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

滚动条缩略图在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制。 但是,缩略图高度不会因内容量而动态变化。 可以使用以下CSS类选择器配置缩略图高度和其他方面:

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

滚动条缩略图的CSS属性

width
缩略图宽度。
height
缩略图高度。
上内边距
轨道顶部之间的垂直边距。
底部填充
轨道底部之间的垂直边距。
background-image
为给定的缩略图状态显示的图像。
background-position

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

另请参阅 CSS脚本.

NOTE
缩略图支持 state 属性选择器,可用于将不同的外观应用于不同的缩略图状态: updownover、和 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定位滚动按钮 topleftbottom、和 right 属性。 相反,查看器逻辑会自动定位它们。

顶部和底部滚动按钮的CSS属性

width
按钮宽度。
height
按钮高度。
background-image
针对给定按钮状态显示的图像。
background-position

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

另请参阅 CSS脚本.

NOTE
这些按钮支持 state 属性选择器,可用于将不同的外观应用于不同的按钮状态: updownover、和 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