Jquery Moblie 从入门到精通 1

 首先，我们应该在你的编程工具中添加我们要的页面——HTML。之后我们在Head标签中添加引用如下：

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

我们可以在

HTML文档的body中添加出下面的代码：

<div data-role="page" id="pageone"><!--显示在浏览器中的页面-->
        <div data-role="header"><!--创建页面上方的工具栏-->
            <h1>欢迎访问我的主页</h1>
        </div>

        <div data-role="content"><!--定义页面内容比如文本/图像/表单/按钮等-->
            <p>你好，我是一名移动开发者！</p>
            <a href="#pagetwo" data-rel="dialog">转到页面二</a>
        <a href="HtmlHelloWorld.html">转到外部页面</a>
        </div>
        <div data-role="footer"><!--创建页面底部工具框-->
            <h1>页脚文本</h1>
        </div>
    </div>
    <div data-role="page" id="pagetwo">
        <div data-role="header">
            <h1>欢迎访问我的主页</h1>
        </div>
        <div data-role="content">
            <p>Goodbye!</p>
            <a href="#pagethree" data-transition="slide">滑动转到页面三</a>
            <a href="pageone"data-transition="pop" >转向页面一</a>
        </div>
        <div data-role="footer">
            <h1>页脚文本</h1>
        </div>
    </div>
    <div data-role="page" id="pagethree">
        <div data-role="header">
            <h1>欢迎访问我的主页</h1>
        </div>
        <div data-role="content">
            <p>Goodbye!</p>
            <a href="#pagetwo" data-transition="flip">切换转到页面二</a>
            <a href=""></a>
        </div>
        <div data-role="footer">
            <h1>页脚文本</h1>
        </div>
    </div>

这其中，我们使用了data-transition函数使用说明如下：

下面的表格展示了可与 data-transition 属性一同使用的可用过渡：

过渡	描述
fade	默认。淡入淡出到下一页。
flip	从后向前翻动到下一页。
flow	抛出当前页面，引入下一页。
pop	像弹出窗口那样转到下一页。
slide	从右向左滑动到下一页。
slidefade	从右向左滑动并淡入到下一页。
slideup	从下到上滑动到下一页。
slidedown	从上到下滑动到下一页。
turn	转向下一页。
none	无过渡效果。

提示：在 jQuery Mobile 中，淡入淡出效果在所有链接上都是默认的（如果浏览器支持）。

提示：以上所有效果同时支持反向动作，例如，如果您希望页面从左向右滑动，而不是从右向左，请使用值为 "reverse" 的 data-direction 属性。在后退按钮上是默认的。