jquerymobile仿微信 - 01

jquerymobile仿微信 - 01

jquerymobile的组件感觉不咋地哇

本地调试最好是开一个web server，不然数据访问会有问题

    <div data-role="page" id="weixin">
        <div data-role="header" data-position="fixed">
            <div class="ui-grid-b">
                <div class="ui-block-a"><span class="ui-icon-arrow-l ui-btn-icon-left" style="line-height: 46px;"></span><span>微信(5)</span></div>
                <div class="ui-block-b"><span class="ui-icon-search ui-btn-icon-right" style="line-height: 46px;"></span></div>
                <div class="ui-block-c"><span class="ui-icon-plus ui-btn-icon-right" style="line-height: 46px;"></span></div>
            </div>
        </div>
        <div role="main" class="ui-content" data=fullscreen="true">
            <ul data-role="listview" class="ui-listview ui-corner-all ui-shadow">
                <li class="ui-li-static ui-body-inherit ui-li-has-thumb ui-first-child">
                    <img src="imgs/user.jpg">
                    <h3>Broken Bells</h3>
                    <p>Broken Bells</p>
                </li>
                <li class="ui-li-static ui-body-inherit ui-li-has-thumb">
                    <img src="imgs/user.jpg">
                    <h3>Warning</h3>
                    <p>Hot Chip</p>
                </li>
                <li class="ui-li-static ui-body-inherit ui-li-has-thumb ui-last-child">
                    <img src="imgs/user.jpg">
                    <h3>Wolfgang Amadeus Phoenix</h3>
                    <p>Phoenix</p>
                </li>
                <li class="ui-li-static ui-body-inherit ui-li-has-thumb ui-first-child">
                    <img src="imgs/user.jpg">
                    <h3>Broken Bells</h3>
                    <p>Broken Bells</p>
                </li>
                <li class="ui-li-static ui-body-inherit ui-li-has-thumb">
                    <img src="imgs/user.jpg">
                    <h3>Warning</h3>
                    <p>Hot Chip</p>
                </li>
                <li class="ui-li-static ui-body-inherit ui-li-has-thumb ui-last-child">
                    <img src="imgs/user.jpg">
                    <h3>Wolfgang Amadeus Phoenix</h3>
                    <p>Phoenix</p>
                </li>
            </ul>
        </div>
        <div data-role="footer" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="#" data-icon="comment" class="ui-btn-active" onclick="topage('weixin')">微信</a></li>
                    <li><a href="#" data-icon="bullets" onclick="topage('contacts')">通讯录</a></li>
                    <li><a href="#" data-icon="eye" onclick="topage('faxian')">发现</a></li>
                    <li><a href="#" data-icon="user" onclick="topage('wo')">我</a></li>
                </ul>
            </div>
        </div>
    </div>