jQuery Mobile 链接外部链接或切换动画

时间 2019-11-19

标签 jquery mobile 链接外部链接切换动画栏目 JQuery 繁體版

原文原文链接

jQuery Mobile不一样网页之间的跳转问题

jQuery Mobile，一个新的手机终端脚本开发库，从名字能够看出，它是基于jQuery；目前支持不少种手机设备，包括IOS/Android/BlackBerry/Windows Phone等，固然，支持程度不一，具体能够看：http://jquerymobile.com/gbs/ 因为这项目比较新，在我写这文章的时候，目前仍是1.0 ALPHA4.1 RELEASED版，官网提供下载的只有jQuery Mobile的JS和CSS，相关文档目前尚未提供下载，只能经过在线看Demo和说明。通常用jQuery Mobile开发手机版Web页面，须要包括下面三个文件jQuery/jQuery Mobile JS/jQuery Mobile CSS（版本能够根据状况本身决定），如：javascript

Javascript代码

Page Title<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

今天介绍下它的Page：

1. Page基本结构
在一个手机页面中，通常包括三个部分（header/content/footer），它们都是Page的子元素，以下面就是一个Page的基本内容：css

Html代码

<div>
<div>...</div>
<div>...</div>
<div>...</div>
</div>

页面间的跳转和切换，通常都是Page对象的切换，你能够在一个HTML页面中包含多个Page对象，切换经过指定相应的Page ID就能够，以下面页面内容，默认显示第一个Page对象foo，在foo的Page Content中有个 bar连接，表示切换到bar Page，这样达到页面切换的效果，其实经过浏览器看其生成的内容能够知道，这都是经过CSS来达到效果的，最底层固然是display block/none什么的，只不过jQuery Mobile封装了不少CSS：html

Html代码

<div>
<div>
<h1>Foo</h1>
</div>
<div>
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#bar">bar</a></p>
</div>
<div>
<h4>Page Footer</h4>
</div>
</div>
<div>
<div>
<h1>Bar</h1>
</div>
<div>
<p>I'm first in the source order so I'm shown as the page.</p>
<p><a href="#foo">Back to foo</a></p>
</div>
<div>
<h4>Page Footer</h4>
</div>
</div>

默认在Page切换的时候，切换后的页面左上角默认包括一个Back的按钮回到上一个页面，页面URL中也体现出来，如../index.html#foo，表示index.html切换到id为foo的Page，或者index.html#docs-pages.html，表示从index.html切换到docs-pages.html，其实无论页面内连接仍是页面间切换，jQuery Mobile都是发起Ajax请求加载新的页面。若是想连接到一个新界面，并且URL中不想有之前路径#新页面，能够经过在加入连接属性rel="external"或data-ajax="false"，这就告诉jQuery Mobile须要从新加载一个新的页面，并且URL也是全新的。

2. Page切换效果
默认Page间切换的效果是从右向左切换，能够在中指定data-transition属性，指定页面切换的效果，jQuery Mobile目前支持slide/slideup/slidedown/pop/fade/flip等切换效果。 jQuery Mobile官网：http://jquerymobile.com/java

页面中页面切换动画：

jQuery Mobile能够实现页面的切换效果。在同一个Html文件里面，能够定义多个page，切换时直接使用超连接就能够了。

<body>

</div>

</div>

</body>

系统默认显示page的内容，不显示page2的内容，点击连接后切换到page2的内容。经过“data-transition”实现动画定义。jQuery Mobile实现了上下左右滑动，淡出，弹出，反转等动画。

若是须要转到的HTML是其余连接，不是内部page，须要加上rel='external'属性，此时动画效果无效。