电子邮件共享

电子邮件共享工具由添加到Social共享面板的按钮和激活工具时显示的模式对话框组成。 按钮的位置完全由Social共享工具管理。

通过以下CSS类选择器控制电子邮件共享按钮的外观:

.s7ecatalogsearchviewer .s7emailshare

电子邮件共享工具的CSS属性

width

按钮的宽度。

height

按钮的高度。

背景图像

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

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

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

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

按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 设置一个28 x 28像素的电子邮件共享按钮,该按钮针对四个不同按钮状态中的每个状态显示一个不同的图像。

.s7ecatalogsearchviewer .s7emailshare { 
 width:28px; 
 height:28px; 
} 
.s7ecatalogsearchviewer .s7emailshare[state='up'] { 
background-image:url(images/v2/EmailShare_dark_up.png); 
} 
.s7ecatalogsearchviewer .s7emailshare[state='over'] { 
background-image:url(images/v2/EmailShare_dark_over.png); 
} 
.s7ecatalogsearchviewer .s7emailshare[state='down'] { 
background-image:url(images/v2/EmailShare_dark_down.png); 
} 
.s7ecatalogsearchviewer .s7emailshare[state='disabled'] { 
background-image:url(images/v2/EmailShare_dark_disabled.png); 
}

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

.s7ecatalogsearchviewer .s7emaildialog .s7backoverlay

背面叠加的CSS属性

不透明度

背景叠加的不透明度。

背景颜色

背景叠加图的颜色。

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

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

默认情况下,模态对话框以桌面系统的屏幕居中显示,并在触屏设备上占据整个网页区域。 在所有情况下,对话框的定位和大小调整均由组件进行管理。 使用以下CSS类选择器控制对话框:

.s7ecatalogsearchviewer .s7emaildialog .s7dialog

对话框的CSS属性

边框半径

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

背景颜色

对话框背景颜色;

宽度

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

高度

应为未设置,或设置为100%,在这种情况下,对话框将占据整个浏览器窗口(在触屏设备上首选此模式)。

示例 — 要设置对话框以使用整个浏览器窗口并在触屏设备上显示白色背景,请执行以下操作:

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader

对话框标题的CSS属性

填充

标题内容的内边距。

图标和标题文本将封装在通过

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheader .s7dialogline

对话框行的CSS属性

填充

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

通过以下CSS类选择器控制标题图标:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadericon

对话框标题图标的CSS属性

宽度

图标宽度。

高度

图标高度。

背景图像

图标图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogheadertext

对话框标题文本的CSS属性

字体粗细

字体粗细。

字体大小

字体高度。

字体系列

字体系列。

填充

内部文本内边距。

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

.s7ecatalogsearchviewer .s7emaildialog .s7closebutton

关闭按钮的CSS属性

顶端

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

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

宽度

按钮宽度。

高度

按钮高度。

填充

按钮的内边距。

背景图像

按钮图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

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

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

示例 — 要设置带有内边距、24 x 17像素图标、粗体16点标题和28 x 28像素“关闭”按钮的对话框标题,其位置为距对话框容器顶部两个像素和距对话框容器右侧两个像素:

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

对话框页脚由“取消”和“发送电子邮件”按钮组成。 使用以下CSS类选择器控制页脚容器:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter

对话框页脚的CSS属性

边界

用于以可视方式将页脚与对话框其余部分分开的边框。

页脚具有一个内部容器,该容器保留两个按钮。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbuttoncontainer

对话框按钮容器的CSS属性

填充

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogcancelbutton

对话框取消按钮的CSS属性

宽度

按钮宽度。

高度

按钮高度。

color

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

背景颜色

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

注意

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

使用以下CSS类选择器控制“发送电子邮件”按钮:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogactionbutton

对话框操作按钮的CSS属性

宽度

按钮宽度。

高度

按钮高度。

颜色

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

背景颜色

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

注意

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

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

.s7ecatalogsearchviewer .s7emaildialog .s7dialogfooter .s7button

按钮的CSS属性

字体粗细

按钮字体粗细。

字体大小

按钮字体大小。

字体系列

按钮字体系列。

行高

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

框阴影

投影。

边距右侧

右按钮边距。

可以对此按钮工具提示进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 要设置一个对话框页脚,其中包含64 x 34取消按钮和82 x 34发送电子邮件按钮,并且每个按钮状态的文本颜色和背景颜色不同:

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

