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

最新推荐文章于 2022-07-21 15:55:12 发布

zhaihaohao1

最新推荐文章于 2022-07-21 15:55:12 发布

阅读量305

点赞数

分类专栏： jQuery Mobile基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/48951929

版权

jQuery Mobile基础专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Mobile基础02----jQuery Mobile Widgets-page(跳转效果

html>html>head lang="en"> meta charset="UTF-8"> meta name="viewport" content="width=device-width，initial-scale=1.0"> title>title> script src="jquery-2.1.4.min.js">script>
复制链接

扫一扫