Jquery Mobile学习教程之四页面过渡

亦凉 2023-10-16 19:41 15阅读 0赞

### jQuery Mobile 过渡效果 ###

jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。

![Center][]

源代码：

<!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
    <script src="js/jquery-1.8.3.js"></script>
    <script src="js/jquery.mobile-1.4.2.min.js"></script>
    </head>
    <body>
    
    <div data-role="page" id="pageone" data-title="页面一">
      <div data-role="header">
        <h1>在此处插入标题</h1>
      </div>
       
      <div data-role="content">
      
        <p><a href="#pagetwo" data-role="button" data-transition="flip">页面跳转</a></p>
      </div>
    
      <div data-role="footer">
        <h1>在此处插入页脚文本</h1>
      </div>
    </div> 
    
    <div data-role="page" id="pagetwo" data-title="页面二">
      <div data-role="header">
        <h1>在此处插入标题</h1>
      </div>
    
      <div data-role="content">
        <p>页面二</p>
      </div>
    
      <div data-role="footer">
        <h1>在此处插入页脚文本</h1>
      </div>
    </div> 
    
    </body>
    </html>

[Center]: https://img-blog.csdn.net/20140303223836765?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhvdXpoaXdlbmdhbmc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery Mobile学习教程之四页面过渡

jQuery Mobile 过渡效果 jQuery Mobile 拥有一系列关于如何从一页过渡到下一页的效果。 ![Center][] 源代码： <

亦凉/ 2023年10月16日 19:41/ 0 赞/ 16 阅读

相关 Jquery Mobile学习教程之对话框

对话框 jQuery Mobile中创建对话框的方式十分方便，只需要在指向页面的链接元素中添加一个“data-rel”属性，并将该属性值设置为“dialog”。单击该

亦凉/ 2023年10月16日 19:32/ 0 赞/ 9 阅读

相关 Jquery Mobile 学习教程之页面脚本

页面的脚本 jQuery Mobile中通过AJAX请求的方式加载页面，在编写页面脚本时，需要与PC端开发页面区分开。通常情况下，页面在初始化时会触发pagecrea

た入场券/ 2023年10月16日 19:32/ 0 赞/ 24 阅读

相关 Jquery mobile学习教程之Jquery mobile 二页面结构

Jquery Mobile基本框架在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个标记的“data-role”属性设置为“pag

一时失言乱红尘/ 2023年10月16日 19:32/ 0 赞/ 22 阅读

相关 jquery mobile学习教程之初识Jquery mobile 一

Jquery Mobile简介： jQuery Mobile 是一个针对触摸体验的 web UI 开发框架，允许您开发跨智能电话和平板电脑工作的移动 web 应用程序

墨蓝/ 2023年10月16日 19:32/ 0 赞/ 45 阅读

相关使用jQuery Mobile实现页面跳转

jQuery Mobile是一个用于创建移动Web应用程序的JavaScript框架，它提供了丰富的功能和交互效果。在jQuery Mobile中，页面跳转是非常常见的操作，可

Myth丶恋晨/ 2023年10月16日 17:39/ 0 赞/ 163 阅读

相关 Jquery Mobile的页面刷新问题

由于页面的控制和展现都放在了mobile客户端，所以UI的动态化就需要通过JS在客户端完成。针对JQM的动态化，主要用到以下两个技术： JQM组件动态修改界面模

Dear 丶/ 2022年08月26日 14:25/ 0 赞/ 219 阅读

相关 JQuery Mobile入门——外部页面链接

参考：[http://blog.csdn.net/liang408015204/article/details/8479030][http_blog.csdn.net_lian

客官°小女子只卖身不卖艺/ 2022年08月20日 07:29/ 0 赞/ 184 阅读

相关 jQuery-mobile 学习笔记之三（事件监听）

续上触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）滚动事件 - 当上下滚动时触发方向事件 - 当设备垂直或水平旋转时触发页面事件 - 当页面被显示、隐藏

素颜马尾好姑娘i/ 2022年08月02日 14:43/ 0 赞/ 203 阅读

相关 jQuery Mobile

jQuery Mobile是一个基于jQuery Core的触摸友好UI框架，适用于所有流行的移动，平板电脑和桌面平台。官网：[http://jquerymobile.co

小灰灰/ 2022年05月14日 07:07/ 0 赞/ 555 阅读