20160816 JQueryMobile的使用

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>

1. 编写底部

    <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>

1. 编写主体

    <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，商品首页，商品列表页，商品详情页，用户登录和注册，