文档Dynamic Media查看器参考指南

打印 print

Last update: Sat Nov 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 开发人员
  • 用户

打印工具由添加到控制栏的按钮以及激活工具时显示的模式对话框组成。

使用以下CSS类选择器控制打印按钮的外观：

.s7ecatalogsearchviewer .s7print

打印按钮的CSS属性

上边距
从控件栏顶部的偏移。
左边距
与左侧的下一个按钮或控制栏左侧的距离（如果该按钮是行中的第一个按钮）。
width
按钮的宽度。
height
按钮的高度。
background-image
针对给定按钮状态显示的图像。
background-position

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

另请参阅 CSS脚本.

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

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

示例 — 设置一个28 x 28像素的打印按钮，并针对四种不同的按钮状态分别显示不同的图像。

.s7ecatalogsearchviewer .s7print {
margin-top: 4px;
margin-left: 10px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7print[state='up'] {
background-image:url(images/v2/Print_dark_up.png);
}
.s7ecatalogsearchviewer .s7print[state='over'] {
background-image:url(images/v2/Print_dark_over.png);
}
.s7ecatalogsearchviewer .s7print[state='down'] {
background-image:url(images/v2/Print_dark_down.png);
}
.s7ecatalogsearchviewer .s7print[state='disabled'] {
background-image:url(images/v2/Print_dark_disabled.png);
}

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

.s7ecatalogsearchviewer .s7printdialog .s7backoverlay

背面叠加的CSS属性

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

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

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

默认情况下，模式对话框以桌面系统屏幕的中心位置显示。 该对话框的位置和大小由组件管理。 该对话框可通过以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

对话框的CSS属性

border-radius
对话框边框半径。
background-color
对话框背景颜色；

示例 — 要设置带有灰色背景的对话框：

.s7ecatalogsearchviewer .s7printdialog .s7dialog {
background-color: #dddddd;
}

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

对话框标题的CSS属性

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

对话框行的CSS属性

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

对话框标题图标的CSS属性

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

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

另请参阅 CSS脚本.

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

对话框标题文本的CSS属性

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

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

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

关闭按钮的​ CSS属性

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

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

另请参阅 CSS脚本.

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

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

示例 — 要设置带内边距的对话框标题，请设置22 x 22像素图标和粗体16点标题。 最后，一个28 x 28像素的“关闭”按钮将对话框容器顶部的2个像素和右侧的2个像素放置在一起：

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

对话框页脚由“取消”和“发送到打印”按钮组成。 使用以下CSS类选择器控制页脚容器：

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter

对话框页脚的CSS属性

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogcancelbutton

对话框取消按钮的CSS属性

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

使用以下CSS类选择器控制“发送到打印”按钮：

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

对话框操作按钮的CSS属性

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

按钮的CSS属性

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

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

示例 — 要设置一个对话框页脚，其中具有64 x 34 “取消”按钮和96 x 34 “发送到打印”按钮，并且每个按钮状态的文本颜色和背景颜色不同：

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

主对话框区域（在页眉和页脚之间）包含对话框内容。 在所有情况下，此区域的宽度均由组件管理，因此无法在CSS中设置此区域。 主对话框区域由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea

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

height
主对话框区域的高度。
background-color
主对话框区域的背景颜色。
margin
外边距。

示例 — 要将主对话框区域设置为具有自动计算的高度，具有十像素边距，并使用白色背景：

.s7ecatalogsearchviewer .s7printdialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:auto;
}

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody

对话框正文的​ CSS属性

填充
内边距。

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogbody {
    padding: 10px;
}

对话框表单是逐行填充的，其中每一行都带有表单内容的一部分（如标签和文本输入字段）。 使用以下CSS类选择器控制单个表单行：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

对话框行的CSS属性

填充
内边距。

示例 — 要设置对话框表单，使每行有十个像素填充：

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline {
    padding: 10px;
}

对话框内容块的大小由以下CSS类选择器控制：

 .s7ecatalogsearchviewer .s7printdialog .s7dialoginputwide

对话框输入宽度的CSS属性

width
块宽度。
填充
内边距。

示例 — 将内容块设置为宽度为430像素并在底部具有10像素填充：

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

对话框表单中的所有静态标签均由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

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

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

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

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

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

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

输入控件将封装到容器中，并使用以下CSS类选择器进行控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer

对话框输入容器的CSS属性

左内边距
内边距。

示例 — 从对话框的左边缘设置30像素填充。

.s7ecatalogsearchviewer .s7printdialog .s7dialoginputcontainer {
    padding-left: 30px;
}

单选按钮及其标题文本由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption

对话框选项的CSS属性

width
带有标题的单选按钮的总宽度。
color
题注文本颜色。

单选按钮及其标题之间的间距由以下CSS类选择器控制：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

对话框选项输入的CSS属性

右边距
单选按钮及其标题之间的间距。

使用以下CSS类选择器控制用于打印范围选择的数字选择器

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

对话框打印范围的CSS属性

width
数字选取器的宽度。
margin
数字选取器周围的间距。

示例 — 将所有单选按钮设置为带黑色文本的150像素宽、10像素间距和42像素宽数字选取器：

.s7ecatalogsearchviewer .s7printdialog .s7dialogoption {
    color: #000000;
    width: 150px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogoption input {
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7printdialog .s7dialogrange {
    margin-left: 10px;
    margin-right: 10px;
    width: 42px;
}

使用以下CSS类选择器控制页面范围选择区和打印布局区之间的水平分隔符：

 .s7ecatalogsearchviewer
.s7printdialog .s7horizontaldivider

水平分隔线的CSS属性

边界
分隔线周围的边框。
填充
内边距。
width
分隔线宽度。
margin
外边距

示例 — 设置一个430像素宽的灰度分隔线，其两侧具有10像素的垂直边距，顶部具有10像素的边距：

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8