链接共享

上次更新: 2023-11-04
  • 创建对象:
  • Developer
    User

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

链接共享按钮的外观由以下CSS类选择器控制:

.s7videoviewer .s7linkshare

链接共享工具的CSS属性

width

按钮宽度。

height

按钮高度。

background-image

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

background-position

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

请参阅 CSS脚本 .

注意

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

可以通过设置从Social共享面板中删除按钮 display:none CSS属性的CSS类。

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

示例 — 设置一个28 x 28像素的链接共享按钮,并针对四种不同的按钮状态分别显示不同的图像:

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

使用以下CSS类选择器可控制对话框处于活动状态时覆盖网页的背景叠加:

.s7videoviewer .s7linkdialog .s7backoverlay

背景叠加的CSS属性

不透明度

背景叠加不透明度。

background-color

背景叠加颜色。

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

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

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

.s7videoviewer .s7linkdialog .s7dialog

对话框的CSS属性

border-radius

对话框边框半径(如果对话框不占用整个浏览器)。

background-color

对话框背景颜色。

width

应取消设置或设置为100%,在这种情况下,对话框会占用整个浏览器窗口(触控设备首选此模式)。

height

应取消设置或设置为100%,在这种情况下,对话框会占用整个浏览器窗口(触控设备首选此模式)。

示例 — 设置对话框以使用整个浏览器窗口并在触控设备上使用白色背景:

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

对话框标题由图标、标题文本和关闭按钮组成。 标题容器的控制方式

.s7videoviewer .s7linkdialog .s7dialogheader

对话框标题的CSS属性

填充

标题内容的内部边距。

图标和标题文本将封装在一个额外的容器中,由控制

.s7videoviewer .s7linkdialog .s7dialogheader .s7dialogline

对话框行的CSS属性

填充

标题图标和标题的内边距

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

.s7videoviewer .s7linkdialog .s7dialogheadericon

对话框标题图标的CSS属性

width

图标宽度。

height

图标高度。

background-image

图标图像。

background-position

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

请参阅 CSS脚本 .

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

.s7videoviewer .s7linkdialog .s7dialogheadertext

对话框标题文本的CSS属性

font-weight

字体粗细。

font-size

字体高度。

字体系列

字体系列。

填充

内部文本边距。

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

.s7videoviewer .s7linkdialog .s7closebutton

关闭按钮的​CSS属性

顶端

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

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

width

按钮宽度。

height

按钮高度。

填充

按钮的内边距。

background-image

每个状态的按钮图像。

background-position

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

请参阅 CSS脚本 .

注意

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

可以本地化“关闭”按钮工具提示和对话框标题。 请参阅 用户界面元素的本地化 以了解更多信息。

示例 — 要设置带有内边距的对话框标题,请设置22 x 12像素图标和粗体16点标题。 最后,一个28 x 28像素的“关闭”按钮,它位于对话框容器顶部两个像素和右侧两个像素的位置:

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

对话框页脚包含“取消”按钮。 使用以下CSS类选择器控制页脚容器:

.s7videoviewer .s7linkdialog .s7dialogfooter

对话框页脚的CSS属性

边界

可用于在视觉上分隔页脚和对话框其余部分的边框。

页脚具有用于保存按钮的内部容器。 可使用以下CSS类选择器来控制分类:

.s7videoviewer .s7linkdialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

填充

页脚和按钮之间的内边距。

全选按钮由以下CSS类选择器控制:

.s7videoviewer .s7linkdialog .s7dialogactionbutton

该按钮仅在桌面系统上可用。

全选按钮的CSS属性

width

按钮宽度。

height

按钮高度。

color

每个状态的按钮文本颜色。

background-color

每个状态的按钮背景颜色。

注意

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

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

.s7videoviewer .s7linkdialog .s7dialogcancelbutton

对话框取消按钮的CSS属性

width

按钮宽度。

height

按钮高度。

color

每个状态的按钮文本颜色。

background-color

每个状态的按钮背景颜色。

注意

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

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

.s7videoviewer .s7linkdialog .s7dialogfooter .s7button

按钮的CSS属性

font-weight

按钮字体粗细。

font-size

按钮字体大小。

字体系列

按钮字体系列。

line-height

按钮内的文本高度。 影响垂直对齐。

盒阴影

投影。

右边距

右按钮边距。

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

示例 — 使用64 x 34 Cancel按钮设置对话框页脚,每种按钮状态的文本颜色和背景颜色不同:

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

主对话框区域(在页眉和页脚之间)包含对话框内容。 在任何情况下,组件都管理此区域的宽度 — 无法在CSS中设置此区域。 主对话框区域由以下CSS类选择器控制:

.s7videoviewer .s7linkdialog .s7dialogviewarea

对话框查看区域的​CSS属性

height

主对话框区域的高度。 仅当对话框在桌面模式下工作时,才应指定它。 当调整对话框的大小以占据整个浏览器窗口时,此选项不适用。

background-color

主对话框区域的背景颜色。

margin

外边距。

示例 — 要将主对话框区域设置为300像素高度,具有十像素边距,并使用白色背景:

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

所有表单内容(如标签和输入字段)都驻留在由控制的容器中

.s7videoviewer .s7linkdialog .s7dialogbody

对话框正文的​CSS属性

填充

内边距。

示例 — 要将表单内容设置为具有十个像素的填充:

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

对话框表单中的所有静态标签都由控制

.s7videoviewer .s7linkdialog .s7dialoglabel

此类不适合控制标签大小或位置,因为您可以将其应用于表单用户界面各个位置的文本。

对话框标签的​CSS属性。 ​

font-weight

标签字体粗细。

font-size

标签字体大小。

字体系列

标签字体系列。

color

标签文本颜色。

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

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

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

显示在链接顶部的文本副本的大小可通过以下CSS类选择器进行控制:

.s7videoviewer .s7linkdialog .s7dialoginputwide

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

width

文本宽度。

填充

内边距。

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

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

共享链接将封装在容器中,并使用以下CSS类选择器进行控制:

.s7videoviewer .s7linkdialog .s7dialoginputcontainer

对话框输入容器的CSS属性

边界

共享链接容器周围的边框。

填充

内边距。

示例 — 要在嵌入代码文本周围设置一个像素灰色边框,并且边框间距为9像素:

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

共享链接本身可通过以下CSS类选择器进行控制:

.s7videoviewer .s7linkdialog .s7dialoglink

对话框共享链接的CSS属性

width

共享链接宽度。

示例 — 将共享链接设置为450像素宽:

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

在此页面上