Jquery Moblie 从入门到精通 1

来源：互联网发布：c语言将字符存入字符串编辑：程序博客网时间：2024/06/06 18:00

首先，我们应该在你的编程工具中添加我们要的页面——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 属性。在后退按钮上是默认的。

0 0