HTML5与JQuery.Mobile（五）

本节主要讲述JQuery Mobile的API。

API的官方文档参见http://jquerymobile.com/demos/1.1.1/ 。

当jQuery Mobile启动时，将会对document对象自动触发mobileinit事件，所以如果我们需要覆盖某些默认设置，我们就需要绑定mobileinit事件处理：

$(document).bind("mobileinit", function(){
  //apply overrides here
});

因为mobileinit事件立即触发，所以你需要在jQuery Mobile加载之前绑定处理函数，那么对于JavaScript文件的链接顺序是这样：

<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

可以使用jQuery的$.extend来覆盖默认设置：

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
    foo: bar
  });
});

或者，你也可以这样设置属性：

$(document).bind("mobileinit", function(){
  $.mobile.foo = bar;
});

至于$.mobile对象的属性设置，具体参见文档。

对于事件的处理：

1. 使用$(document).bind('pageinit'), 而不是$(document).ready()。这是因为页面中可能有多个page（因为jQuery Mobile中大量使用了Ajax技术），如果使用ready那么只有对第一个page有效；
2. $(document).bind('pagecreate') 和 $(document).bind('pageinit')。当前推荐使用pageinit替代pagecreate来操作一些页面显示之前的增强标记；
   
3. jQuery Mobile支持很多的触屏事件：tap、taphold、swipe、swipeleft、swiperight；
4. jQuery Mobile支持很多的鼠标事件：vmouseover、vmouseout。。。
5. 支持屏幕旋转事件；
6. 支持滚动事件；
7. 支持页面加载事件；
8. 页面改变、切换、移除事件；
9. 布局事件；
10. 动画事件；

方法和工具：

1. $.mobile.changePage；
   
2. $.mobile.loadPage；
   
3. $.fn.jqmData(), $.fn.jqmRemoveData()；
   
4. $.fn.jqmEnhanceable()；
   
5. $.fn.jqmHijackable()；
   
6. $.mobile.showPageLoadingMsg；
   
7. $.mobile.hidePageLoadingMsg；
   
8. $.mobile.fixedToolbars.show；
   
9. $.mobile.fixedToolbars.hide；
   
10. $.mobile.path.parseUrl；
    
11. $.mobile.path.makePathAbsolute；
    
12. $.mobile.path.makeUrlAbsolute；
    
13. $.mobile.path.isSameDomain；
    
14. $.mobile.path.isRelativeUrl；
    
15. $.mobile.path.isAbsoluteUrl；
    
16. $.mobile.path.get；
    
17. $.mobile.base；
    
18. $.mobile.silentScroll；
    
19. $.mobile.activePage；
    

以上内容基本上可以通过字面意思理解，当然最重要的还是例子；

通过data-role和input的type属性还能设置一些控件的表现形式；

同样还可以对theme进行设置，可以使用我们之前提到的themeroller。