|
...
|
...
|
@@ -34,7 +34,8 @@ mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3 |
|
|
|
## 深入mobilebone.js
|
|
|
|
|
|
|
|
### 深入基本触发机制
|
|
|
|
与jQuery Mobile类似的机制，引入mobilebone.js, 即对页面所有a标签做了委托。根据href值做智能判断直接过场/Ajax请求过场/还是无作为(javascript:*或外链)。data-ajax="false"会还原链接为传统跳转。
|
|
|
|
与jQuery Mobile类似的机制，引入mobilebone.js, 即对页面所有a标签做了委托。根据href值做智能判断直接过场/Ajax请求过场/还是无作为(javascript:*或外链)。
|
|
|
|
data-ajax="false"会还原链接为传统跳转。
|
|
|
|
默认是click绑定，但如果你引用类似Zepto的touch模块，则mobilebone走touch事件。
|
|
|
|
Mobilebone.captureLink = false全局设置(全局开关)，会让页面所有链接普通化，除非有data-ajax=true.
|
|
|
|
对页面所有form的submit也做了委托，默认所有的表单都是ajax提交，并根据返回内容实现过场效果。规则与a元素ajax提交类似。
|
|
...
|
...
|
@@ -47,21 +48,21 @@ Mobilebone.captureLink = false全局设置(全局开关)，会让页面所有链 |
|
|
|
### 基本切换
|
|
|
|
所谓基本切换，指的是无请求，无延迟的即时切换(页面已经都存在，只是控制一下显示、隐藏和位置)
|
|
|
|
在DOM层面，只有一种情况会触发基本切换，href值为锚链的a元素。例如：
|
|
|
|
<a href="#pageId">
|
|
|
|
- <a href="#pageId">
|
|
|
|
当我tap/click这个a元素的时候，Mobilebone会自动寻找id为pageId的页面，如果此页面存在，则发生切换动画；如果没有该页面元素，没有任何反应，死链。
|
|
|
|
|
|
|
|
相反的过场方向
|
|
|
|
动画的方向不可能都是从右往左的，例如，返回，通过添加data-rel="back"就可以了，例如：
|
|
|
|
<a href="#pageHome" data-rel="back">返回</a>
|
|
|
|
- <a href="#pageHome" data-rel="back">返回</a>
|
|
|
|
|
|
|
|
有时候，我们无法确定动画的方向。使用"auto"即可，如下：
|
|
|
|
<a href="#pageHome" data-rel="auto">前进还是后退？</a>
|
|
|
|
- <a href="#pageHome" data-rel="auto">前进还是后退？</a>
|
|
|
|
Mobilebone会自动判别页面在舞台上的位置，智能识别运动方向。浏览器的历史记录前进与后退也是采用的"auto"判别机制。
|
|
|
|
|
|
|
|
### Ajax切换
|
|
|
|
页面太多时不能直接全部一次性加载进来，这时就需要Ajax切换了。
|
|
|
|
Ajax加载并切换的实现很简单，你不需要做任何操作，就跟传统的web页面一样就好，使用href指向要加载的页面地址，例如：
|
|
|
|
<a href="ajax.html">
|
|
|
|
- <a href="ajax.html">
|
|
|
|
当tap/click这个a元素的时候，Mobilebone会以Ajax的形式请求ajax.html这个页面，返回的数据会封装成page页面，并以指定的过场动画载入
|
|
|
|
|
|
|
|
### Ajax参数以及事件管理
|
...
|
...
|
|
