jQuery Mobile 入门，面试杀手锏
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile 入门示例</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>首页</h1>
</div>
<div data-role="content">
<p>这是首页的内容。</p>
<a href="#profile" data-role="button" data-transition="slide">查看个人资料</a>
</div>
<div data-role="footer">
<h4>首页底部</h4>
</div>
</div>
<div data-role="page" id="profile">
<div data-role="header">
<h1>个人资料</h1>
</div>
<div data-role="content">
<p>这是个人资料的内容。</p>
<a href="#home" data-role="button" data-transition="slide">返回首页</a>
</div>
<div data-role="footer">
<h4>个人资料底部</h4>
</div>
</div>
</body>
</html>这个示例展示了如何使用jQuery Mobile创建一个简单的移动网站，包括两个页面（首页和个人资料页），并通过按钮进行导航。代码使用了jQuery Mobile的data-role="page"来定义页面，data-role="header"、data-role="content"和data-role="footer"来定义页面的不同部分。同时，使用了data-transition="slide"来设定页面之间的滑动过渡效果。这个示例简洁易懂，适合作为初学者学习jQuery Mobile的入门教程。
评论已关闭