fe / LearningDocumentation · Commits

Go to a project

Authored by 梁志锋
Commit fa4aad963b2efbe9842b3c5778713b0810da0c29 1 parent d59c711f

增加基本切换和Ajax切换

Inline Side-by-side
Showing 1 changed file with 30 additions and 2 deletions
@@ -12,11 +12,19 @@ @@ -12,11 +12,19 @@
12 <script src="mobilebone.js"></script> 12 <script src="mobilebone.js"></script>
13 <body> 13 <body>
14 <div id="pageHome" class="page out"></div> 14 <div id="pageHome" class="page out"></div>
  15 + <div class="content"></div>
15 <div id="page1" class="page out"></div> 16 <div id="page1" class="page out"></div>
  17 + <div class="content"></div>
16 <div id="page2" class="page out"></div> 18 <div id="page2" class="page out"></div>
  19 + <div class="content"></div>
17 <div id="page3" class="page out"></div> 20 <div id="page3" class="page out"></div>
  21 + <div class="content"></div>
18 </body> 22 </body>
19 23
  24 +单页switch切换主体不能是body元素（只有唯一一个），所以只能降级到下级标签，这里的class为page的几个DIV就担当了body的角色。
  25 +一般而言，要在page元素内部再嵌套一个content元素，主要为了实现滚动。
  26 +然后，什么也不用做，页面就能进入无刷新切换模式！
  27 +
20 ## 优势？ 28 ## 优势？
21 mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。 29 mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3~4K, 而且很灵活，几乎没有任何UI的限制，适用于各个项目各个场景。
22 30
@@ -26,9 +34,9 @@ mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3 @@ -26,9 +34,9 @@ mobilebone.js只做了一件事情，切换。所以，JS文件很小，gzip后3
26 ## 深入mobilebone.js 34 ## 深入mobilebone.js
27 35
28 ### 深入基本触发机制 36 ### 深入基本触发机制
29 -与jQuery Mobile类似的机制，引入mobilebone.js, 即对页面所有a标签做了委托。根据href值做智能判断直接过场，Ajax请求过场，还是无作为(javascript:*或外链)。data-ajax="false"会还原链接为传统跳转。 37 +与jQuery Mobile类似的机制，引入mobilebone.js, 即对页面所有a标签做了委托。根据href值做智能判断直接过场/Ajax请求过场/还是无作为(javascript:*或外链)。data-ajax="false"会还原链接为传统跳转。
30 默认是click绑定，但如果你引用类似Zepto的touch模块，则mobilebone走touch事件。 38 默认是click绑定，但如果你引用类似Zepto的touch模块，则mobilebone走touch事件。
31 -Mobilebone.captureLink = false全局设置，会让页面所有链接普通化，除非有data-ajax=true. 39 +Mobilebone.captureLink = false全局设置(全局开关)，会让页面所有链接普通化，除非有data-ajax=true.
32 对页面所有form的submit也做了委托，默认所有的表单都是ajax提交，并根据返回内容实现过场效果。规则与a元素ajax提交类似。 40 对页面所有form的submit也做了委托，默认所有的表单都是ajax提交，并根据返回内容实现过场效果。规则与a元素ajax提交类似。
33 41
34 ### 深入过场原理 42 ### 深入过场原理
@@ -36,6 +44,26 @@ Mobilebone.captureLink = false全局设置，会让页面所有链接普通化 @@ -36,6 +44,26 @@ Mobilebone.captureLink = false全局设置，会让页面所有链接普通化
36 "page slide in" / "page slide out" → "page slide out" / "page slide in" 44 "page slide in" / "page slide out" → "page slide out" / "page slide in"
37 其中slide是动画的类型，默认值。你可以自定义，或者使用animate.css(jQuery Mobile中CSS分离), 含更多过场效果。 45 其中slide是动画的类型，默认值。你可以自定义，或者使用animate.css(jQuery Mobile中CSS分离), 含更多过场效果。
38 46
  47 +### 基本切换
  48 +所谓基本切换，指的是无请求，无延迟的即时切换(页面已经都存在，只是控制一下显示、隐藏和位置)
  49 +在DOM层面，只有一种情况会触发基本切换，href值为锚链的a元素。例如：
  50 +<a href="#pageId">
  51 +当我tap/click这个a元素的时候，Mobilebone会自动寻找id为pageId的页面，如果此页面存在，则发生切换动画；如果没有该页面元素，没有任何反应，死链。
  52 +
  53 +相反的过场方向
  54 +动画的方向不可能都是从右往左的，例如，返回，通过添加data-rel="back"就可以了，例如：
  55 +<a href="#pageHome" data-rel="back">返回</a>
  56 +
  57 +有时候，我们无法确定动画的方向。使用"auto"即可，如下：
  58 +<a href="#pageHome" data-rel="auto">前进还是后退？</a>
  59 +Mobilebone会自动判别页面在舞台上的位置，智能识别运动方向。浏览器的历史记录前进与后退也是采用的"auto"判别机制。
  60 +
  61 +### Ajax切换
  62 +页面太多时不能直接全部一次性加载进来，这时就需要Ajax切换了。
  63 +Ajax加载并切换的实现很简单，你不需要做任何操作，就跟传统的web页面一样就好，使用href指向要加载的页面地址，例如：
  64 +<a href="ajax.html">
  65 +当tap/click这个a元素的时候，Mobilebone会以Ajax的形式请求ajax.html这个页面，返回的数据会封装成page页面，并以指定的过场动画载入
  66 +
39 ### 路由管理机制 67 ### 路由管理机制
40 使用HTML5 history API. 使用url hash记录, 格式同样借鉴J&M, #&, 后面跟随每个页面对应的标志量（页面id或ajax地址）。 68 使用HTML5 history API. 使用url hash记录, 格式同样借鉴J&M, #&, 后面跟随每个页面对应的标志量（页面id或ajax地址）。
41 每当页面刷新、前进或后退(popstate), Mobilebone会根据hash对应标志量直接显示或重新请求对应页面。 69 每当页面刷新、前进或后退(popstate), Mobilebone会根据hash对应标志量直接显示或重新请求对应页面。