jQuery Mobile

一、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>