20160816 JQueryMobile的使用
2016-08-17 本文已影响0人
代码界的小学生
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" /> -
单页面多应用
<div data-role="page" id="pageone"></div>
<div data-role="page" id="pagetwo"></div> -
编写头部
<div data-role="header">
<h1>test</h1>
</div>
- 编写底部
<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>
- 编写主体
<div data-role="main" class="ui-content">
<form method="post">
<label for="iphone">手机</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>
