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