jquery mobile 的使用

下载地址:jquerymobile.com

1. 新建webapp.html

2. 引用文件
   <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>

3. 加入头
   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

4. 单页面多应用
   <div data-role="page" id="pageone"></div>
   <div data-role="page" id="pagetwo"></div>

5. 编写头部
   <div data-role="header">
   <h1>test</h1>
   </div>

6. 编写底部
   <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>

7. 编写主体
   <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>

作业:作业：三个页面 ，用jq mobile，商品首页，商品列表页，商品详情页，用户登录和注册，