1. 简介
jQuery Mobile是由(MT)Media Temple联合多家移动设备厂商以及软件企业共同发起的针对触屏智能手 机与平板电脑的web应用的前端开发框架。
jQuery Mobile构建于大名鼎鼎的jQuery 以及 jQuery UI类库之上,为前 端开发人员提供了一个兼容所有主流移动设备平台的统一UI接口系统。拥有出色的弹性,轻量化以及渐进增强特性与可访问 性。
jQuery Mobile框架遵循"write less, do more"思想来设计,通过该框架,用户可以开发跨平台、 跨设备的统一的html5应用,无需针对每个设备和操作系统分别开发应用代码。目前jQuery Mobile支持的的系统和设备有: iOS, Android, BlackBerry, Tizen, Bada, Windows Phone, WebOS, Symbian。
2. 下载和使用
jQuery Mobile强调语义标注,非常易于使用。只要会使用基本的HTML,就可以基于jQuery Mobile快速构建Web应用。目前JQuery Mobile最新的稳定版本为V1.2.0, 可以通过jQuery Mobile 官方网站http://jquerymobile.com/ 下载源码。
jQuery Mobile使用非常简单,打开任何你所喜好的文本编辑器,新建一个文件并命名为:test.html, 在该文件开始处添加jQuery Mobile框架代码:
- <!DOCTYPE html>
- <html>
- <head>
- <title>My Page</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="stylesheet" href="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.CSS" />
- <script src="http://code.jQuery.com/jQuery-1.8.2.min.js"></script>
- <script src="http://code.jQuery.com/mobile/1.2.0/jQuery.mobile-1.2.0.min.js"></script>
- </head>
- <body>
- Add your content here.
- </body>
- </html>
保存文件,并在浏览器中打开,即可浏览。
下面我们来实现一个Hello World例子, <body> 标签中的内容用下面代码替换。
- <body>
- <center data-role="page">
- <center data-role="header">
- <h1>hello</h1>
- </center><!-- /header -->
- <center data-role="content">
- <p>Hello world</p>
- </center><!-- /content -->
- </center><!-- /page -->
- </body>
在这段代码中,我们首先使用一个data-role来描绘该页面,同时使用hello作为我们的header data-role。在content标签里面,我们填入了<p>Hello world</p>。 这些特定的data-role定义的HTML5属性 ,在JQuery Mobile中用于快速构建增强风格的用户界面。
保存代码并在浏览器中打开,效果如下:
图1 Hello world运行效果
来源: http://www.bianceng.cn/web/Html/201308/37226.htm