主视图由目录图像组成。 它可以滑动以转到其他页面或缩放。
主查看器区域的CSS属性
查看区域的外观由以下CSS类选择器控制:
.s7ecatalogsearchviewer .s7pageview
CSS属性 |
说明 |
---|---|
background-color |
主视图的背景颜色(以十六进制格式)。 |
光标 |
显示在主视图上的光标。 |
示例 — 使主视图透明。
.s7ecatalogsearchviewer .s7pageview {
background-color: transparent;
}
在桌面系统上,该组件支持 cursortype
可应用的属性选择器 .s7pageview
类并根据组件状态和用户操作控制游标类型。 以下各项 cursortype
值受支持:
值 |
说明 |
---|---|
默认 |
由于图像分辨率低、组件设置或两者兼而有之而无法缩放图像时显示。 |
zoomin |
在可以放大图像时显示。 |
重置 |
在图像处于最大缩放级别时显示,并且可以重置为初始状态。 |
拖动 |
当用户平移处于缩放状态的图像时显示。 |
幻灯片 |
用户通过执行水平轻扫或轻扫执行图像交换时显示。 |
使用以下CSS类选择器可控制用于视觉上分隔目录跨页的左右页面的页面分隔符:
.s7ecatalogsearchviewer .s7pageview .s7pagedivider
CSS属性 |
说明 |
---|---|
width |
页分隔符的宽度。 设置为 0 px可完全隐藏分隔线。 |
background-image |
要用作页面分隔符的图像。 |
示例 — 具有40像素宽分页器和半透明图像。
.s7ecatalogsearchviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
当 frametransition
修饰符设置为 turn
或 auto
(在桌面系统上),分页器的外观由 pageturnstyle
修饰符和 .s7pagedivider
CSS类被忽略。
可以在主查看器区域上配置自定义鼠标光标的显示。 此功能可通过应用到的其他属性选择器来控制 .s7ecatalogsearchviewer .s7pageview
CSS类:
CSS属性 |
说明 |
---|---|
默认 |
通常,为不可缩放的图像显示箭头。 |
zoomin |
显示何时可以放大图像。 |
重置 |
显示图像何时处于最大缩放并可重置。 |
拖动 |
显示用户何时对已缩放的图像执行拖动操作 |
幻灯片 |
显示用户何时使用幻灯片手势执行图像交换 |
示例 — 每种类型的组件状态都有不同的鼠标光标。
.s7ecatalogsearchviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogsearchviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}