一、jQuery Mobile简介
jQuery Mobile 是用于创建移动 Web 应用的前端开发框架。
jQuery Mobile 可以应用于智能手机与平板电脑。
jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页。
jQuery Mobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）
二、jQuery Mobile安装
1、从 CDN 中加载 jQuery Mobile (推荐)
# 国内用户推荐使用百度CDN： <head> <!-- meta使用viewport以确保页面可自由缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入 jQuery Mobile 样式 --> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- 引入 jQuery 库 --> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <!-- 引入 jQuery Mobile 库 --> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head>
2、从jQuerymobile.com 下载 jQuery Mobile库
# 从 jQuerymobile.com下载该文件。 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile-1.4.5.css"> <script src="jquery.js"></script> <script src="jquery.mobile-1.4.5.js"></script> </head>
三、jQuery Mobile页面
# 一个基本的移动网页
<body> <div data-role="page"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>我现在是一个移动端开发者!!</p> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> </body>
实例解析：
- data-role="page" 是在浏览器中显示的页面。
- data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
- data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
- "ui-content" 类用于在页面添加内边距和外边距。
- data-role="footer" 用于创建页面底部工具条。
- 在这些容器中你可以添加任何 HTML 元素 - 段落, 图片, 标题, 列表等。
# 多个页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- meta使用viewport以确保页面可自由缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入 jQuery Mobile 样式 --> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- 引入 jQuery 库 --> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <!-- 引入 jQuery Mobile 库 --> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>我现在是一个移动端开发者!!</p> <a href="#pagetwo">第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="main" class="ui-content"> <a href="#pageone">第一个页面</a> </div> </div> </body> </html>
# 页面作为对话框使用 <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>欢迎来到我的主页</h1> </div> <div data-role="main" class="ui-content"> <p>我现在是一个移动端开发者!!</p> <a href="#pagetwo">第二个页面</a> </div> <div data-role="footer"> <h1>底部文本</h1> </div> </div> <div data-role="page" data-dialog="true" id="pagetwo"> <div data-role="header"> <h1>我是一个对话框！</h1> </div> <div data-role="main" class="ui-content"> <p>对话框与普通页面不同，它显示在当期页面上, 但又不会填充完整的页面，顶部图标 "X" 用于关闭对话框。</p> <a href="#pageone">第一个页面</a> </div> <div data-role="footer"> <h1>对话框底部文本</h1> </div> </div> </body>