zoukankan      html  css  js  c++  java

  • 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.    
    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代码   收藏代码
    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.   
    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'属性，此时动画效果无效。
  • 相关阅读:
    2019－2020－1 20191312《信息安全专业导论》第十二周学习总结
    GPG
    2019－2020－1 20191312《信息安全专业导论》第十一周学习总结
    wireshark
    ssh
    Nmap
    2019-2020-1 《python程序设计》20192428魏来 综合实践报告
    20192428 魏来 2019-2020《Python程序设计》 实验三 报告
    20192428 实验二《Python程序设计》实验报告
    20192428 实验一《Python程序设计》实验报告
  • 原文地址：https://www.cnblogs.com/hechunhua/p/3754833.html
Copyright © 2011-2022 走看看