在 JavaScript 中，使用 jQuery 时可以将 jQuery object 对象本身作为 $ 引用，同时获得 jQuery 设备访问权限。可扩展 jQuery 内核的 jQuery Mobile 框架可以通过使用 $.mobile 来访问，同时还可以提供特定于 jQuery Mobile 事件和方法的访问。$.mobile 公开的事件和方法，如下所述。
事件与其他 jQuery 事件一样，您可以将 live() 和 bind() 函数绑定到 jQuery Mobile 事件。例如，触摸事件包括 tap、taphold 和各种滑动 (swipe) 和虚拟鼠标事件。您可以绑定定向更改和滚动事件，比如 scrollstart 和 scrollstop。页面事件允许在以下时候接收通知：
初始化 jQuery Mobile如果您对 jQuery 比较熟悉，可能还记得 DOM 一加载就会开始执行代码，您需要在 $(document).ready() 函数中进行初始化。有了 jQuery Mobile，就可以将初始化绑定到 pageinit 事件，如 清单 3 所示。
清单 3. 绑定到 pageint 事件$( '#welcomePage' ).live( 'pageinit',function(event){ ... });
初始化页面之后，可以触发 pageinit 事件作为引用页面。不管以何种方式加载页面（直接加载或使用 Ajax 加载），页面都是有效的。
覆盖 jQuery Mobile 默认值如果已绑定到 mobileinit 事件，当执行 jQuery Mobile 时会触发该事件，您可以重写一些 jQuery Mobile 的默认值。 显示一个示例。您可以覆盖默认页面过渡、默认页面加载文本、默认页面加载主题，以及其他。
清单 4. 初始化 jQuery Mobile$(document).bind("mobileinit", function(){ //apply overrides here });
访问 jQuery Mobile 全局配置页面（参阅 ），了解有关 jQuery 默认值的更多信息。
方法jQuery Mobile 还提供很多具有 $.mobile 对象的方法。 显示了其中一些可用的方法。
表 1. jQuery Mobile 方法方法使用
$.mobile.changePage以编程的方式从一个页面转到另一个页面。例如，通过滑块过渡转到 weblog.php 页面，使用 $.mobile.changePage("weblog.php", "slide")。
$.mobile.loadPage要加载一个外部页面，用 jQuery Mobile 对其进行增强，然后将其插入到 DOM。
$.mobile.showPageLoadingMsg显示页面加载消息。
$.mobile.hidePageLoadingMsg隐藏页面加载消息。
$.mobile.path.isSameDomain一个用于比较两个 URL 域的实用工具方法。
$.mobile.activePage当前视图中的一个页面引用
jQuery Mobile 方法页面有很多方法和实用工具（参阅 ）。
Widgets 和 HTML5 data-* 属性jQuery Mobile 依赖 HTML5 data-* 属性来支持各种 UI 元素、过渡效果和页面构造。这些 HTML5 属性是 jQuery Mobile 简单性的关键。不支持 HTML5 的浏览器将会默默丢弃 HTML5 属性。
下列列表将显示这些代码以及不同 UI 组件和 data-* 属性的渲染，以及如何使用它们来创建 UI 组件。
<div data-role="page"> <div data-role="header"> <h1>HEADER</h1> </div <div data-role="content"> <p> CONTENT AREA </p> </div> <div data-role="footer"> <h1>FOOTER</h1> </div> </div>
图 3. 页面、页眉、内容和页脚<input type="checkbox" /> <label for="checkbox-0">Checkbox</label>
图 5. 复选框<div data-role="collapsible"> <h3>Header</h3> <p>Paragraph...</p> </div>
图 6. 可折叠内容
<a href="dialog.html" data-rel="dialog" data-transition="pop">Open dialog</a>
中的代码是一个超链接，将使用一个 “弹出” 类型的过渡打开对话框小部件。 举例说明一个对话框小部件示例。
图 7. 打开一个对话框
<label for="flip-a">Select slider:</label> <select data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select>
图 8. 翻转切换开关<ul data-role="listview" data-theme="g"> <li><a href="Friends.html">Friends</a></li> <li><a href="SendMessage.html">Send Message</a></li> <li><a href="Share.html">Share</a></li> </ul>
图 9. 列表视图
<div data-role="navbar"> <ul> <li><a href="a.html">One</a></li> <li><a href="b.html">Two</a></li> </ul> </div>
图 10. 导航条
相关文章
精彩导读
热门资讯
关注我们
