打印工具由添加到控制栏的按钮和激活工具时显示的模态对话框组成。
使用以下CSS类选择器控制打印按钮的外观:
.s7ecatalogsearchviewer .s7print
打印按钮的CSS属性
边距 — 顶部 |
与控制栏顶部的偏移。 |
边距 — 左 |
左侧的到下一个按钮的距离,或者如果此按钮是一行中的第一个按钮,则位于控制栏的左侧。 |
width |
按钮的宽度。 |
height |
按钮的高度。 |
背景图像 |
为给定按钮状态显示的图像。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 另请参阅 CSS Sprite . |
此按钮支持 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属性
不透明度 |
背景叠加的不透明度。 |
背景颜色 |
背景叠加图的颜色。 |
示例 — 要将背景叠加设置为灰色且不透明度为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属性
宽度 |
图标宽度。 |
高度 |
图标高度。 |
背景图像 |
图标图像。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 另请参阅 CSS Sprite . |
通过以下CSS类选择器控制标题:
.s7ecatalogsearchviewer .s7printdialog .s7dialogheadertext
对话框标题文本的CSS属性
字体粗细 |
字体粗细。 |
字体大小 |
字体高度。 |
字体系列 |
字体系列。 |
填充 |
内部文本内边距。 |
使用以下CSS类选择器控制“关闭”按钮:
.s7ecatalogsearchviewer .s7printdialog .s7closebutton
关闭按钮的CSS属性
顶端 |
相对于标题容器的垂直按钮位置。 |
右 |
相对于标题容器的水平按钮位置。 |
宽度 |
按钮宽度。 |
高度 |
按钮高度。 |
填充 |
按钮的内边距。 |
背景图像 |
按钮图像。 |
背景位置 |
在图稿Sprite中放置(如果使用CSS Sprite)。 另请参阅 CSS Sprite . |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
“关闭”按钮工具提示和对话框标题可以本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置带有内边距、22 x 22像素图标和粗体16点标题的对话框标题。 最后,一个28 x 28像素的“关闭”按钮位于距对话框容器顶部两个像素和距离对话框容器右侧两个像素的位置:
.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属性
宽度 |
按钮宽度。 |
高度 |
按钮高度。 |
color |
每个状态的按钮文本颜色。 |
背景颜色 |
每个状态的按钮背景颜色。 |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
通过以下CSS类选择器控制“发送到打印”按钮:
.s7ecatalogsearchviewer .s7printdialog .s7dialogactionbutton
对话框操作按钮的CSS属性
宽度 |
按钮宽度。 |
高度 |
按钮高度。 |
颜色 |
每个状态的按钮文本颜色。 |
背景颜色 |
每个状态的按钮背景颜色。 |
此按钮支持 state
属性选择器,用于将不同的外观应用于不同的按钮状态。
此外,两个按钮共享常用的CSS类,此类可包含与其他对话框按钮相同的CSS设置:
.s7ecatalogsearchviewer .s7printdialog .s7dialogfooter .s7button
按钮的CSS属性
字体粗细 |
按钮字体粗细。 |
字体大小 |
按钮字体大小。 |
字体系列 |
按钮字体系列。 |
行高 |
按钮内的文本高度。 影响垂直对齐。 |
框阴影 |
投影。 |
边距右侧 |
右按钮边距。 |
可以对按钮工具提示进行本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 要设置一个对话框页脚,其中显示64 x 34 “Cancel(取消)”按钮和96 x 34 “Send to Print(发送到打印)”按钮,并且每个按钮状态的文本颜色和背景颜色不同:
.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属性
高度 |
主对话框区域的高度。 |
背景颜色 |
主对话框区域的背景颜色。 |
margin |
外边距。 |
示例 — 要设置一个主对话框区域,使其具有自动计算的高度、具有10个像素边距,并使用白色背景,请执行以下操作:
.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属性
填充 |
内线填充。 |
示例 — 要设置一个对话框表单,使其每行具有10个像素内边距:
.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属性。
字体粗细 |
标签字体粗细。 |
字体大小 |
标签字体大小。 |
字体系列 |
标记字体系列。 |
颜色 |
标签文本颜色。 |
可以对对话框标签进行本地化。 请参阅 用户界面元素的本地化 以了解更多信息。
示例 — 将所有标签设置为灰色、粗体,字体为9像素:
.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;
}