jQuery Mobile基础02----jQuery Mobile Widgets-page(跳转效果

来源：互联网发布：人工智能对生活的影响编辑：程序博客网时间：2024/04/27 18:08

<!DOCTYPE html><!--页面跳转--><html><head lang="en">    <meta charset="UTF-8">    <!--适配标签，宽度就是设备的宽度，缩放1.0，表示不缩放-->    <meta name="viewport" content="width=device-width，initial-scale=1.0">    <title></title>    <!--引入所需要的库文件-->    <script src="jquery-2.1.4.min.js"></script>    <script src="jquery.mobile-1.4.5.min.js"></script>    <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" type="text/css"></head><body><!--第一个界面-->   <div data-role="page"id="pageone"data-position="fixed">       <div data-role="header" >           <h1>欢迎来到我的主页</h1>       </div>       <div role="main">           <!--data-transition页面跳转动画-->            <a href="#pagetwo" data-transition="slideup">跳转到第二个界面</a>           <!--data-rel="dialog"把第二个界面当成一个dialog-->            <a href="#pagetwo" data-rel="dialog">把界面当成一个dialog</a>       </div>       <div data-role="footer"data-position="fixed">           <h1>这是底部</h1>       </div>   </div>   <!--第二个界面-->   <div data-role="page" id="pagetwo">       <div data-role="header">           <h1>欢迎来到我的主页</h1>       </div>       <div role="main">           <!--data-transition页面跳转动画-->            <a href="#pageone" data-transition="flip">返回到第一个界面</a>       </div>       <div data-role="footer">           <h1>这是底部</h1>       </div>   </div></body></html>
所需要依赖的库文件：
http://download.csdn.net/detail/zhaihaohao1/9160517

0 0