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代码   jQuery Mobile 连接外部连接或切换动画
  1.    
  2. Page Title<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">  
  3. 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代码   jQuery Mobile 连接外部连接或切换动画
  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代码   jQuery Mobile 连接外部连接或切换动画
  1. <!-- Start of first page -->  
  2. <div>  
  3.   
  4.     <div>  
  5.         <h1>Foo</h1>  
  6.     </div><!-- /header -->  
  7.   
  8.     <div>     
  9.         <p>I‘m first in the source order so I‘m shown as the page.</p>        
  10.         <p>View internal page called <a href="#bar">bar</a></p>   
  11.     </div><!-- /content -->  
  12.   
  13.     <div>  
  14.         <h4>Page Footer</h4>  
  15.     </div><!-- /header -->  
  16. </div><!-- /page -->  
  17.   
  18.   
  19. <!-- Start of second page -->  
  20. <div>  
  21.   
  22.     <div>  
  23.         <h1>Bar</h1>  
  24.     </div><!-- /header -->  
  25.   
  26.     <div>     
  27.         <p>I‘m first in the source order so I‘m shown as the page.</p>        
  28.         <p><a href="#foo">Back to foo</a></p>     
  29.     </div><!-- /content -->  
  30.   
  31.     <div>  
  32.         <h4>Page Footer</h4>  
  33.     </div><!-- /header -->  
  34. </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

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

上一篇:C#.net word excel powerpoint (ppt) 转换成 pdf 文件


下一篇:【转】.NET/ASP.NET Routing路由(深入解析路由系统架构原理)