页面查看 page-view
主视图由目录图像组成。 它可以滑动以转到其他页面或缩放。
主查看器区域的 CSS属性
查看区域的外观由以下CSS类选择器控制:
.s7ecatalogviewer .s7pageview
CSS属性
说明
背景色
主视图的背景颜色(十六进制格式)。
游标
显示在主视图上的光标。
示例 — 使主视图透明。
.s7ecatalogviewer .s7pageview {
background-color: transparent;
}
在桌面系统上,组件支持可应用于.s7pageview
类的cursortype
属性选择器,并根据组件状态和用户操作控制游标类型。 支持以下cursortype
值:
值
说明
默认
由于图像分辨率低、组件设置或两者同时存在而导致图像无法缩放时显示。
放大
在可以放大图像时显示。
重置
当图像处于最大缩放级别时显示,并且可以重置为初始状态。
拖动
当用户平移处于缩放状态的图像时显示。
张幻灯片
当用户通过执行水平轻扫或轻扫执行图像交换时显示。
可通过以下CSS类选择器控制用于视觉上分隔目录跨页左页和右页的页面分隔符:
.s7ecatalogviewer .s7pageview .s7pagedivider
CSS属性
说明
宽度
页面分隔符的宽度。 设置为 0 像素,以完全隐藏分隔符。
背景图像
要用作页面分隔符的图像。
示例 — 具有40像素宽分页符和半透明图像。
.s7ecatalogviewer .s7pageview .s7pagedivider {
width:40px;
background-image:url(images/sdk/divider.png);
}
NOTE
当
frametransition
修饰符设置为turn
或auto
(在桌面系统上)时,通过pageturnstyle
修饰符控制页面分隔符的外观,并忽略.s7pagedivider
CSS类。可以在主查看器区域上配置自定义鼠标游标的显示。 此功能通过应用于.s7ecatalogviewer .s7pageview
CSS类的其他属性选择器进行控制:
CSS属性
说明
默认
通常为箭头,对于不可缩放的图像显示。
放大
显示何时可以放大图像。
重置
显示图像何时达到最大缩放并可重置。
拖动
显示用户何时对放大图像执行拖动操作
张幻灯片
显示用户何时使用幻灯片手势执行图像交换
示例 — 每种类型的组件状态都有不同的鼠标游标。
.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;
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8