嵌入共享工具由添加到“社交”共享面板的按钮以及激活该工具时显示的模式对话框组成。 按钮的位置完全由社交共享工具管理。
嵌入共享按钮的外观可通过以下CSS类选择器来控制:
.s7smartcropvideoviewer .s7embedshare
嵌入共享工具的CSS属性
width |
按钮宽度。 |
height |
按钮高度。 |
background-image |
针对给定按钮状态显示的图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 请参阅 CSS脚本 . |
此按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态。
可以通过设置从Social共享面板中删除按钮 display:none
CSS属性的CSS类。
按钮工具提示可以本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置一个28 x 28像素的嵌入共享按钮,并为四种不同的按钮状态分别显示不同的图像:
.s7smartcropvideoviewer .s7embedshare {
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7smartcropvideoviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7smartcropvideoviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7smartcropvideoviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}
使用以下CSS类选择器可控制对话框处于活动状态时覆盖网页的背景叠加:
.s7smartcropvideoviewer .s7embeddialog .s7backoverlay
背景叠加的CSS属性
不透明度 |
背景叠加不透明度。 |
background-color |
背景叠加颜色。 |
示例 — 要将背景叠加设置为具有70%不透明度的灰色,请执行以下操作:
.s7smartcropvideoviewer .s7embeddialog .s7backoverlay {
opacity:0.7;
background-color:#222222;
}
默认情况下,模式对话框会以桌面系统屏幕的中心位置显示,并在触控设备上显示整个网页区域。 在所有情况下,对话框的位置和大小都由组件管理。 使用以下CSS类选择器控制该对话框:
.s7smartcropvideoviewer .s7embeddialog .s7dialog
对话框的CSS属性
border-radius |
对话框边框半径(如果对话框不占用整个浏览器)。 |
background-color |
对话框背景颜色。 |
width |
应取消设置或设置为100%,在这种情况下,对话框会占用整个浏览器窗口(触控设备首选此模式)。 |
height |
应取消设置或设置为100%,在这种情况下,对话框会占用整个浏览器窗口(触控设备首选此模式)。 |
示例 — 设置对话框以使用整个浏览器窗口并在触控设备上使用白色背景:
.s7smartcropvideoviewer .s7touchinput .s7embeddialog .s7dialog {
width:100%;
height:100%;
background-color: #ffffff;
}
对话框标题由图标、标题文本和关闭按钮组成。 标题容器的控制方式
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader
对话框标题的CSS属性
填充 |
标题内容的内部边距。 |
图标和标题文本将封装在一个额外的容器中,由控制
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader .s7dialogline
对话框行的CSS属性
填充 |
标题图标和标题的内边距 |
标题图标由以下CSS类选择器控制
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadericon
对话框标题图标的CSS属性
width |
图标宽度。 |
height |
图标高度。 |
background-image |
图标图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 请参阅 CSS脚本 . |
标题标题由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadertext
对话框标题文本的CSS属性
font-weight |
字体粗细。 |
font-size |
字体高度。 |
字体系列 |
字体系列。 |
填充 |
内部文本边距。 |
使用以下CSS类选择器控制“关闭”按钮:
.s7smartcropvideoviewer .s7embeddialog .s7closebutton
关闭按钮的CSS属性
顶端 |
相对于标题容器的垂直按钮位置。 |
右 |
相对于标题容器的水平按钮位置。 |
width |
按钮宽度。 |
height |
按钮高度。 |
填充 |
按钮的内边距。 |
background-image |
每个状态的按钮图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 请参阅 CSS脚本 . |
此按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态。
可以本地化“关闭”按钮工具提示和对话框标题。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置带有内边距的对话框标题,请设置24 x 14像素图标、粗体16点标题和28 x 28像素关闭按钮。 最后,将其从顶部放置两个像素,从对话框容器右侧放置两个像素:
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader {
padding: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheader .s7dialogline {
padding: 10px 10px 2px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadericon {
background-image: url("images/sdk/dlgembed_cap.png");
height: 14px;
width: 24px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogheadertext {
font-size: 16pt;
font-weight: bold;
padding-left: 16px;
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton {
top:2px;
right:2px;
padding:8px;
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='up'] {
background-image:url(images/sdk/close_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='over'] {
background-image:url(images/sdk/close_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='down'] {
background-image:url(images/sdk/close_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7closebutton[state='disabled'] {
background-image:url(images/sdk/close_disabled.png);
}
对话框页脚包含“取消”按钮。 使用以下CSS类选择器控制页脚容器:
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter
对话框页脚的CSS属性
边界 |
可用于在视觉上分隔页脚和对话框其余部分的边框。 |
页脚具有用于保存按钮的内部容器。 可使用以下CSS类选择器来控制分类:
.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer
对话框按钮容器的CSS属性
填充 |
页脚和按钮之间的内边距。 |
全选按钮由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton
该按钮仅在桌面系统上可用。
全选按钮的CSS属性
width |
按钮宽度。 |
height |
按钮高度。 |
color |
每个状态的按钮文本颜色。 |
background-color |
每个状态的按钮背景颜色。 |
全选按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态。
使用以下CSS类选择器可控制“取消”按钮:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton
对话框取消按钮的CSS属性
width |
按钮宽度。 |
height |
按钮高度。 |
color |
每个状态的按钮文本颜色。 |
background-color |
每个状态的按钮背景颜色。 |
取消按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态。
此外,这两个按钮共享公用的CSS类,该类可以包含与其他对话框按钮相同的CSS设置:
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button
按钮的CSS属性
font-weight |
按钮字体粗细。 |
font-size |
按钮字体大小。 |
字体系列 |
按钮字体系列。 |
line-height |
按钮内的文本高度。 影响垂直对齐。 |
盒阴影 |
投影。 |
右边距 |
右按钮边距。 |
可以本地化按钮工具提示。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 使用64 x 34 Cancel按钮设置对话框页脚,每种按钮状态的文本颜色和背景颜色不同:
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter {
border-top: 1px solid #909090;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogbuttoncontainer {
padding-bottom: 6px;
padding-top: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogfooter .s7button {
box-shadow: 1px 1px 1px #999999;
color: #FFFFFF;
font-size: 9pt;
font-weight: bold;
line-height: 34px;
margin-right: 10px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton {
width:64px;
height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
background-color:#666666;
color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
background-color:#555555;
color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
background-color:#555555;
color:#ffffff;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton {
width:82px;
height:34px;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
background-color:#333333;
color:#dddddd;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
background-color:#222222;
color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
background-color:#222222;
color:#cccccc;
}
.s7smartcropvideoviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
background-color:#b2b2b2;
color:#dddddd;
}
主对话框区域(在页眉和页脚之间)右侧包含可滚动的对话框内容和滚动面板。 在所有情况下,此区域的宽度均由组件管理,因此无法在CSS中设置此区域。 主对话框区域由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea
对话框查看区域的CSS属性
height |
主对话框区域的高度。 仅当对话框在桌面模式下工作时,才应指定它。 当调整对话框的大小以占据整个浏览器窗口时,此选项不适用。 |
background-color |
主对话框区域的背景颜色。 |
margin |
外边距。 |
示例 — 要将主对话框区域设置为300像素高度,具有十像素边距,并使用白色背景:
.s7smartcropvideoviewer .s7embeddialog .s7dialogviewarea {
background-color:#ffffff;
margin:10px;
height:300px;
}
所有表单内容(如标签和输入字段)都驻留在由控制的容器中
.s7smartcropvideoviewer .s7embeddialog .s7dialogbody
如果此容器的高度看起来比主对话框区域大,则组件会自动启用垂直滚动。
对话框正文的CSS属性
填充 |
内边距。 |
示例 — 要将表单内容设置为具有十个像素的填充:
.s7smartcropvideoviewer .s7embeddialog .s7dialogbody {
padding: 10px;
}
对话框表单中的所有静态标签都由控制
.s7smartcropvideoviewer .s7embeddialog .s7dialoglabel
此类不适合控制标签大小或位置,因为您可以将其应用于表单用户界面各个位置的文本。
对话框标签的CSS属性。
font-weight |
标签字体粗细。 |
font-size |
标签字体大小。 |
字体系列 |
标签字体系列。 |
color |
标签文本颜色。 |
可以本地化对话框标签工具提示。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 将所有标签设置为灰色,粗体带九像素字体:
.s7smartcropvideoviewer .s7embeddialog .s7dialoglabel {
color: #666666;
font-size: 9pt;
font-weight: bold;
}
显示在嵌入代码顶部的文本副本的大小由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputwide
对话框输入范围字段的CSS属性
width |
输入字段宽度。 |
填充 |
内边距。 |
示例 — 将文本副本的宽度设置为430像素,并在底部填充10像素:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputwide {
padding-bottom: 10px;
width: 430px;
}
嵌入代码将封装在容器中,并使用以下CSS类选择器进行控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer
对话框输入容器的CSS属性
width |
嵌入代码容器的宽度。 |
边界 |
嵌入代码容器周围的边框。 |
填充 |
内边距。 |
示例 — 要在嵌入代码文本周围设置1像素灰色边框,请使其宽度为430像素,并具有10像素填充:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer {
border: 1px solid #CCCCCC;
padding: 10px;
width: 430px;
}
使用以下CSS类选择器控制实际的嵌入代码文本:
.s7smartcropvideoviewer .s7embeddialog .s7dialoginputcontainer
对话框输入容器的CSS属性
自动换行 |
文字环绕样式。 |
示例 — 设置要使用的嵌入代码 break-word
文字换行:
.s7smartcropvideoviewer .s7embeddialog .s7dialogmessage {
word-wrap: break-word;
}
嵌入大小标签和下拉列表位于对话框底部,并放入由以下CSS类选择器控制的容器中:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel
对话框嵌入大小面板的CSS属性
填充 |
内边距。 |
示例 — 将嵌入大小面板设置为具有十个填充像素:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel {
padding: 10px;
}
嵌入大小标签的大小和对齐方式由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizepanel
对话框嵌入大小面板的CSS属性
vertical-align |
垂直标签对齐方式。 |
width |
标签宽度。 |
示例 — 将嵌入大小标签设置为顶部对齐和80像素宽:
.s7smartcropvideoviewer .s7embeddialog .s7dialogembedsizelabel {
vertical-align: top;
width: 80px;
}
嵌入大小组合框的宽度由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7combobox
组合框的CSS属性
width |
组合框宽度。 |
组合框支持 expanded
属性选择器,可能的值为 true
和 false
. 此 true
当组合框显示某个预定义的嵌入大小时使用value,因此应采用所有可用宽度。 此 false
当在组合框中选择了“自定义大小”选项时,将使用该值,因此应将其收缩以便为自定义宽度和高度输入字段留出空间。
示例 — 将嵌入大小组合框设置为在显示预定义项目时为300像素宽,在显示自定义大小时为110像素宽:
.s7smartcropvideoviewer .s7embeddialog .s7combobox[expanded="true"] {
width: 300px;
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox[expanded="false"] {
width: 110px;
}
组合框文本的高度由特殊内部元素定义,并使用以下CSS类选择器进行控制:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxtext
组合框文本的CSS属性
height |
组合框文本高度。 |
示例 — 要将嵌入大小组合框文本高度设置为40像素,请执行以下操作:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxtext {
height: 40px;
}
组合框的右侧有一个“下拉”按钮,它通过以下CSS类选择器进行控制:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton
组合框按钮的CSS属性
顶端 |
组合框内的垂直按钮位置。 |
右 |
水平按钮在组合框中的位置。 |
width |
按钮宽度。 |
height |
按钮高度。 |
background-image |
每个状态的按钮图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 请参阅 CSS脚本 . |
此按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态。
示例 — 将“下拉”按钮设置为28 x 28像素,并为每种状态提供单独的图像:
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton {
width:28px;
height:28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
background-image:url(images/sdk/cboxbtndn_up.png);
}
使用以下CSS类选择器来控制在打开组合框时显示嵌入大小列表的面板:
.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown
面板的大小和位置由组件控制。 无法通过CSS更改此设置。
组合框下拉列表的CSS属性
边界 |
面板边框。 |
示例 — 将组合框面板设置为具有一个像素灰色边框:
.s7smartcropvideoviewer .s7embeddialog .s7comboboxdropdown {
border: 1px solid #CCCCCC;
}
下拉面板中由以下CSS类选择器控制的单个项目:
.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor
下拉项锚点的CSS属性
background-color |
项目背景。 |
示例 — 将组合框面板项目设置为具有白色背景:
.s7smartcropvideoviewer .s7embeddialog .s7dropdownitemanchor {
background-color: #FFFFFF;
}
组合框面板中选定项目的左侧显示的复选标记,它受以下CSS类选择器的控制:
.s7smartcropvideoviewer .s7embeddialog .s7checkmark
复选框的CSS属性
width |
图标宽度。 |
height |
图标高度。 |
background-image |
项目图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 请参阅 CSS脚本 . |
示例 — 将复选标记图标设置为25 x 25像素:
.s7smartcropvideoviewer .s7embeddialog .s7checkmark {
background-image: url("images/sdk/cboxchecked.png");
height: 25px;
width: 25px;
}
在嵌入大小组合框中选择“自定义大小”选项后,对话框在右侧显示两个额外的输入字段,以允许用户输入自定义嵌入大小。 这些字段将封装在容器中,该容器由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel
对话框自定义大小面板的CSS属性
左侧 |
距嵌入大小组合框的距离。 |
示例 — 将自定义大小输入字段面板设置为组合框右侧20像素:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsizepanel {
left: 20px;
}
每个自定义大小输入字段都包装在一个容器中,该容器可呈现边框并设置字段之间的边距。 可使用以下CSS类选择器来控制分类:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize
对话框自定义大小的CSS属性
边界 |
输入字段周围的边框。 |
width |
输入字段宽度。 |
margin |
输入字段边距。 |
填充 |
输入字段边距。 |
示例 — 将自定义大小输入字段设置为具有一个像素灰色边框、边距、内边距和70像素宽:
.s7smartcropvideoviewer .s7embeddialog .s7dialogcustomsize {
border: 1px solid #CCCCCC;
margin-right: 20px;
padding-left: 2px;
padding-right: 2px;
width: 70px;
}
如果需要垂直滚动,则滚动条将在对话框右边缘附近的面板中呈现,该面板由以下CSS类选择器控制:
.s7smartcropvideoviewer .s7embeddialog .s7dialogscrollpanel
对话框滚动面板的CSS属性
width |
滚动面板宽度。 |
示例 — 将滚动面板的宽度设置为44像素
.s7smartcropvideoviewer .s7embeddialog .s7dialogscrollpanel {
width: 44px;
}
使用以下CSS类选择器控制滚动条区域的外观:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar
滚动条的CSS属性
width |
滚动条宽度。 |
顶端 |
垂直滚动条从滚动面板顶部偏移。 |
底部 |
垂直滚动条从滚动面板底部偏移。 |
右 |
水平滚动条从滚动面板的右边缘偏移。 |
示例 — 设置一个宽度为28像素的滚动条,该滚动条在滚动面板的顶部、右侧和底部具有8像素边距:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar {
bottom: 8px;
right: 8px;
top: 8px;
width: 28px;
}
滚动条轨道是上下滚动按钮之间的区域。 组件会自动设置轨道的位置和高度。 使用以下CSS类选择器控制跟踪
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack
滚动条轨道的CSS属性
width |
轨道宽度。 |
background-color |
跟踪背景颜色。 |
示例 — 设置宽度为28像素且背景为灰色的滚动条轨道:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}
滚动条缩略图在滚动轨道区域内垂直移动。 其垂直位置完全由组件逻辑控制。 但是,缩略图高度不会因内容量而动态变化。 可以使用以下CSS类选择器配置缩略图高度和其他方面:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb
滚动条缩略图的CSS属性
width |
缩略图宽度。 |
height |
缩略图高度。 |
上内边距 |
轨道顶部之间的垂直边距。 |
底部填充 |
轨道底部之间的垂直边距。 |
background-image |
为给定的缩略图状态显示的图像。 |
缩略图支持 state
属性选择器,可用于将不同的外观应用于不同的缩略图状态: up
, down
, over
、和 disabled
.
示例 — 设置一个滚动条缩览图,其大小为28 x 45像素,顶部和底部有10像素边距,并且每种状态具有不同的图稿:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
height: 45px;
padding-bottom: 10px;
padding-top: 10px;
width: 28px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}
顶部和底部滚动按钮的外观可通过以下CSS类选择器进行控制:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton
无法使用CSS top、left、bottom和right属性定位滚动按钮。 相反,查看器逻辑会自动定位它们。
顶部和底部滚动按钮的CSS属性
width |
按钮宽度。 |
height |
按钮高度。 |
background-image |
针对给定按钮状态显示的图像。 |
background-position |
如果使用CSS sprite,则定位在图稿sprite中。 请参阅 CSS脚本 . |
这些按钮支持 state
属性选择器,可用于将不同的外观应用于不同的按钮状态: up
, down
, over
、和 disabled
.
可以本地化按钮工具提示。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 设置具有28 x 32像素且每种状态有不同图稿的滚动按钮:
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
width:28px;
height:32px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
background-image:url(images/sdk/scroll_up_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
background-image:url(images/sdk/scroll_up_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
width:28px;
height:32px;
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
background-image:url(images/sdk/scroll_down_up.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
background-image:url(images/sdk/scroll_down_over.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
background-image:url(images/sdk/scroll_down_down.png);
}
.s7smartcropvideoviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
background-image:url(images/sdk/scroll_down_disabled.png);
}