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对象的属性设置，具体参见文档。

对于事件的处理：

使用$(document).bind('pageinit'), 而不是$(document).ready()。这是因为页面中可能有多个page（因为jQuery Mobile中大量使用了Ajax技术），如果使用ready那么只有对第一个page有效；
$(document).bind('pagecreate') 和 $(document).bind('pageinit')。当前推荐使用pageinit替代pagecreate来操作一些页面显示之前的增强标记；

jQuery Mobile支持很多的触屏事件：tap、taphold、swipe、swipeleft、swiperight；
jQuery Mobile支持很多的鼠标事件：vmouseover、vmouseout。。。
支持屏幕旋转事件；
支持滚动事件；
支持页面加载事件；
页面改变、切换、移除事件；
布局事件；
动画事件；

方法和工具：

$.mobile.changePage；

$.mobile.loadPage；

$.fn.jqmData(), $.fn.jqmRemoveData()；

$.fn.jqmEnhanceable()；

$.fn.jqmHijackable()；

$.mobile.showPageLoadingMsg；

$.mobile.hidePageLoadingMsg；

$.mobile.fixedToolbars.show；

$.mobile.fixedToolbars.hide；

$.mobile.path.parseUrl；

$.mobile.path.makePathAbsolute；

$.mobile.path.makeUrlAbsolute；

$.mobile.path.isSameDomain；

$.mobile.path.isRelativeUrl；

$.mobile.path.isAbsoluteUrl；

$.mobile.path.get；

$.mobile.base；

$.mobile.silentScroll；

$.mobile.activePage；

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

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

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