jQueryMobileAPI

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