jQuery Mobile使用指南-jQuery Msobile 都能做什么?
jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。
jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。
接下来我们将通过实例向大家展示jQuery Mobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备平台是IPhone或Android。或者是PC电脑上使用 Safari浏览器调试。
Go on!
jQuery Mobile 都能做什么?
◆jQuery Mobile为开发移动应用程序提代了非常简单的用户接口
◆这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码
◆提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold(点击并按住)、swipe、orientation change
◆使用一些加强的功能时需要参照一下设备浏览器支持列表
◆使用预设主题可以轻松定制应用程序外观
jQuery Mobile 基本页面结构
大部分jQuery Mobile Web应用程序都要遵循下面的基本模板
-
<!DOCTYPE html> - <html>
- <head>
- <title>Page Title</title>
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
- <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
- </head>
- <body>
- <div data-role="page">
- <div data-role="header">
- <h1>Page Title</h1>
- </div>
- <div data-role="content">
- <p>Page content goes here.</p>
- </div>
- <div data-role="footer">
- <h4>Page 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方式，开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。
在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。
