您所在的位置： &
jQuery Mobile开发进阶：API扩展介绍(1)
jQuery Mobile开发进阶：API扩展介绍(1)
在本文中，将以例子的形式讲解jQuery Mobile开发中常用的API以及如何对其进行扩展开发，本文的阅读对象为已对jQuery Mobile有一定认识和使用经验的开发者。
目前,jQuery Mobile是在HTML5 移动开发中的一个很不错的框架,它为熟悉Jquery的开发者进行移动开发提供了很大方便。jQuery Mobile使用的是HTML5和CSS3，除了能提供很多基础的移动页面元素开发功能外，框架自身还提供了很多可供扩展的API,以供开发者扩展jQuery Mobile框架本身的功能。
请先下载最新版本的jQuery Mobile框架(最新版本为1.0.1,下载地址为/ )。
下面的这些jQuery Mobile列出的API，允许开发者更改其框架的默认事件行为
继承扩展jQuery Mobile的初始化事件
创建自定义命名空间
页面初始化
自定义子页的KEY
设置当前激活页的样式
设置默认页和对话框效果
自定义加载和自定义显示错误信息
下面逐一进行介绍
继承扩展jQuery Mobile的初始化事件
Mobile中包含了一个初始化的事件，该事件在jQuery框架的document.ready事件加载前就能被加载，名字叫mobileinit。这就允许开发者继承和扩展jQuery
Mobile的默认全局选项。为了继承和扩展mobileinit事件，只需要将自定义的Javascript事件处理程序脚本放在jQuery
Mobile库加载前进行加载即可，但要注意放在jQuery框架本身后进行加载，如下代码所示：
然后，为了扩展mobileinit事件，必须首先使用jquery的bind事件将自定义方法和
Mobileinit事件绑定，如下所示：
$(document).bind(&mobileinit&,&function()&{&&&});&&
接下来，就可以使用jQuery的extend方法去继承$mobile对象，然后可以简单地通过属性=值的方法重新设置jQuery Mobile的新的全局属性，如下代码：
$(document).bind(&mobileinit&,&function()&{&&$.extend(&$.mobile&,&{&&property&=&value&&});&&});&&
如果仅是设置一个属性值，则也可以使用如下代码实现，而不需要继承$mobile对象：
$(document).bind(&mobileinit&,&function()&{&$.mobile.property&=&&});&
可以看到$.mobile对象为设置所有属性的入口点。
jQuery Mobile创建自定义命名空间
Mobile中，甚至可以自定义象HTML5中的data-attribute等系列属性，比如data-role等。这通过自定义命名空间即可实现。比如可以实现自定义一个名字，变成data-自定义名-role这样的形式，这可以通过$.mobile对象中增加ns属性来指定，如下代码：
$(document).bind(&mobileinit&,&function()&{&$.mobile.ns&=&&my-custom-ns&;&});&
通过上面的代码，建立了一个data-my-customer-ns-role的属性，而不是传统jQuery
Mobile中指定的data-role。通过设置自定义的命名空间，可以方便开发者在CSS选择器中进行指定，同时如果要自定义mobile小插件的主题，则也必须使用自定义命名空间，以示区别。
页面初始化
Mobile提供了一个叫autoInitializePage的属性，这个属性表示页面是否应该初始化，其默认值为true。然而，如果是继承扩展了$.mobile对象，开发者则可以将该值设置为false,并且在稍晚的时候对页面初始化进行设置。下面的代码中，演示了当其他脚本在运行时，如何暂时延迟页面的初始化。如果有大量的客户端脚本运行，则一个很好的建议方法是延迟页面的初始化，直到DOM完成加载客户端脚本。
&!DOCTYPE&HTML&&&&&Understanding&the&jQuery&Mobile&API&&&&type=&text/javascript&&src=&jquery.js&&&&&type=&text/javascript&&&&&&$(document).bind(&mobileinit&,&function()&{&&&&&&&$.mobile.autoInitializePage&=&false;&&&&&});&&&&&&&type=&text/javascript&&src=&jquery.mobile.js&&&&&&&&&&&&&&&data-role=&page&&&&&&&data-role=&content&&&&&&&&&data-role=&listview&&id=&my-list&&&&&&&&&&&&&type=&text/javascript&&&&&&$('#my-list').html('&href=&page-2.html&Link&to&another&page');&&&&&$.mobile.autoInitializePage&=&true;&&&&&&
jQuery Mobile自定义子页的KEY
当在jQuery
Mobile中引用子页时，默认使用的是ui-page做为KEY标识。开发者可以通过$.mobile对象的subPageUrlKey去重新设置，比如如果定义了subPageUrlKey为my-page,则默认的子页引用将从web-page.html&ui-page=value改为
web-page.html&my-page=value,这样做的一个好处是开发者可让url更友善更容易维护。
jQuery Mobile设置当前激活页面的样式
当使用了jQuery
Mobile后，默认当前激活页面中的ui-page元素都会使用框架默认的样式中定义的ui-page-active，如果要对其进行修改，可以设置$.mobile对象中的activePageClass属性，比如：
$(document).bind(&mobileinit&,&function(){&$.mobile.activePageClass=&ui-page-custom&;&});&
其中ui-page-custome则为用户自定义的样式。
设置默认页面和对话框的动画效果
默认的jQuery
Mobile的页面和对话框的效果都是通过ajax实现的。默认的页面切换效果是幻灯片切换，默认的对话框出现的效果是弹出。如果需要改变这些效果的话
，同样是如下代码所示，设置$.mobile对象的defaultPageTransition和defaultDialogTransition属性就可以了。
$(document).bind(&mobileinit&,&function()&{&$.mobile.defaultPageTransition&=&&fade&;&$.mobile.defaultDialogTransition&=&&fade&;&});&
jQuery Mobile提供了6种效果供用户选择，分别是：slide, slideup, slidedown, pop, fade,
和flip，用户可以按照上面的方法进行设置。
自定义加载及错误信息.
另外两个全局设置参数是加载及错误显示信息。加载信息会在加载页面时显示给用户看，要更改这个设置，只需要修改$.mobile对象的loadingMessage属性即可，如下：
$(document).bind(&mobileinit&,&function()&{&$.mobile.loadingMessage&=&&Please&wait&;&});&
同样，可以设置$.mobile对象的属性pageLoadErrorMessage来自定义错误信息，如下：
$(document).bind(&mobileinit&,&function()&{&$.mobile.pageLoadErrorMessage&=&'Sorry,&something&went&wrong.&Please&try&again.';&});&
内容导航&第 1 页： &第 2 页： &第 3 页：
关于&&的更多文章
为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动
既然强大的Android Studio来了，有什么理由不去用呢？
谷歌在新品发布会上正式发布了传闻已久的Android 4.3
App定价是开发者不可忽视的部分，它是确保应用高能见
微信自引入语音短信功能用户量爆发之后，发展状况一直
在我的第一本书――《3D游戏开发大全》中，我们曾经对3D游戏开发完成了一次犹如探索原始丛林般的旅程：首先，我们对3D游戏产业进
Windows Phone专家
Android开发专家
51CTO旗下网站jQuery Mobile框架使用简易指南_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
评价文档：
jQuery Mobile框架使用简易指南|
把文档贴到Blog、BBS或个人站等：
普通尺寸(450*500pix)
较大尺寸(630*500pix)
你可能喜欢}