【jQuery Mobile学习】jQuery Mobile页面(二)

最新推荐文章于 2025-04-02 09:00:00 发布

Je_WangZhe

最新推荐文章于 2025-04-02 09:00:00 发布

阅读量576

点赞数 1

分类专栏： jQuery 文章标签： jQuery Mobile web app html5

本文链接：https://blog.youkuaiyun.com/u010202304/article/details/50758838

版权

jQuery 专栏收录该内容

4 篇文章

订阅专栏

在上一篇中讲到了jQuery Mobile的基本页面结构及代码的演示，其实jQuery Mobile还拥有一系列关于如何从一页过渡到下一页的效果，在jQuery Mobile过渡效果都可应用于任意链接，通过一个data-transition="slide"属性即可实现过渡效果，transition中文意思是"过渡"，在css3中是一个常用的过渡属性，具体实现如下代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jquery mobile</title>
    <!--初始化移动设备浏览器显示，针对屏幕大小不一来实现各个浏览器的兼容-->
    <!--"width=device-width"是说宽度等于屏幕宽度，"initial-scale=1"是比例1，就是默认不缩放-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--引入jquery mobile的样式-->
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
    <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
    <div data-role="page" id="index">
       <div data-role="header">
          <h2>我是头部1</h2>
       </div>
       <div role="main" class="ui-content">
          <p>我是主体1</p>
          <p><a href="#index2" data-transition="slide">index2</a></p>
       </div>
       <div data-role="footer">
          <h2>我是底部1</h2>
       </div>
    </div>
 
    <div data-role="page" id="index2">
       <div data-role="header">
          <h2>我是头部2</h2>
       </div>
       <div role="main" class="ui-content">
          <p>我是主体2</p>
          <p><a href="#index" data-transition="slide">index</a></p>
       </div>
       <div data-role="footer">
          <h2>我是底部2</h2>
       </div>
    </div>
    <!--引入jquery-->
    <script src="js/jquery-1.11.1.js"></script>
    <!--引入jquery mobile脚本-->
    <script src="js/jquery.mobile-1.4.5.js"></script>
</body>
</html>

在原有的代码上加上data-transition="slide"之后，运行会发现页面之间的跳转会有过渡的效果，不是之前的淡入淡出效果。

data-transition的属性值:

      slide：默认值，从右到左滑动的动画效果
      slideup：向上滑动的动画效果
      slidedown：向下滑动的动画效果
      pop：以弹出的效果打开页面
      fade：渐变褪色的动画效果
      flip：飞入飞出的动画效果

none：没有效果

通过设置对应的属性就可以实现对应的动画效果，同时jQuery Mobile还拥有很多页面事件，例如:页面初始化事件Page Initialization-在页面创建前，就是当页面创建时，以及在页面初始化之后的事件(也就是pagebeforecreate,pagecreate,pageinit)，页面加载事件Page Load/Unload - 当外部页面加载时、卸载时或者失败时(也就是pagebeforeload,pageload)，页面过渡事件(上面示例代码)Page Transition在页面过渡之前和过渡之后(也就是pagebeforeshow、pageshow、pagebeforehide、pagehide)等等的页面效果。