|
...
|
...
|
@@ -43,8 +43,13 @@ Mobilebone.captureLink = false全局设置(全局开关)，会让页面所有链 |
|
|
|
### 深入过场原理
|
|
|
|
与jQuery Mobile一样的机制，in/out/reverse类名切换触发：
|
|
|
|
"page slide in" / "page slide out" → "page slide out" / "page slide in"
|
|
|
|
其中slide是动画的类型，默认值。你可以自定义，或者使用animate.css(jQuery Mobile中CSS分离), 含更多过场效果。
|
|
|
|
|
|
|
|
其中slide是动画的类型，默认值。你可以自定义，或者使用animate.css含更多过场效果。
|
|
|
|
源码如下：
|
|
|
|
pageInto.style.display = "block";
|
|
|
|
pageInto.classList.remove("out");
|
|
|
|
pageInto.classList.add("in");
|
|
|
|
pageInto.classList[back? "add": "remove"]("reverse");
|
|
|
|
|
|
|
|
### 基本切换
|
|
|
|
所谓基本切换，指的是无请求，无延迟的即时切换(页面已经都存在，只是控制一下显示、隐藏和位置)
|
|
|
|
在DOM层面，只有一种情况会触发基本切换，href值为锚链的a元素。例如：
|
|
...
|
...
|
@@ -72,14 +77,15 @@ Ajax加载并切换的实现很简单，你不需要做任何操作，就跟传 |
|
|
|
|
|
|
|
当tap/click这个a元素的时候，Mobilebone会以Ajax的形式请求ajax.html这个页面，返回的数据会封装成page页面，并以指定的过场动画载入
|
|
|
|
|
|
|
|
### Ajax参数以及事件管理
|
|
|
|
Ajax参数以及事件管理
|
|
|
|
|
|
|
|
与jQuery, Zepto $.ajax()一致，例如data-success, data-error, data-timeout等，也可以使用data-params以查询字符串形式设置多个参数。
|
|
|
|
form表单也是如此。
|
|
|
|
如果datatype为"json"，Mobilebone会拿Mobilebone.jsonHandle(response)的返回值作为新页面载入。
|
|
|
|
如果是默认字符串类型，则直接载入response(有处理，获取title, page元素等).
|
|
|
|
|
|
|
|
### 路由管理机制
|
|
|
|
使用HTML5 history API. 使用url hash记录, 格式同样借鉴J&M, #&, 后面跟随每个页面对应的标志量（页面id或ajax地址）。
|
|
|
|
使用HTML5 history API(PushState和replaceState). 使用url hash记录, 格式同样借鉴J&M, #&, 后面跟随每个页面对应的标志量（页面id或ajax地址）。
|
|
|
|
每当页面刷新、前进或后退(popstate), Mobilebone会根据hash对应标志量直接显示或重新请求对应页面。
|
|
|
|
|
|
|
|
### 页面缓存机制
|
...
|
...
|
|
