jquery mobile 的使用
下載地址:jquerymobile.com
新建webapp.html
引用文件
<script src="./js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="./js/jquery.mobile-1.4.5.css">
<script src="./js/jquery.mobile-1.4.5.js"></script>加入頭
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />單頁(yè)面多應(yīng)用
<div data-role="page" id="pageone"></div>
<div data-role="page" id="pagetwo"></div>編寫(xiě)頭部
<div data-role="header">
<h1>test</h1>
</div>
- 編寫(xiě)底部
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">home</a></li>
<li><a href="#pageone" data-icon="bars">bars</a></li>
<li><a href="#pageone" data-icon="grid">grid</a></li>
</ul>
</div>
</div>
- 編寫(xiě)主體
<div data-role="main" class="ui-content">
<form method="post">
<label for="iphone">手機(jī)</label>
<input type="text" name="tel">
<label for="iphone">密碼</label>
<input type="password" name="pwd">
<a href="#" class="ui-btn ui-shadow">確定</a>
<a href="#" class="ui-btn">登陸</a>
</form>
</div>
