打印

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

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

.s7ecatalogsearchviewer .s7print

打印按钮的CSS属性

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

示例 — 设置一个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属性

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

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

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

.s7ecatalogsearchviewer .s7kprintdialog .s7dialog

对话框的CSS属性

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

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader

对话框标题的CSS属性

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheader .s7dialogline

对话框行的CSS属性

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadericon

对话框标题图标的CSS属性

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext

对话框标题文本的CSS属性

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

.s7ecatalogsearchviewer .s7printdialog .s7closebutton

关闭按钮的​CSS属性

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

示例 — 要设置带内边距的对话框标题，请设置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属性

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton

对话框操作按钮的CSS属性

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button

按钮的CSS属性

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

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

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

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

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

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialoglabel

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

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

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

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

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

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogoptioninput

对话框选项输入的CSS属性

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

.s7ecatalogsearchviewer .s7printdialog .s7dialogrange

对话框打印范围的CSS属性

示例 — 将所有单选按钮设置为带黑色文本的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属性

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

.s7ecatalogsearchviewer .s7printdialog .s7horizontaldivider {
    border-top: 1px solid #aaaaaa;
    margin-top: 10px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 430px;
}