Jquery Mobile 小结

第一次做一个移动站点，当时纠结选Jquery Mobile还是Zepto，Zepto相对于JM更加轻巧，语法上面也很相似，但考虑到时间问题和JM自带了很多组件（Bootstrap惯出来的），还是选择了JM。JM主要通过data-role来定义页面控件，比如定义一个page，<div data-role="page"></div> 以及data-xx属性来对控件进行修饰。比如定义一个mini的button：<a data-role='button' data-mini='true' >Button</a> ，而不是全部用的样式。官网文档有详细的使用说明，我下面只介绍下我常用的控件和遇到的一些问题。

一、基本布局

先引用：

    <link href="/Mobile/js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet" />
    <script src="/Mobile/js/jquery.mobile-1.4.5/jquery.min.js"></script>
    <script src="/Mobile/js/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

1.page: 每个页面同时只会显示一个page元素。可以通过a标签来进行切换显示。一个比较完整的page还包括Header、Footer和导航条。中间部分是content。我的基本的page是这样的：

<body>
    <section data-role="page"  id="page" >
        <uc1:Header ID="header" runat="server" />
        <div data-role="content">
            <nav:Nav ID="header1" runat="server" />
            <div data-role="collapsibleset">
                   <asp:Repeater ID="rptCategories" runat="server">
                                                <ItemTemplate>
                                                    <div data-role="collapsible" data-iconpos="right" data-collapsed="false">
                                                     <h4><%#Eval("Title")%></h4>
                                                         <article>
                                                              <%#Eval("Conten")%>
                                                         </article>
                                                    </div>
                                                </ItemTemplate>
                                            </asp:Repeater>
            </div>
        </div>
        <uc2:footer ID="footer1" runat="server" />
    </section>
</body>

Header和Footer做成用户控件，用Repeater显示内容。

Header：

<div id="header"  >
    <div class="logo">
        <a href="/Mobile/Index.aspx"  data-ajax="false"   class="ui-link">
            <img src="/Mobile/Images/logo.png" alt="" width="175" height="35" /></a>
    </div>
    <div class="tel">
        <a href="tel:4000-999-001" class="ui-link  ">Tel:4000-999-001</a>
    </div>
</div>
<header data-role="header" class="ui-bar-g" id="mainheader">
    <div id="usernav" data-role="controlgroup" data-type="horizontal">
        <a href="#" class="ui-btn ui-corner-all">北京</a>
        <%=IsLoginHtml %>      
    </div>
</header>

View Code