页面查看

主视图由目录图像组成。 可以轻扫到其他页面或缩放页面。

主查看器区域的CSS属性

通过以下CSS类选择器控制查看区域的外观：

.s7ecatalogsearchviewer .s7pageview

CSS属性

说明

背景颜色

主视图的背景颜色（以十六进制格式）。

光标

显示在主视图上的光标。

示例 — 使主视图透明。

.s7ecatalogsearchviewer .s7pageview { 
 background-color: transparent; 
}

在桌面系统上，组件支持可应用于.s7pageview类的cursortype属性选择器，并基于组件状态和用户操作控制游标的类型。 支持以下cursortype值：

值

说明

默认

当由于图像分辨率和组件设置较小或两者都导致图像无法缩放时显示。

牛民

在图像可放大时显示。

重置

当图像处于最大缩放级别时显示，并可重置为初始状态。

拖动

当用户平移处于缩放状态的图像时显示。

幻灯片

当用户通过水平轻扫或轻扫执行图像交换时显示。

通过以下CSS类选择器控制以可视方式分隔目录跨页的左和右页面的页面分隔符：

.s7ecatalogsearchviewer .s7pageview .s7pagedivider

CSS属性

说明

width

页面分隔符的宽度。 设置为 0 px可完全隐藏分隔符。

背景图像

要用作页面分隔符的图像。

示例 — 具有40像素宽的分页器，分页器具有半透明图像。

.s7ecatalogsearchviewer .s7pageview .s7pagedivider { 
 width:40px; 
 background-image:url(images/sdk/divider.png); 
}
注意

将frametransition修饰符设置为turn或auto（在桌面系统上）时，使用pageturnstyle修饰符控制页面分隔符的外观，并忽略.s7pagedivider CSS类。

可以在主查看器区域上配置自定义鼠标光标的显示。 可通过应用于.s7ecatalogsearchviewer .s7pageview CSS类的其他属性选择器来控制此问题：

CSS属性

说明

默认

通常，对于不可缩放的图像，会显示一个箭头。

牛民

显示图像何时可以放大。

重置

显示图像何时处于最大缩放比例并可重置。

拖动

显示用户对图像中缩放的图像执行拖动操作的时间

幻灯片

显示用户何时使用幻灯片手势执行图像交换

示例 — 每种类型的组件状态具有不同的鼠标光标。

.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; 
}

在此页面上