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

你猜 阅读:645 2021-03-31 23:25:56 评论:0


jQuery Mobile 过渡效果

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

源代码:

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

标签:jquery
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号