HTML5与JQuery.Mobile（五）

来源：互联网发布：人人店分销系统源码编辑：程序博客网时间：2024/05/04 05:12

本节主要讲述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。。。
支持屏幕旋转事件；
支持滚动事件；
支持页面加载事件；
页面改变、切换、移除事件；
布局事件；
动画事件；

方法和工具：

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

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

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