saber-viewport

移动端页面视口管理，提供页面转场功能

Installation

通过 edp 引入模块：

edp import saber-viewport

Usage

var viewport = require('saber-viewport');
var page;

// 引入转场效果
require('saber-viewport/transition/fadeInOut');

// 初始化视口
viewport.init('viewport');

// 加载页面
page = viewport.load(url);

// 渲染页面
...

// 使用淡入淡出效果转场页面
page.enter('fadeInOut');

About Bar

移动页面顶部或者底部一般都有navigation bar、toolbar之类的，这些部件在页面转场时通常不变化或者特殊变化，通过添加data-viewport-bar与data-name自定义dom属性来支持。

比如现在有三个页面A、B、C，顶部都有navigation bar，前两页面bar样式相同，最后一个页面为详情页面，bar上添加了“返回”按钮，大体就如下这般：

<!-- page A -->
<body>
    <div class="nav" data-viewport-bar="navigation" data-name="main">
        ...
    </div>
</body>

<!-- page B -->
<body>
    <div class="nav" data-viewport-bar="navigation" data-name="main">
        ...
    </div>
</body>

<!-- page C -->
<body>
    <div class="nav" data-viewport-bar="navigation" data-name="detail">
        ...
        <a>返回</a>
    </div>
</body>

通过data-viewport-bar分类页面中不同类型的bar，bar的转场切换只会在同类tab之间进行。data-name表示bar的名称，名称相同的bar转场时不会有变化，而类型相同名称不同的bar之前会有转场效果。

示例中从A切换到B时顶部导航条不会有变化（data-name相同），而从B切换到C时顶部导航条会进行转场效果（data-name不同）。

__注__：saber-viewport并不控制bar在页面中的位置、样式，这些还是由页面控制。

About Fixed

转场操作时position:fixed的元素会影响转场效果（特别是在使用transform进行转场时，参考webkit-css-transform3d-position-fixed-issue, The Transform Rendering Model），saber-viewport支持使用data-viewport-fixed标注fixed元素，在转场时进行自动处理，比如：

<div class="search" data-viewport-fixed><input type="text"><a class="search-btn">Search</a></div>

已经被data-viewport-bar标记的fixed元素不再需要重复标记data-viewport-fixed

Methods

init(ele[, options])

初始化视口

ele {HTMLElement} 视图主元素或者元素id
options {Object=} 全局配置参数
- transition {boolean|string=} 转场效果，boolean参数表示是否启用转场效果，string参数表示具体的转场效果，目前支持slide滑动转场，fadeInOut淡入淡出转场，默认为true，表示启动转场效果，但不指定默认的转场效果
- duration {number=} 转场动画时长，单位为秒，默认为0.3
- timing {string=} 转场缓动效果，取值请参考CSS3中的transition-timing-function，默认为'ease'
- transform {boolean=} 是否使用css transform进行转场设置，默认为true
- mask {boolean=} 转场动画进行时使用全局遮罩浮层，防止由于页面操作意外终止转场动画，默认为true
- resetScroll {boolean=} 转场是否启用页面scroll修正，默认为true

load(url[, options])

创建新页面的容器，返回Page对象。页面的具体渲染需要通过Page.main属性获取容器元素后自行完成

url {string} 页面的URL，用于页面标示
options {Object=} 选项参数
- cache {boolean=} 是否缓存page 默认false
- noCache {boolean=} 是否不启用缓存默认false
return {Page} Page对象

front(url[, options])

初始化首屏页面，如果初始化成功则返回Page对象，否则返回undefined

url {string} 页面的URL，用于页面标示
options {Object=} 选项参数
- cache {boolean=} 是否缓存page 默认false
return {?Page} Page对象

Classes

Page 页面对象