jQueryMobileAPI9601

,单击此处编辑母版标题样式,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,Photoshop与Flash,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Photoshop与Flash,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Photoshop与Flash,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Photoshop与Flash,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Photoshop与Flash,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Photoshop与Flash,jQuery Mobile API,（第十二讲,),知识回顾,内置常用主题,？,自定义主题,？,ThemeRoller,？,教学内容,配置jQuery Mobile,方法,事件,属性,数据属性,重点、难点,重点,方法,事件,属性,数据属性,难点,事件,属性,数据属性,配置,jQuery Mobile,在,jQuery Mobile,初始化时，会在,document,对象上触发一个,mobileinit,事件。可以绑定到,mobileinit,事件，然后应用对,jQuery Mobile,的,($.mobile),默认配置设置的覆盖,1.,可以通过,jQuery,的,extend,方法覆盖属性,$(document).bind(mobileinit,function(),/$.mobile.loadingMessage=,努力加载中,.;,/$.mobile.pageLoadErrorMessage=,找不到对应页面！,;,$.extend($.mobile,loadingMessage:,努力加载中,.,pageLoadErrorMessage:,找不到对应页面！,);,);,自定义脚本,自定义脚本位置,由于在执行,jQuery Mobile,时，会立即触发,mobileinit,，因此需要将自定义脚本放在,jQuery Mobile JavaScript,文件之前。,可配置的,jQuery Mobile,选项,选项名,描述,值类型,默认值,autoInitializePage,如果该选项的值为,true,，那么当页面加载完成后，,jQuery Mobile,框将自动调用,$.mobile.initializePage(),方法，初始化页面的数据；否则，不初始化数据，设置为,false,，禁用所有页面组件的自动初始化,boolean,true,subPageUrlKey,该选项可以自定义子页引用时,URL,格式，对比如下,:,修改前为：,index.html&ui-page=value,修改后为：,index.html&my-page=value,用来引用由微件生成的值页面的,URL,参数。子页面,URL,的一个例子是,”nested-list.html&ui-page=Movies-3”.,嵌套的列表视图是一个特殊的微件，将每个列表分割为独立的子页面。例如，刚才显示的,URL,具有一个,”Movise”,子列表。而且,jQuery Mobile,会将该子列表转换为自己的子页面，以供深链接应用。如果需要重命名该,URL,参数，可以使用,$.mobile.subPageUrlKey,来更改,string,ui-page,activePageClass,该选项可以自定义当前页面或切换页的类别名称，这个,CSS,类分配给当前可见和活动的页面或对话框，例如，当多个页面载入到,DOM,中，活动的页面会应用这个,CSS,属性,string,ui-page-active,选项名,描述,值类型,默认值,activeBtnClass,该选项可以自定义当前被选中的按钮类别名称,.,用来识别和样式化“活动”的,CSS,类。这个,CSS,属性通常用来样式化和识别标签栏中的活动按钮,string,ui-btn-active,defaultPageTransition,该选项可以设置页面在切换时的转换效果，如果该值为“,none,”，则没有任何页面切换时的转换效果,string,slide,minScrollBack,该选项可以设置页面的最小滚动距离,而且在返回页面时，该值能被记住。在返回一个页面时，如果链接的滚动位置超出了,minSrollBackA,的设置，则框架会自动滚动到启动抓换的位置或链接。默认情况下，滚动阈值是,250,像素，如想删除该最小设置，一边框架在滚动时能够无视滚动位置，则可以将该值设置为,0,，如想要禁用该特性，则将其值设置为,”infinity”,string,150,Page.prototype.options.keepNative,若想在无需为标记添加,data-role=“none”,的情况下阻止框架初始化所有的选择和输入元素，可以更新该选择器,$.mobile.page.prototype.options.keepNative=“select,input”;,string,:jqmData(role=none;:jqmData(role=nojs),选项名,描述,值类型,默认值,allowCrossDomainPages,在使用,PhoneGap,进行开发时，建议将该配置选项设置为,true.,这会允许,jQuery Mobile,管理,PhoneGap,中跨域,(cross-domain),请求的页面载入逻辑,boolean,false,gradeA,jQuery Mobile,会调用该方法来确定框架是否应用了动态的,CSS,页面增强。默认情况下，该方法会为支持媒体查询的所有浏览器应用增强。但是,jQuery Mobile,只会增强,A,级浏览器的页面,IE7,以及更高版本属于,A,级浏览器。因此他们的显示也会被增强,.$.mobile.gradeA:fuction()return$.support.mediaquery|$.mobile.browser.ie,返回一个布尔值的函数,浏览器必须支持媒体查询或者支持,IE7,以及更高版本,hashListeningEnabled,基于,location.hash,自动载入和显示页面。,jQuery Mobile,监听,location.hash,的改变，以载入,DOM,内的内部页面。可以禁用该选项，通过手动方式来处理,hash,的改变；，也可以禁用该选项，以访问作为深链接的锚的书签,boolean,true,pageLoadErrorMessage,当一个,Ajax,页面请求载入失败时，会出现该错误响应消息,string,Error Loading Page,选项名,描述,值类型,默认值,ajaxEnabled,如果该选项的值为,true,，那么,jQuery Mobile,会自动通过,AJAX,的方式来处理单击链接或提交表单时的数据请求；否则，使用,HTTP,方式请求数据，在可能的情况下，通过,Ajax,动态载入页面。默认情况下，所有页面的,Ajax,载入都是打开的，但是外部,URL,、使用,rel=“external”,或,target=“_blank”,属性标记的连接除外。如果禁用,Ajax,页面链接会使用普通的,HTTP,请求载入，而且不会用到,CSS,转换,boolean,true,defaultDialogTransition,在转换到一个对话框时，使用默认转换。如果不需要转换，可以将转换设置为,”none”,string,pop,page.prototype.options.addBackBtn,若想在某个应用程序上显示回退按钮，则将该选项设置为,true.jQuery Mobile,内的回退按钮是一个智能的微件。只有弹药回退的页面处于历史记录栈中时，回退按钮才会显示,$.mobile.page.prototype.options.addBackBtn=true;,Boolean,false,loadingMessage(string,default:”loading”),设置载入信息，使其在基于,Ajax,的请求期间出现。此外，可以指派一个,false(boolean),来禁用该消息。如果想在运行基于每个页面来更新载入信息则可以再页面内对其进行更新。,$.mobile.loadingMessage=“My custom message”;,$.mobile.showPageLoadingMsg();,nonHistorySelectors(string,default:”dialog”),可以指定将哪个页面组件排除在浏览器的历史记录栈之外。默认情况下，带有,data-rel=“dialog”,的任何链接，或者是带有,data-role=“dialog”,的任何页面都不会出现在历史记录中。此外，在导航到相应的页面时，这些非历史的选择器组件也不会更新它们的,URL,，结果是无法为这些页面添加书签。,touchOverflowEnabled(boolean,default:false),为了使用本地的惯性滚动,(momentum scrolling),来实现真正固定的工具栏，浏览器需要支持两种定位：,fixed,或,overflow,：,auto,。新发布的,WebKit(iOS5),开始支持该行为。可以通过将该配置选项设置为,true,来启用该行为。,ns(string,default:”),选项可以自定义自己的命名空间，格式为“,data-,自定义名,-role,”并按“,.ui-mobiledata-,自定义名,-role=page,”的格式在主题样式中增加对应的样式类别。用于,jQuery Mobile,内自定义,data-*,属性的命名空间。在,HTML5,内，数据属性属于新特性。例如，,”data-role”,是,role,属性的默认名称空间。如要以全局方式覆盖默认的名称空间，则需要覆盖,$.mobile.ns,选项。,$.mobile.ns=“jqm-”;,所有的,jQuery Mobile data-*,属性都需要前缀,”data-jqm-”,例如，,”data-role”,属性现在变成,”data-jqm-role”,如果要更新默认的名称空间，则需要更新在,jQuery Mobile CSS,文件内发现的一个,CSS,选择器,:,/original CSS for default namespace;,.ui-mobiledata-role=page,.ui-mobiledata-role=dialog,.ui-page,/Updated CSS for the new namespace“jqm-”,.ui-mobiledata-jqm-role=page,.ui-mobiledata-jqm-role=dialog,.ui-page,覆盖默认的名称空间原因：,首先，如果在设计一个包含,HTML5 data-*,属性的,JavaScript,框架，,W3C,建议在其中包含一个钩子,(hook),以允许开发人员自定义名称空间，从而避免与第三方框架发生冲突。当遇到与第三方框架发生冲突时，需要改变默认名称空间,jQuery Mobile,方法,jQuery Mobile,提供一套方法，当需要以程序方式更新移动,Web,应用程序时可使用,$.mobile.changePage():changPage(),函数处理页面相互转换时设计的所有细节,用途：,$.mobile.changePag