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

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代码   

  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的基本内容:

Html代码   

  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:

Html代码   

  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 连接外部连接或切换动画,布布扣,bubuko.com

时间: 2024-10-24 07:18:48

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

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

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的   二.Adobe Dreamweaver CS6 环境搭建以及软件破解   软件安装步骤:   http://www.phonegap100.com/article-79-1.html            软件下载链接地址:   http://bbs.phonegap100.co

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html  二.JM说明 默认data-ajax="true"jquery mobile 是默认通

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

1.在JQuery Mobile中,多个页面的切换是通过<a>元素.并将<href>属性设置为#+对应的id号的方式进行的. 2.多页面切换示例代码: 复制代码代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <meta n

Kubernetes连接外部数据源

Kubernetes架构下比较核心的问题是数据如何persistance,虽然提供了Persistent volumn的方式,但是对于像数据库之类的产品在kubernetes集群环境中运行和管理还是很有难度的,Kubernetes提供了endpoints这种模式让外部的服务映射成内部的服务,这样比较好的解决了集群对外的连接问题, 如果我们去连接外部的一个oracle数据库,具体的步骤如下: 建立endpoints和service. [[email protected] jdbcservice]#

greenplum使用gplink连接外部数据源

作为一个基于postgresql开发的数据仓库,随着近几年大数据概念的兴起也备受关注. 由于GP是近近几年才开源的数据库,网上基本上找不到什么资料,很多时候只能看官方文档,而文档全为英文,对于英文很烂的本人表示真的很无力... 原理: greenplum 支持gpfdist协议外部表,gpfdist协议支持自定义transform. gplink 使用jdbc连接外部数据源,定义transform,将jdbc数据源的数据转换为text格式导入GP或HAWQ. 官方提供的有greenplum.sq

C/C++ 内部连接与外部连接

编译单元: 当一个c或cpp文件在编译时,预处理器首先递归包含头文件,形成一个含有所有必要信息的单个源文件,这个源文件就是一个编译单元. 这个编译单元会被编译成为一个与cpp文件名同名的目标文件(.o或是.obj).连接程序把不同编译单元中产生的符号联系起来,构成一 个可执行程序. 自由函数 如果一个函数是自由函数,那么这个函数不是类的成员函数,也不是友元函数. 内部连接: 如果一个名称对于它的编译单元来说是透明的,并且在连接时不会与其它编译单元中的同样的名称相冲突,那么这个名称有内部连接 (注

linux之SQL语句简明教程---外部连接

之前我们看到的左连接 (left join),又称内部连接 (inner join).在这个情况下,要两个表格内都有同样的值,那一笔资料才会被选出.那如果我们想要列出一个表格中每一笔的资料,无论它的值在另一个表格中有没有出现,那该怎么办呢?在这个时候,我们就需要用到 SQL OUTER JOIN(外部连接) 的指令. 外部连接的语法是依数据库的不同而有所不同的.举例来说,在 Oracle 上,我们会在 WHERE子句中要选出所有资料的那个表格之后加上一个 "(+)" 来代表说这个表格中

windows下连接samba服务器用户切换问题

部署了一台samba服务器了之后用windows连接有一个很普遍的问题,就是登陆过samba一个用户之后windows系统会自动记录上次登陆的samba用户名和密码,所以在下次登陆就不用重新输入账号密码,个人认为这是比较危险的一个地方,特别是在公共客户端上,一般用户不会再使用后进行清除记录操作,很可能导致资料泄露问题. 针对这个问题,网上普遍的做法是在windows下运行一条命令: net use \\192.168.xxx.xxx\IPC$ /DELETE 来删除默认的记录.但是尝试过了之后发

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

Hyper-V创建好虚拟机之后,在默认配置下是没有网络连接的,这个时候就需要进行简单的配置,即可让虚拟机连接外部网络: 在Hyper-V管理器中,右键点击后出现菜单,选择"虚拟交换机管理器" 在右边的列表中选择"外部",然后点击"创建虚拟交换机"按钮 在出现的界面的下拉菜单中,选择自己能够连接外部网络的网卡,然后点击"确定"按钮即可 出现这个选项时,点"确定"继续,会断网几秒钟,然后自动恢复 另外360安全