JQuery Mobile

1. CDN

需使用3个文件：

jquery.mobile.css
jquery.js
jquery.mobile.js

JQuery Mobile官方的推荐的CDN是：

<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>

而在国内，可使用速度较快的百度CDN。

<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

使用了这些配置后，即使未编写任何代码，网页已被JQuery Mobile进行了初始化设置。

2. Page Template

一个JQuery Mobile Page的模板：

<!DOCTYPE html>

<html>
    <head>
        <title>JQuery Mobile Page Template</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
        <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    </head>

    <body>
        <div data-role="page">
            <div data-role="header">
                <h1>JQuery Mobile Page Template</h1>
            </div>

            <div role="main" class="ui-content">
                <h2>JQuery Mobile Page Template</h2>
                <p>Use this page template as your start-up.</p>
            </div>
            
            <div data-role="footer">
                <h4>All Rights Reserved</h4>
            </div>
        </div>
    </body>
</html>

一个最基本的Page就这样形成了。

3. Page之间的导航

3.1 一个Page形成多个Page的效果

Demo: Multi-page

在一个Page中包含多个data-role="page"的属性，并且为它们分配不同的id值即可。只需简单地相间之间进行链接就行了。

3.2 JQuery Mobile的导航机制

3.2.1 最简单的链接

从最简单的看起。nav-source-1.html是最简单的一个页面。

在该页面上，第一个链接的href属性写为一个并不存在的页面。然后单击此链接，将会看出浏览器中间出现了"Error Loading Page"的错误提示。这说明，即使是最简单的链接，JQM还是试图以Ajax的方式来处理了。

第二个链接能指向名为"nav-dest.html"的页面。能正常跳转。

但是，当通过链接而跳转到nav-dest-1.html页面后，你会发现，在界面上，是显示了nav-dest-1.html的内容，但观看其网页源文件，却发现包含了原来跳转过来的文件的内容：

<html>
<head>...</head>
<body>
<div data-role="page" data-url="nav-source-1.html"></div>
<div class="ui-loader"></div>
<div data-role="page" data-url="nav-dest-1.html" data-external-page="true"></div>
</body>
</html>

如果你再刷新一下nav-dest-1.html的内容，则源页面的内容会消失，而你不能通过浏览器中的返回按钮返回到源页面了。

3.2.2 JQM页面跳转的意义

nav-source-2.html也是简单的一个页面，但它加入了变换特效slide：

this

需注意的是，尽管第2个页面全部加载了，但该页面中如果有两个以上的page, 则只有第一个page会显示出来，且header及其他部分全部被丢弃了。

JQuery Mobile App