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（版本可以根据情况自己决定），如：

  1. Page Title<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
  2. 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的基本内容：

  1. <div>
  2. <div>...</div>
  3. <div>...</div>
  4. <div>...</div>
  5. </div>

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

  1. <!-- Start of first page -->
  2. <div>
  3. <div>
  4. <h1>Foo</h1>
  5. </div><!-- /header -->
  6. <div>
  7. <p>I'm first in the source order so I'm shown as the page.</p>
  8. <p>View internal page called <a href="#bar">bar</a></p>
  9. </div><!-- /content -->
  10. <div>
  11. <h4>Page Footer</h4>
  12. </div><!-- /header -->
  13. </div><!-- /page -->
  14. <!-- Start of second page -->
  15. <div>
  16. <div>
  17. <h1>Bar</h1>
  18. </div><!-- /header -->
  19. <div>
  20. <p>I'm first in the source order so I'm shown as the page.</p>
  21. <p><a href="#foo">Back to foo</a></p>
  22. </div><!-- /content -->
  23. <div>
  24. <h4>Page Footer</h4>
  25. </div><!-- /header -->
  26. </div><!-- /page -->

默认在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/

 
 
页面中页面切换动画：
jQuery Mobile可以实现页面的切换效果。在同一个Html文件里面，可以定义多个page，切换时直接使用超链接就可以了。
<body>
<div  data-role="page" id="main" data-transition="pop"> 
<a  href="#page2" >链接2</a>
</div>
 
<div  data-role="pag" id="page2"> 
</div>
</body>
系统默认显示page的内容，不显示page2的内容，点击链接后切换到page2的内容。通过“data-transition”实现动画定义。jQuery Mobile实现了上下左右滑动，淡出，弹出，反转等动画。
如果需要转到的HTML是其他链接，不是内部page，需要加上rel='external'属性，此时动画效果无效。

jQuery Mobile 连接外部连接或切换动画的更多相关文章

  1. （二）Jquery Mobile介绍以及Jquery Mobile页面与对话框

    Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...

  2. Jquery Mobile笔记之一

    jQuery Mobile 在你的网页中添加 jQuery Mobile 你可以通过以下几种方式将jQuery Mobile添加到你的网页中: 从 CDN 中加载 jQuery Mobile (推荐) ...

  3. 02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

    一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用 ...

  4. 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载四（场景切换）

    作为一款真正有使用价值的应用,首先应该至少有两个页面,通过页面的切换来实现更多的交互.比如手机人人网,打开以后先是进入登录页面,登录后会有新鲜事,然后拉开左边的面板,能看到相册.悄悄话.应用之类的其他 ...

  5. Docker 安装 oracle 并使用 navicat 实现外部连接

    1,拉取 docker 镜像:docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g 1.1 , 该镜像由阿里云提供,比较大, ...

  6. jquery Mobile入门—多页面切换示例学习

    1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: &l ...

  7. jQuery Mobile页面跳转后未加载外部JS(转)

    http://thewaychung.iteye.com/blog/1807447 在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中 ...

  8. wap开发使用jquery mobile之后页面不加载外部css样式文件/js文件

    场景: wap开发,使用jquery mobile之后不会加载外部自定义的css文件了,需要手动刷新才会加载,查看外部自定义的js文件也是一样. 解决办法: 1.在page下面添加css样式,就不要写 ...

  9. Hyper-V 虚拟机连接外部网络

    Hyper-V创建好虚拟机之后,在默认配置下是没有网络连接的,这个时候就需要进行简单的配置,即可让虚拟机连接外部网络: 在Hyper-V管理器中,右键点击后出现菜单,选择"虚拟交换机管理器& ...

随机推荐

  1. matplotlib绘制三维图

    本文参考官方文档:http://matplotlib.org/mpl_toolkits/mplot3d/tutorial.html 起步 新建一个matplotlib.figure.Figure对象, ...

  2. Linux服务器集群系统(一)（转）

    add by zhj:虽然是2002年的文章,但读来还是收益良多.在 章文嵩:谈LVS及阿里开源背后的精彩故事 中LVS发起人及主要贡献者谈了LVS的开发过程及阿里开源的一些故事 原文:http:// ...

  3. 第四次作业——WORDSEARCH小游戏

    “谁想出来的这么缺德的题目啊!!!!”一个声音在我心中回荡 这个题目很早就在课堂上公布了,我和我的小伙伴都惊呆了! 这是个毛?根本无从下手的感觉 总是觉得这个小游戏不是程序能给出答案的,因为我的第一印 ...

  4. 现代程序设计 homework-04

    题目要求: 第四次作业,构造一个方阵将指定单词填入 stage 1:每个单词只出现1次,且八个方向各至少有两个单词 stage 2:矩阵长宽相等 stage 3:方阵的四个角都要参与单词的构建 算法思 ...

  5. PC问题-VMware Workstation出现“文件锁定失败”

    问题现象:电脑关机时挂起VMware Workstation后,第二天运行VMware Workstation出现“文件锁定失败”. 问题原因:在WIN的目录中有*.LCK文件,此文件是用来锁定当前虚 ...

  6. poj 1469 COURSES(匈牙利算法模板）

    http://poj.org/problem?id=1469 COURSES Time Limit: 1000MS   Memory Limit: 10000K Total Submissions:  ...

  7. [iOS微博项目 - 1.1] - 设置导航栏主题（统一样式）

    A.导航栏两侧文字按钮 1.需求: 所有导航栏两侧的文字式按钮统一样式 普通样式:橙色 高亮样式:红色 不可用样式:亮灰 阴影:不使用 字体大小:15   github: https://github ...

  8. Caused by: Cannot locate the chosen ObjectFactory implementation: spring - [unknown location] 的解决方式

    1.添加网上所说的struts2 plugin jar包 2. <!-- Struts2配置 --> <filter> <filter-name>struts2&l ...

  9. cloudstack4.2+xenserver6.0.2 详细配置攻略

    搭建一台安装了XenServer的服务器 搭建一台安装了CloudStack的服务器用以管理云平台 可以使用CloudStack云平台进行虚拟机管理 使用远程桌面访问windows虚拟机 由于最近实验 ...

  10. 文件频繁IO能有多大的差别

    测试文件写同样大小的文件,单次记录较小和单次记录较大能有多大的性能差别. 最终写入同样大小的文件,小记录需要写入10w次,大记录需要写入1w次,看下最终的性能报告