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