jQueryMobileAPI.ppt

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文件之前 可配置的jQueryMobile选项 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 get 在生成页面请求时 指定所使用的方法 get或post 7 data string或object default undefined 发送一个Ajax页面请求的数据 8 reloadPage boolean default false 强制页面重新载入 即使它已经位于页面容器的DOM中 9 showLoadMsg boolean default true 在请求页面是 显示载入信息 10 fromHashChange boolean default false 指示changePage是否来自于一个hashchange事件11 allowSamePageTransition boolean default false changePage方法会忽略转到同一页面的请求 将该选项设置为true 则允许转换到同一个页面12 dataUrl string default toPageURL 对URL进行设置 使其在浏览器的地址栏显示13 fromPage string default mobile activePage 指定from页面 1 mobile changePage onepage html contact2 mobile changePage id transition pop reverse true contact3 varnewpage Hi内容 newpage appendTo mobile pageContainer mobile changePage newpage 禁用Ajax mobile ajaxEnabled false mobile hidePageLoadingMsg 移除或隐藏页面载入信息 mobile loadingMessage 默认的载入消息是 载入 且可配置 例 mobile hidePageLoadingMsg mobile loadPage loadPage函数将一个页面载入到当前页面的DOM中 并对其增强 该方法也可以用作一个数据属性 而且可以附加到链接多按钮中用途 mobile loadPage url options 参数 url string 要载入的页面1 url string 文件URL onePage html options object 配置changePage请求的一组键 值对 所有设置都是可选的 1 data string或object default undefined 发送一个Ajax页面请求的数据2 loadMsgDelay number inms default 50 在显示载入消息之前 添加一个动的延迟 该延迟允许框架在无需一条载入消息的情况下就能够载入一个缓存的页面 3 pageContainer jQuery集合 default mobile pageContainer 在页面载入后 指定应该包含载入页面的元素 4 reloadPage boolean default false 强制页面重新载入 即使它已经位于页面容器的DOM中 5 role string default data roleattribute 载入页面时需要的data role 默认值是元素定义的 data role属性6 showLoadMsg boolean default true 在请求页面是 显示载入信息 7 type string default get 在生成页面请求时 指定所使用的方法 get或post 例 1 mobile loadPage onePage html 2 mobile changePage onePage mobile showPageLoadingMsg 显示页面载入消息 mobile loadingMessage 例 mobile showPageLoadingMsg mobile silentScroll number 垂直滚动页面 在框架内 只要一个页面被汇入 就会调用silentScroll 例如 当单击回退按钮时 silentScroll方法会在前一个页面显示之前被触发 而且会恢复前一个页面的滚动位置 焦点会出现在触发该初始转换的组件上 在silentScroll期间 不贵触发scrollstart和scrollstop事件 例 mobile silentScroll 0 mobile silentScroll 100 jqmData jQuery data 方法的移动版本 该方法提供了 data 内的所有功能 而且能够确保使用jQueryMobile的数据名称空间 mobile ns 来设置和获取所有的数据 例 var pages jqmData role page varfirstPage pages first vartheme jqmData firstPage theme jqmHasData jQuery hasData 方法的移动版本 该方法提供了 hasData 内的所有功能 而且能够确保使用jQueryMobile的数据名称空间 mobile ns 来获取所有的数据 例 varhasTheme jqmHasData firstPage theme jqmRemoveData jQuery removeData 方法的移动版本 该方法提供了 removeData 内的所有功能 而且能够确保使用jQueryMobile的数据名称空间 mobile ns 来删除所有的数据 例 jqmData firstPage textData textValue jqmRemoveData firstPage textData 访问路径和URL地址转换方法 在使用jQueryMobile可发移动项目过程中 有时需要将文件的访问路径进行统一转换 将一些不规范的文件访问的相对地址转换成标准的绝对地址 这项功能可以通过调用 mobile对象中的makePathAbsolute 来实现 该方法调用格式为 mobile path makePathAbsolute relPath absPath 其中参数relPath为字符型 必填项 表示相对文件的路径 参数absPath为字符型 必填项 表示绝对文件的路径该方法的功能是 以绝对路径为标准 根据相对路径所在目录级别 将相对路径转成一个绝对路径 返回值是一个转换成功的绝对路径字符串 makeUrlAbsolute 方法是将一些不规范的URL地址 转成统一标准的绝对URL地址 该方法调用格式为 mobile path makeUrlAbsolute relPath absPath 其中参数relPath为字符型 必填项 表示相对URL的地址 参数absPath为字符型 必填项 表示绝对URL的地址该方法的功能是 以绝对URL的地址为标准 根据相对URL的地址所在目录级别 将相对URL的地址转成一个绝对URL的地址 返回值是一个转换成功的绝对URL的地址字符串 URL地址验证方法 isRelativeUrl 可以验证指定的URL地址是否为相对URL地址 该方法调用的格式 mobile path isRelativeUrl url 参数url为字符型 必填项 表示一个相对或绝对URL地址 该方法返回一个布尔值 即如果是相对URL地址 则返回true 否则返回false isAbsoluteUrl 可以验证指定的URL地址是否为绝对URL地址 该方法调用的格式 mobile path isAbsoluteUrl url 参数url为字符型 必填项 表示一个相对或绝对URL地址 该方法返回一个布尔值 即如果是绝对URL地址 则返回true 否则返回false 域名比较方法 isSameDomain 方法可比较两个任意URL地址字符串内容是否为同一个域名 该方法调用的格式 mobile path isSameDomain url1 url2 url1为字符型 必填项 是一个相对的URL地址字符串 url2为字符型 必填项 是一个相对或绝对的URL地址字符串该方法功能 当url1与url2的域名相同时 返回true 否则返回false 纵向滚动方法 silentScroll 即滚动制Y轴的一个指定位置 该方法在执行时不会触滚动事件 调用格式如下 mobile silentScroll yPos 该方法的功能是 在Y轴上滚动到指定的位置 其中参数yPos为整数型 默认值为0 如果参数值为10 则表示整个屏幕向上滚动到Y轴的10px处 jQueryMobile事件 pagebeforechange pageload pageinit pagecreate pagebeforecreate pgebeforeshow pagechange pagebeforechange pagebeforehide pagehide pageshow mobileinit pagebeforeload LoadPage PageEnhancements DOM ready complete Goto cached page Goto uncached page PageTransition jQueryMobile页面事件 事件概览 mobileinit 在jQueryMobile初始化时 它在document对象上触发一个mobileinit事件 绑定到mobileinit事件 然后应用对jQueryMobile的默认配置的覆盖 1 页面改变事件在导航到另外一个页面时会自动在文档上触发页面改变事件 从内部运行机制来看 当调用 mobile changePage方法时 会触发这些事件 在该进程期间 会方法两个事件1 pagebeforechange2 依赖于页面改变的状态 当页面改变成功时 pagechange事件被触发 页面改变失败 则触发pagechangefailed事件Pagebeforechange 在页面改变期间触发的第一个事件 回调该事件是 会传递两个参数 第一个是事件 第二个是一个数据对象 通过调用事件的preventDefault 可以取消页面改变 此外 通过检查和更新数据对象 可以覆盖页面改变 作为第二个参数传递的数据对象包含如下属性 1 toPage string 一个文件URL或一个jQuery集对象 与传递给 mobile changePage的选项相同2 option object 与传递给 mobile changePage的选项相同例 document bind pagebeforechange function e data console log Changepagestarting vartoPage data toPage varoptions data options e preventDefault pagechange 在页面成功改变之后出发的最后一个事件 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 toPage string 一个文件URL或一个jQuery集对象 与传递给 mobile changePage的选项相同2 option object 与传递给 mobile changePage的选项相同例 document bind pagechange function e data console log Changepagesuccessfullycompleted vartoPage data toPage varoptions data options pagechangefailed 在页面更改失败时 会触发该事件 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 toPage string 一个文件URL或一个jQuery集对象 与传递给 mobile changePage的选项相同2 option object 与传递给 mobile changePage的选项相同例 document bind pagechangefailed function e data console log Pagechangefailed 2 页面载入事件当框架将一个页面载入到DOM中时 会在文档上触发页面载入事件 从成都来讲 当调用 mobile loadPage时 会触发该事件 在该进程期间 loadPage 会触发两个事件 第一个是pagebeforeload 第二个事件是pageload事件 页面载入成功时 或pageloadfailed事件 页面载入失败时 pagebeforload 页面载入期间触发的第一个事件 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 可以手动处理载入逻辑 为了实现该曹硕 必须调用事件的preventDefault 并调用延迟对象引用 deferredobjectreference 的resolve 或reject 方法 其中延迟对象引用包含在数据对象中 作为第二个参数传递的数据对象包含如下属性 1 url string 发送给 mobile loadPage 的相对URL 2 absUrl string URL的完全引用3 deataUrl string 实际存储在页面data url属性中的URL版本 该URL显示在浏览器的地址栏中4 deferred object 调用preventDefault 来手动处理页面载入时 必须调用该对象的resolve 或reject 方法 以便changePage 请求能够恢复处理过程5 options object 与传递给 mobile loadPage的选项参数相同例 document bind pagebeforeload function e data e preventDefault varresponse manuallyLoadPage if response status success data defeered resolve data absUrl data options response page else data deferred reject data absUrl data options pageload 当页面成功载入到DOM中时 会触发该事件 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 url string 发送给 mobile loadPage 的相对URL 2 absUrl string URL的绝对引用3 deataUrl string 实际存储在页面data url属性中的URL版本 该URL显示在浏览器的地址栏中4 options object 与传递给 mobile loadPage的选项参数相同例 document bind pagecload function e data console log PagesuccessfullyloadedintoDOM pageloadfailed 当页面载入失败时 会触发该事件 在该过程期间 框架会显示一条页面载入失败消息 并调用延迟对象的reject 通过调用事件的preventDefault 在回调时能够防止该默认行为被执行 例 document bind pageloadfailed function e data console log Pageloadfailed 3 页面初始化事件在jQueryMobile增强页面之前和之后 会触发页面初始化事件 绑定到这些事件 以便在框架增强页面之前对标记进行预解析 或者是在框架增强页面之后设置DOMready事件处理程序 在页面的声明周期之内 这些事件只被执行一次pagebeforecreate 在页面改变期间 该事件在正在进行初始化的页面上触发 当页面容器已经被插入到DOM中之后 但是在页面被增强之前 该事件才发生 在框架增强页面之前 这是预解析标记的首选位置 例如 在该事件中 能够创建和添加虚拟的页面微件 或者是修改现有的数据属性 例 to page id live pagebeforecreate function console log Pre parsethemarkupbeforetheframeworkenhancesthewidgets pagecreate 在页面改变之前 该事件在正在进行初始化的页面上触发 这是由框架触发的事件 用来初始化所有的页面插件 如创建了自定义的页面插件 这将是对这些插件进行初始化的首选位置例 to page id live pagecreate function console log Pagepluginsarebeinginitialized jqmData role my plugin myPlugin pageinit 在页面增强结束之后 该事件在正在初始化的页面上发生 该页面现在处于DOMready状态 即当页面的数据初始化完成 还没有加载DOM元素时触发该事件 在jQueryMobile中 AJAX会根据导航把每个页面的内容加载到DOM中 因此 要在任何新页面中加载并执行脚本 就必须绑定pageinit事件而不是ready事件 例 to page id live pageinit function console log Thepagehasbeenenhanced 4 页面转换事件在页面转换期间 页面转换事件在 from 和 to 页面上被触发 当页面在视图中显示或从视图中移除时 可以与这些事件绑定 以进行观察pagebeforehide 在转换开始时 在 from 页面上触发 该事件在pagebeforeshow事件之前发生 而且只有当页面更改请求具有相关联的 from 页面时才能触发 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 nextPage object 一个包含要转换到的页面元素的jQuery集对象 例 from page id live pagebeforehide function e data console log Thepagetransitionisjuststarting pagebeforeshow 在页面被增强之后 并且在页面转换开始之前 该事件在 to 页面上触发 调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 prePage object 一个包含转换之前的页面元素的jQuery集对象 例 to page id live pagebeforeshow function e data console log Thepagetransitionisjuststarting pagehide 在页面转换完成之后 并且在pageshow事件之前 该事件在 from 页面上触发 而且只有当页面更改请求具有相关联的 from 页面时才能触发 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 nextPage object 一个包含要转换到的页面元素的jQuery集对象 例 from page id live pagehide function e data console log Thepagetransitioniscomplete pageshow 在页面转换完成之后 并且在 from 页面被隐藏之后 该事件在 to 页面上触发 回调该事件时 会传递两个参数 第一个是事件 第二个是一个数据对象 作为第二个参数传递的数据对象包含如下属性 1 prevPage object 一个包含转换之前的页面元素的jQuery对象例 to page id live pageshow function e data console log Thepagetransitioniscomplet jQueryMobile团队创建了一些书签 以允许用户从浏览器控制台查看页面事件历史 在导航jQueryMobile应用程序时 可以按照页面 URL和时间戳则3种方式来查看事件历史 要安装这些书签 到jQueryMobile事件记录页面 触发事件 在构建动态页面时 触发jQueryMobile页面事件会比较有用 例如需要为页面添加多个新的组件 可以调用create事件 以同时增强所有的新的微件1 trigger create 可以触发该事件 以自动增强页面上的所有新元素 该事件在页面控制器上被触发 例 Button2 insertAfter b1 Button3 insertAfter b2 mobile pageContainer trigger create 触摸事件 1 tap 轻击 用户完成一次快速完整的轻击页面屏幕时触发 2 taphold 轻击不放 用户完成一次轻击页面屏幕且保持不放 大约1秒 时触发 3 swipe 划动 用户在1秒内水平拖拽屏