jQuery-Mobile使用指南精编.docxVIP

jQuery Mobile使用指南 简介：jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。 jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。 jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。 接下来我们将通过实例向大家展示jQuery Mobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备平台是IPhone或Android。或者是PC电脑上使用 Safari浏览器调试。 HYPERLINK / / jQuery Msobile 都能做什么? jQuery Mobile为开发移动应用程序提代了非常简单的用户接口 这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码 提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold（点击并按住）、swipe、orientation change 使用一些加强的功能时需要参照一下设备浏览器支持列表 使用预设主题可以轻松定制应用程序外观 jQuery Mobile 基本页面结构 大部分jQuery Mobile Web应用程序都要遵循下面的基本模板 !DOCTYPE html html head titlePage Title/title link rel=stylesheet href=/mobile/1.0a1/jquery.mobile-1.0a1.min.css / script src=/jquery-1.4.3.min.js/script script src=/mobile/1.0a1/jquery.mobile-1.0a1.min.js/script /head body div data-role=page div data-role=header h1Page Title/h1 /div div data-role=content pPage content goes here./p /div div data-role=footer h4Page Footer/h4 /div /div /body /html 要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容 CSS文件jquery.mobile-1.0a1.min.css jQuery library jquery-1.4.3.min.js jQuery Mobile library jquery.mobile-1.0a1.min.js 在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以HYPERLINK /download下载这些文件及主题到你的服务器上。 我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。 说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。 在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。 div dat-role=”header”/div 在页面的顶部建立导航工具栏，用于放置标题和按钮（典型的至少要放一个“返回”按钮，用于返回前一页）。通过添加额外的属性 data-position=”fixed”，可以保证头部始终保持屏幕的顶部 div dat-role=”content”/div 包含一些主要内容，例如文本内容，图像，按钮，列表，表单等等 div dat-role=”footer”/div 在页面的底建立工具栏，添加一些功能按钮 为了确保它始终保持在页面的底部，可以给其加上data-position=”fixed” 属性 多个页面在同一个页面中 有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”pa