HTML5与JQuery.Mobile（五）

最新推荐文章于 2024-10-30 19:10:39 发布

Soloman

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量3.3k

点赞数

分类专栏： HTML5/CSS/JavaScript 文章标签： html5 jquery mobile function javascript 文档

36 篇文章 0 订阅

订阅专栏

本节主要讲述JQuery Mobile的API。

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

方法和工具：