Jquery Mobile学习教程之四页面过渡-蒲公英云

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

亦凉 2023-10-16 19:41 68阅读 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>
<!--html 包含多个page  -->
<div data-role="page" id="pageone" data-title="页面一">
  <div data-role="header">
    <h1>在此处插入标题</h1>
  </div>
   <!--page页面之间的跳转  -->
  <div data-role="content">
  <!-- 页面跳转属性：data-transition -->
    <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>