文档Dynamic Media查看器参考指南

链接共享

最近更新： 2024年7月20日
  • 主题：

创建对象：

  • 开发人员
  • 用户

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

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

.s7video360viewer .s7linkshare

链接共享工具的​ CSS属性

宽度按钮宽度。
高度按钮高度。
背景图像针对给定按钮状态显示的图像。
背景位置

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

请参阅 CSS Sprite。

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

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

按钮工具提示可以本地化。 请参阅用户界面元素的本地化。

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

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

使用以下CSS类选择器控制活动对话框时覆盖网页的背景叠加：

.s7video360viewer .s7linkdialog .s7backoverlay

背景叠加的​ CSS属性

不透明度背景叠加不透明度。
背景色背景叠加颜色。

示例 — 将背景叠加设置为具有70%不透明度的灰色：

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

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

.s7video360viewer .s7linkdialog .s7dialog

对话框的CSS属性

边框半径对话框边框半径（如果对话框不占用整个浏览器）。
背景色对话框背景颜色。
宽度应取消设置或设置为100%，在这种情况下，对话框会占用整个浏览器窗口（触控设备首选此模式）。
高度应取消设置或设置为100%，在这种情况下，对话框会占用整个浏览器窗口（触控设备首选此模式）。

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

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

对话框标题由图标、标题文本和关闭按钮组成。 标头容器由以下CSS类选择器控制：

.s7video360viewer .s7linkdialog .s7dialogheader

对话框标头的​ CSS属性

填充标题内容的内部边距。

图标和标题文本将封装到由以下CSS类选择器控制的额外容器中：

.s7video360viewer .s7linkdialog .s7dialogheader .s7dialogline

对话框行的CSS属性

填充标题图标和标题的内边距

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

.s7video360viewer .s7linkdialog .s7dialogheadericon

对话框标题图标的CSS属性

宽度图标宽度。
高度图标高度。
背景图像图标图像。
背景位置

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

请参阅 CSS Sprite。

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

.s7video360viewer .s7linkdialog .s7dialogheadertext

对话框标题文本的CSS属性

字体粗细字体粗细。
字体大小字体高度。
字体系列字体系列。
填充内部文本边距。

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

.s7video360viewer .s7linkdialog .s7closebutton

关闭按钮的​ CSS属性

前相对于标题容器的垂直按钮位置。
右相对于标题容器的水平按钮位置。
宽度按钮宽度。
高度按钮高度。
填充按钮的内边距。
背景图像每个状态的按钮图像。
背景位置

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

请参阅 CSS Sprite。

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

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

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

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

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

.s7video360viewer .s7linkdialog .s7dialogfooter

对话框页脚的​ CSS属性

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

页脚有一个内部容器，用于保存按钮。 可使用以下CSS类选择器来控制分类：

.s7video360viewer .s7linkdialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

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

使用以下CSS类选择器可控制全选按钮：

.s7video360viewer .s7linkdialog .s7dialogactionbutton

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

“全选”按钮的​ CSS属性

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

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

.s7video360viewer .s7linkdialog .s7dialogcancelbutton

对话框取消按钮的​ CSS属性

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

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

.s7video360viewer .s7linkdialog .s7dialogfooter .s7button

按钮的​ CSS属性

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

可以本地化按钮工具提示。 请参阅用户界面元素的本地化。

示例 — 使用64 x 34“取消”按钮设置对话框页脚，该按钮具有针对每个按钮状态不同的文本颜色和背景颜色：

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

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

.s7video360viewer .s7linkdialog .s7dialogviewarea

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

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

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

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

所有表单内容（如标签和输入字段）都驻留在由以下CSS类选择器控制的容器中：

.s7video360viewer .s7linkdialog .s7dialogbody

对话框正文的CSS属性

填充内边距。

示例 — 将表单内容设置为具有十像素填充：

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

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

.s7video360viewer .s7linkdialog .s7dialoglabel

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

对话框标签的​ CSS属性

字体粗细标签字体粗细。
字体大小标签字体大小。
字体系列标签字体系列。
颜色标签文本颜色。

可以本地化对话框标签。 请参阅用户界面元素的本地化。

示例 — 将所有标签设置为灰色、粗体加九像素字体：

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

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

.s7video360viewer .s7linkdialog .s7dialoginputwide

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

宽度
文本宽度。
填充
内边距。

示例 — 将文本副本设置为430像素宽，并在底部填充10像素：

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

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

.s7video360viewer .s7linkdialog .s7dialoginputcontainer

对话框输入容器的​ CSS属性

边框
共享链接容器周围的边框。
填充
内边距。

示例 — 在嵌入代码文本周围设置一个像素灰色边框，并具有九个像素的内边距：

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

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

.s7video360viewer .s7linkdialog .s7dialoglink

对话框共享链接的​ CSS属性

宽度
共享链接宽度。

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

.s7video360viewer .s7linkdialog .s7dialoglink {
    width: 450px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8