主对话框区域(在页眉和页脚之间)包含右侧的可滚动对话框内容和滚动面板。 在所有情况下,组件都会管理此区域的宽度,无法在CSS中设置它。 主对话框区域通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea

对话框查看区域的CSS属性

高度

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

背景颜色

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

margin

外边距。

注意

主对话框区域支持可选的state属性选择器。 在提交电子邮件表单时,该参数会设置为sendsuccess,并且对话框会显示确认消息。 只要确认消息较小,此属性选择器就可用于在显示此确认消息时降低对话框高度。

示例 — 要将主对话框区域设置为初始高度为300像素,显示确认消息时高度为100像素,其边距为10像素,并使用白色背景:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea { 
 background-color:#ffffff; 
 margin:10px; 
 height:300px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogviewarea[state='sendsuccess'] { 
 height:100px; 
}

所有表单内容(如标签和输入字段)都位于通过以下CSS类选择器控制的容器内:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody

如果此容器的高度似乎大于主对话框区域,则组件会自动启用垂直滚动。

对话框主体的CSS属性

填充

内边距。

示例 — 将表单内容设置为具有十个像素内边距:

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

对话框表单逐行填写,其中每行都包含表单内容的一部分(如标签和文本输入字段)。 使用以下CSS类选择器控制单个表单行:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogline

对话框行的CSS属性

填充

内线填充。

示例 — 要设置一个对话框表单,使其每行具有10个像素填充:

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

对话框表单中的所有静态标签都通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoglabel

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

对话框标签的CSS属性。

字体粗细

标签字体粗细。

字体大小

标签字体大小。

字体系列

标记字体系列。

颜色

标签文本颜色。

可以对对话框标签进行本地化。 有关更多信息,请参阅用户界面元素的本地化

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

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

在表单输入字段左侧显示的所有静态标签都通过以下方式进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel

对话框输入标签的CSS属性

宽度

静态标签的宽度。

text-align

水平文本对齐方式。

边距

静态标签边距。

填充

静态标签内边距。

示例 — 要将输入字段标签设置为宽度为50像素、右对齐、内边距为10像素、右侧边距为10像素:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputlabel { 
    margin-right: 10px; 
    padding: 10px; 
    text-align: right; 
    width: 50px; 
}

每个表单输入字段都封装在容器中,允许您在输入字段周围应用自定义边框。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer

对话框输入容器的CSS属性

边界

输入字段容器周围的边框。

填充

内边距。

注意

输入字段容器支持可选的state属性选择器。 当用户在输入数据格式中出错并且内联验证失败时,该参数会设置为verifyerror。 此属性选择器可用于突出显示表单中不正确的用户输入。

从对话框主体左至右边缘的标签扩展的大多数输入字段(包括“发件人”字段和“消息”字段)都通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide

对话框输入宽字段的CSS属性

宽度

输入字段宽度。

“收件人”字段较窄,因为它为右侧的“删除电子邮件”按钮分配了空间。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort

对话框输入短字段的CSS属性

宽度

输入字段宽度。

示例 — 将表单设置为在所有输入字段周围具有一个像素灰色边框,且边框周围有9个像素的填充;对于验证失败的字段,要使用相同的红色边框,请使用250像素宽的“收件人”字段,而其余输入字段的宽度为300像素:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer { 
    border: 1px solid #CCCCCC; 
    padding: 9px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputcontainer[state="verifyerror"] { 
    border: 1px solid #FF0000; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputshort { 
    width: 250px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialoginputwide { 
    width: 300px; 
}

电子邮件消息输入字段还受以下项的额外控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage

此类允许您为基础TEXTAREA元素设置特定属性。

对话框消息的CSS属性

高度

消息高度。

自动换行

文字换行样式。

示例 — 将电子邮件高度设置为50像素,并使用break-word文字包装:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogmessage { 
    height: 50px; 
    word-wrap: break-word; 
}

“添加其他电子邮件地址”按钮允许用户以电子邮件形式添加多个地址。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton

对话框的CSS属性添加电子邮件地址按钮

高度

按钮高度。

颜色

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

背景图像

按钮图像。

背景位置

按钮图像在按钮区域内的位置。

字体粗细

按钮字体粗细。

字体大小

按钮字体大小。

字体系列

按钮字体系列。

行高

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

text-align

水平文本对齐方式。

填充

内边距。

注意

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

按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 要将“Add Ather Email Address”按钮设置为25像素高,请使用右对齐的12点粗体字体,并为每个状态使用不同的文本颜色和图像:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton { 
 text-align:right; 
 font-size:12pt; 
 font-weight:bold; 
 background-position:left center; 
 line-height:25px; 
 padding-left:30px; 
 height:25px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='up'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='down'] { 
 color:#000000; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='over'] { 
 color:#000000; 
 text-decoration:underline; 
 background-image:url(images/sdk/dlgaddplus_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogaddemailbutton[state='disabled'] { 
 color:#666666; 
 background-image:url(images/sdk/dlgaddplus_up.png); 
}

“删除”按钮允许用户从电子邮件表单中删除额外的地址。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton

对话框的CSS属性删除电子邮件按钮

宽度

按钮宽度。

高度

按钮高度。

背景图像

按钮图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

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

按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 要将“删除”按钮设置为25 x 25像素,并为每个状态使用不同的图像:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton { 
 width:25px; 
 height:25px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='up'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='over'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='down'] { 
 background-image:url(images/sdk/dlgremove_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogremoveemailbutton[state='disabled'] { 
 background-image:url(images/sdk/dlgremove_up.png); 
}

共享的内容显示在对话框主体的底部,并包含缩略图、标题、源URL和描述。 它将封装在通过以下CSS类选择器控制的容器中:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent

对话框内容的CSS属性

边界

容器边框。

填充

内边距。

示例 — 要将底部容器设置为具有一个像素点虚边框且无内边距,请执行以下操作:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogbody .s7dialogcontent { 
    border: 1px dotted #A0A0A0; 
    padding: 0; 
}

通过以下CSS类选择器控制缩略图图像:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail

background-image属性由组件逻辑设置。

对话框缩略图图像的CSS属性

宽度

缩略图宽度。

高度

缩略图高度。

垂直对齐

垂直对齐缩览图。

填充

内边距。

示例 — 要将缩略图设置为90 x 60像素,并以10个填充像素为顶对齐:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogthumbnail { 
    height: 60px; 
    padding: 10px; 
    vertical-align: top; 
    width: 90px; 
}

内容标题、来源和描述进一步分组到内容缩略图右侧的面板中。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel

对话框信息面板的CSS属性

宽度

面板宽度。

示例 — 要将内容信息面板设置为300像素宽:

.s7ecatalogsearchviewer .s7emaildialog .s7dialoginfopanel { 
    width: 300px; 
}

通过以下CSS类选择器控制内容标题:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle

对话框标题的CSS属性

边距

外边距。

字体粗细

字体粗细。

字体大小

字体大小.

字体系列

字体系列。

示例 — 要设置内容标题以使用粗体字体并具有10像素边距,请执行以下操作:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogtitle { 
    font-weight: bold; 
    margin: 10px; 
}

使用以下CSS类选择器控制内容源:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin

对话框内容源的CSS属性

边距

外边距。

字体粗细

字体粗细。

字体大小

字体大小.

字体系列

字体系列。

示例 — 将内容原点设置为具有十像素边距:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogorigin { 
    margin: 10px; 
}

通过以下CSS类选择器控制内容描述:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription

对话框内容描述的CSS属性

边距

外边距。

字体粗细

字体粗细。

字体大小

字体大小.

字体系列

字体系列。

示例 — 将内容描述设置为具有10像素边距并使用9点字体:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogdescription { 
    font-size: 9pt; 
    margin: 10px; 
}

当用户输入错误的输入数据且内联验证失败时,或者当对话框在提交表单时需要呈现错误或确认消息时,将在对话框主体的顶部显示消息。 它通过以下CSS类选择器进行控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage

对话框错误消息的CSS属性

背景图像

错误图标。 默认为感叹号。

背景位置

消息区域内的错误图标位置。

颜色

消息文本颜色。

字体粗细

字体粗细。

字体大小

字体大小.

字体系列

字体系列。

行高

消息内的文本高度。 影响垂直对齐。

填充

内边距。

注意

此消息支持具有以下可能值的state属性选择器:verifyerrorsenderrorsendsuccessverifyerror 在由于内联输入验证失败而显示消息时设置; senderror 后端电子邮件服务报告错误时设置; sendsuccess 在成功发送电子邮件时设置。这样,根据对话框状态可以以不同的方式设置消息样式。

按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 要设置消息以使用10点粗体字体、行高为25像素、左边距为20像素、使用感叹号图标、出错时为红色文本、成功时没有图标和绿色文本,请执行以下操作:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="verifyerror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="senderror"] { 
    background-image: url("images/sdk/dlgerrimg.png"); 
    color: #FF0000; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage[state="sendsuccess"] { 
    background-image: none; 
    color: #00B200; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7dialogerrormessage { 
    background-position: left center; 
    font-size: 10pt; 
    font-weight: bold; 
    line-height: 25px; 
    padding-left: 20px; 
}

如果需要垂直滚动,滚动条将呈现在对话框右边缘附近的面板中,该面板由以下CSS类选择器控制:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel

对话框滚动面板的CSS属性

宽度

滚动面板宽度。

示例 — 将滚动面板设置为44像素宽:

.s7ecatalogsearchviewer .s7emaildialog .s7dialogscrollpanel { 
    width: 44px; 
}

通过以下CSS类选择器控制滚动条区域的外观:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar

滚动条的CSS属性

宽度

滚动条宽度。

顶端

垂直滚动条与滚动面板顶部偏移。

底部

垂直滚动条与滚动面板底部偏移。

水平滚动条与滚动面板右边缘偏移。

示例 — 要设置宽28像素的滚动条,从滚动面板的上、右和下方各设置8像素的边距:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar { 
    bottom: 8px; 
    right: 8px; 
    top: 8px; 
    width: 28px; 
}

滚动条轨道是顶部和底部滚动按钮之间的区域。 该组件会自动设置轨道的位置和高度。 通过以下CSS类选择器控制跟踪:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack

滚动跟踪的CSS属性

宽度

轨道宽度。

背景颜色

跟踪背景颜色。

示例 — 要设置宽28像素且背景为灰色的滚动条轨道,请执行以下操作:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolltrack { 
width:28px; 
background-color: #B2B2B2; 
}

滚动条缩览图在滚动跟踪区域内垂直移动。 其垂直位置完全由组件逻辑控制,但缩览图高度不会根据内容量动态更改。 您可以使用以下CSS类选择器配置缩览图高度和其他方面:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb

滚动条缩览图的CSS属性

宽度

拇指宽度。

高度

拇指高度。

padding-top

轨道顶部之间的垂直边距。

padding-bottom

轨道底部之间的垂直边距。

背景图像

为给定的拇指状态显示的图像。

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

缩览图支持state属性选择器,该选择器可用于将不同的外观应用于不同的缩览图状态:updownoverdisabled

示例 — 要设置滚动条缩览图,该缩览图为28 x 45像素,上下有10个像素的边距,并且每种状态的图稿都不同:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb { 
    height: 45px; 
    padding-bottom: 10px; 
    padding-top: 10px; 
    width: 28px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="up"] { 
 background-image:url("images/sdk/scrollbar_thumb_up.png"); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="down"] { 
 background-image:url("images/sdk/scrollbar_thumb_down.png"); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="over"] { 
 background-image:url("images/sdk/scrollbar_thumb_over.png"); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollthumb[state="disabled"] { 
 background-image:url("images/sdk/scrollbar_thumb_disabled.png"); 
}

通过以下CSS类选择器控制顶部和底部滚动按钮的外观:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton

无法使用CSS topleftbottomright属性来定位滚动按钮。 相反,查看器逻辑会自动定位它们。

顶部和底部滚动按钮的CSS属性

宽度

按钮宽度。

高度

按钮高度。

背景图像

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

背景位置

在图稿Sprite中放置(如果使用CSS Sprite)。

另请参阅 CSS Sprite

注意

这些按钮支持state属性选择器,该选择器可用于将不同的外观应用到不同的按钮状态:updownoverdisabled

按钮工具提示可进行本地化。 有关更多信息,请参阅用户界面元素的本地化

示例 — 设置28 x 32像素的滚动按钮,并且每个状态的图稿都不同:

.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='up'] { 
background-image:url(images/sdk/scroll_up_up.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='over'] { 
 background-image:url(images/sdk/scroll_up_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='down'] { 
 background-image:url(images/sdk/scroll_up_down.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrollupbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_up_disabled.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton { 
 width:28px; 
 height:32px; 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='up'] { 
 background-image:url(images/sdk/scroll_down_up.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='over'] { 
 background-image:url(images/sdk/scroll_down_over.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='down'] { 
 background-image:url(images/sdk/scroll_down_down.png); 
} 
.s7ecatalogsearchviewer .s7emaildialog .s7scrollbar .s7scrolldownbutton[state='disabled'] { 
 background-image:url(images/sdk/scroll_down_disabled.png); 
}

在此页面上