页面查看

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

CSS properties of the main viewer area

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

.s7ecatalogviewer .s7pageview

CSS property

说明

background-color

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

cursor

显示在主视图上的光标。

示例 — 使主视图透明。

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

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

说明

默认

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

牛民

在图像可放大时显示。

重置

Displayed when the image is at maximum zoom level and can be reset to initial state.

拖动

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

幻灯片

Displayed when the user performs an image swap by doing horizontal swipe or flick.

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

.s7ecatalogviewer .s7pageview .s7pagedivider

CSS property

说明

width

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

背景图像

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

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

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

frametransition 修饰符设置为 turnauto (在桌面系统上),页面分隔器的外观由 pageturnstyle 修饰符和 .s7pagedivider 将忽略CSS类。

可以在主查看器区域上配置自定义鼠标光标的显示。 此功能通过应用于 .s7ecatalogviewer .s7pageview CSS类:

CSS属性

说明

默认

Normally an arrow, displays for non-zoomable image.

牛民

显示图像何时可以放大。

重置

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

拖动

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

幻灯片

Shows when user performs image swap using slide gesture

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

.s7ecatalogviewer .s7pageview[cursortype="default"] {
cursor:auto;
}
.s7ecatalogviewer .s7pageview[cursortype="zoomin"] {
cursor:url(images/zoomin_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="reset"] {
cursor:url(images/zoomout_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview [cursortype="slide"] {
cursor:url(images/slide_cursor.cur), auto;
}
.s7ecatalogviewer .s7pageview[cursortype="drag"] {
cursor:url(images/drag_cursor.cur), auto;
}

在此页面上