碼上歡樂
相關內容    簡體    繁體

Jquery Mobile 小結

本文轉載自   查看原文   2015-05-15 06:31   4553    Jquery

       第一次做一個移動站點，當時糾結選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

Footer:

<footer data-role="footer" id="userfooter" class="ui-bar-g" >
    <div data-role="controlgroup" data-type="horizontal">
         <%=IsLoginHtml %>
    </div>
    <%-- <a href="#page" data-icon="arrow-u" style="float: right" data-ajax="false" >Top</a>--%>
</footer>
<div id="header" class="">
    <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>
    <%--<a href="#" class="ui-btn ui-icon-phone ui-btn-icon-notext fr" ></a>--%>
</div>
<div class="text-center">
    <p>Copyright © 2014-2018 bjleju.com All Rights Reserved &nbsp;&nbsp;<a data-ajax="false" href="../../index.aspx">電腦版</a></p>
</div>
View Code

   

 2.navbar，因為是移動端，JM限制data-grid一行最多五個button，太多了確實文字都顯示不全。data-grid="c" 對應4個元素，data-grid="d" 對應5個元素。

<div data-role="navbar" data-grid="c">
    <ul>
        <li><a href="/Mobile/Homemaking/Index.aspx" data-ajax="false" data-role="button">家政</a>
        </li>
        <li><a href="/Mobile/Clean/Index.aspx"  data-ajax="false" data-role="button">保潔</a></li>
        <li><a href="/Mobile/Train/Index.aspx"  data-ajax="false" data-role="button">培訓</a></li>
        <li><a href="/Mobile/Shop/Index.aspx"  data-ajax="false" data-role="button">商城</a></li>
    </ul>
</div>

a標簽可以不加data-role='button',默認data-ajax="true",這里要說明的是，data-ajax='true'的時候，頁面跳轉會出現加載動畫，但不會加載下一個頁面中的獨有樣式，腳本也可能會不執行。這個問題層讓我困擾了一陣，頁面跳轉之后要要刷新一下，有的樣式才加載上來，好奇怪，原來是data-ajax的問題，如果幾個頁面都公用一個樣式文件，這樣跳轉的時候就不必設置data-ajax屬性。

添加class="ui-btn-active"  可以高亮：

3.ListView。 列表項是一個用的比較多的控件，還涉及到分頁。分頁后台用的是AspNetPager

分頁：

    pager.FldName = "Id";
                pager.TblName = "Ydr_Leju_Houkee";
                pager.StrGetFields = "*";

                pager.PageSize = PSize;
                if (page < 1)
                {
                    pager.PageIndex = 1;
                }
                else
                {
                    pager.PageIndex = page;
                }
                pager.DoCount = 0;
                pager.OrderType = 1;
                pager.StrWhere = strWhere;
                int totalCount = pbll.GetCount(pager.TblName, strWhere);

                string NewNum = "20";
                string ChannelType = "t";
                DataTable dt = pbll.GetAllList(pager).Tables[0];
                string _returnStr = string.Empty;
                _returnStr = "{\"result\" :\"1\"," +
                    "\"returnval\" :\"操作成功\"," +
                    "\"newnum\" :" + NewNum + "," +
                    "\"returmodule\" :\"" + ChannelType + "\"," +
                    "\"pagebar\" :\"" + PageBar.GetPageBar(3, "js", 2, totalCount, PSize, page, "javascript:ajaxList(<#page#>);") + "\"," +
                    dtHelp.DT2JSON(dt, (PSize * (page - 1))) +
                    "}";
                dt.Clear();
                dt.Dispose();
                return _returnStr;
View Code

前端用了模板填充

   <ul id="ajaxList" data-role="listview" data-filter="true" data-inset="true">
                </ul>

                <div id="ajaxPageBar" class="pages">
                </div>
                           <textarea class="template" id="tplList" style="display: none">
    {#foreach $T.table as record}
     <li class="ui-li-has-thumb"><a href="/Mobile/Homemaking/Detail.aspx?id={$T.record.id}"  data-ajax="false"  class="ui-btn ui-btn-icon-right ui-icon-carat-r" >
          <img src="/Upload/Houkee-Upload/{$T.record.photo}"  alt="" />
           <h2>{$T.record.name}</h2>
           <p>{$T.record.currentaddr} {$T.record.age} 工作經驗：{$T.record.bhours}</p>
       </a>
       </li>

    {#/for}
</textarea>

                <script>
                        var pagesize = 6;
                    function ajaxList(currentpage) {
                        var age = "不限";
                        var bhours = "不限";
                        var stype = "不限";
                        var queryStr = "&age=" + age + "&bhours=" + bhours + "&stype=" + stype + "&page=" + currentpage + "&pagesize=" + pagesize;
                        $.ajax({
                            type: "get",
                            dataType: "json",
                            data: queryStr,
                            url: "ajax.aspx?oper=ajaxGetList",
                            error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },
                            success: function (d) {
                                switch (d.result) {
                                    case '-1':
                                        top.JumboTCMS.Alert(d.returnval, "0", "top.location.href='index.aspx';");
                                        break;
                                    case '0':
                                        top.JumboTCMS.Alert(d.returnval, "0");
                                        break;
                                    case '1':
                                        $("#ajaxList").setTemplateElement("tplList", null, { filter_data: true });
                                        $("#ajaxList").processTemplate(d);
                                        //ActiveCoolTable();
                                        $("#ajaxPageBar").html(d.pagebar);
                                        break;
                                }
                            }
                        });
                    }
                    ajaxList(0);
                </script>
View Code

data-filter="true" 會出現搜索框。讓用戶對內容進行檢索。

 

5.ui-grid 類似於bootstrap的柵格布局。但最多一行只會5個元素。

   <div class="ui-grid-b">
                    <div class="ui-block-a">
                        <a href="/Mobile/Homemaking/FindAunt.aspx" data-mini="true"  data-ajax="false"  data-icon="user" data-theme="g" data-role="button">找阿姨</a>
                    </div>
                    <div class="ui-block-b">
                        <a href="/Mobile/Homemaking/FindJob.aspx" data-mini="true"   data-ajax="false" data-icon="search" data-theme="g" data-role="button">找工作</a>
                    </div>
                    <div class="ui-block-c">
                        <a href="/Mobile/Join/Index.aspx" data-mini="true"   data-ajax="false" data-icon="plus" data-theme="g" data-role="button">加盟</a>
                    </div>
                </div>

  data-icon 指示圖標，默認位置是在文字左邊。全部的icon  ，通過設置data-iconpos為right，left，top，bottom 來控制icon的位置。添加樣式ui-btn-icon-notext 可以只顯示圖標。

但如果Grid是多行就按順序寫ui-block-a ---ui-block-d

    <div class="ui-grid-a">
                    <div class="ui-block-a">
                        <div class="exquisitebox">
                            <div class="einfo">
                                <div>沙發</div>
                                <p>高端典雅</p>
                            </div>
                            <div class="eimg">
                                <a   data-ajax="false" href="/Mobile/Shop/Products.aspx">
                                    <img src="/Mobile/Images/shafa.png" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="exquisitebox">
                            <div class="einfo">
                                <div>床</div>
                                <p>舒適精選</p>
                            </div>
                            <div class="eimg">
                                <a  data-ajax="false"  href="/Mobile/Shop/Products.aspx">
                                    <img src="/Mobile/Images/bad.png" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui-block-a">
                        <div class="exquisitebox">
                            <div class="einfo">
                                <div>衣櫃</div>
                                <p>珍藏美麗</p>
                            </div>
                            <div class="eimg">
                                <a   data-ajax="false" href="/Mobile/Shop/Products.aspx">
                                    <img src="/Mobile/Images/yigui.png" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="exquisitebox">
                            <div class="einfo">
                                <div>餐桌</div>
                                <p>舒適空間</p>
                            </div>
                            <div class="eimg">
                                <a   data-ajax="false" href="/Mobile/Shop/Products.aspx">
                                    <img src="/Mobile/Images/canzhuo.png" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui-block-a">
                        <div class="exquisitebox">
                            <div class="einfo">
                                <div>茶幾</div>
                                <p>精品上市</p>
                            </div>
                            <div class="eimg">
                                <a   data-ajax="false" href="/Mobile/Shop/Products.aspx">
                                    <img src="/Mobile/Images/chaji.png" /></a>
                            </div>
                        </div>
                    </div>
                    <div class="ui-block-b">
                        <div class="exquisitebox">
                            <div class="einfo">
                                <div>書櫃</div>
                                <p>蘊藏瀚海</p>
                            </div>
                            <div class="eimg">
                                <a   data-ajax="false" href="/Mobile/Shop/Products.aspx">
                                    <img src="/Mobile/Images/shugui.png" /></a>
                            </div>
                        </div>
                    </div>
                </div>
View Code

6.collapsibleset 可折疊框是一個collapsibleset包含多個collapsible

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

7.panel，panel主要是做側邊欄。

<div data-role="page">
        <header data-role="header">
            <h1>樂居商城</h1>
            <a href="#left-panel" data-icon="bars" data-iconpos="notext" data-shadow="false" data-iconshadow="false">Menu</a>
            <a href="#right-panel" data-icon="gear" data-iconpos="notext">Add</a>
        </header>
        <!-- /header -->
        <div role="main" class="ui-content">

             
                        
        <!-- /content -->
        <div data-role="panel" id="left-panel" data-position="left" data-position-fixed="true" data-display="overlay">
            <ul data-role="listview">
                <li data-icon="delete"><a href="#" data-rel="close">關閉</a></li>
                <li data-icon="back"><a href="/Mobile/Index.aspx" data-rel="back">首頁</a></li>
                <li data-role="list-divider">卧室</li>
                <li><a>床</a></li>
                <li><a>床墊</a></li>
                <li><a>衣櫃</a></li>
                <li data-role="list-divider">客廳</li>
                <li><a>沙發</a></li>
                <li><a>茶幾</a></li>
                <li><a>電視櫃</a></li>
                <li data-role="list-divider">更多</li>
                <li data-role="collapsible" data-inset="false" data-iconpos="right">
                    <h3>餐廳</h3>
                    <ul data-role="listview">
                        <li><a>餐桌</a></li>
                        <li><a>餐椅</a></li>
                        <li><a>電視櫃</a></li>
                    </ul>
                </li>
                <li data-role="collapsible" data-inset="false" data-iconpos="right">
                    <h3>辦公家具</h3>
                    <ul data-role="listview">
                        <li><a>辦公桌</a></li>
                        <li><a>辦公櫃</a></li>
                        <li><a>辦公椅</a></li>
                    </ul>
                </li>
                <!-- /collapsible -->
            </ul>
        </div>
        <!-- /panel -->
        <div data-role="panel" data-position="right" data-position-fixed="true" data-display="overlay" data-theme="a" id="right-panel">
            <form class="userform" id="login_form" >
                <h2>用戶登錄</h2>
                <label for="name">用戶名:</label>
                <input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true" />
                <label for="password">密碼:</label>
                <input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true" />
                <div class="ui-grid-a">
                    <div class="ui-block-a"><a href="#"   id="logbt" class="ui-btn ui-shadow ui-corner-all ui-btn-b ui-mini">登錄</a></div>
                </div>
            </form>
            <ul data-role="listview" id="catlist">
                <li data-icon="delete"><a href="#" data-rel="close">關閉</a></li>
                <li id="dname" data-role="list-divider"><%=CurrentUserName() %></li>
                <li><a data-ajax="false" href="../Account/Orders.aspx">我的訂單</a></li>
                <li><a  data-ajax="false" href="../Account/Comments.aspx">我的評價</a></li>
                <li><a data-ajax="false"  href="../Account/Comments.aspx">我的收藏</a></li>
                <li><a  data-ajax="false" href="../Account/Orders.aspx">我的訂單</a></li>
                <!-- /collapsible -->
            </ul>
             
    </div>
        </div>
        <!-- /panel -->
        <uc2:footer ID="footer" runat="server" />
    </div>
View Code

有overlay，reveal，push三種過渡動畫選擇。

   

8.popup 這個主要用來做提示框：

  <div data-role="popup" id="info" ></div>
$("#info").popup("open");
//... 
$("#info").popup("close");

   <div data-role="popup" id="checkpop" data-theme="a" data-overlay-theme="b" class="ui-content" style="max-width: 340px; padding-bottom: 2em;">
                <h3>確定刪除</h3>
                <p>你確定要移除<span id="targetname"></span>？</p>
                <a href="#" id="delete" data-rel="back" class="ui-shadow ui-btn ui-corner-all  ui-icon-check ui-btn-icon-left ui-btn-inline ui-mini">確定</a>
                <a href="#" data-rel="back" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">取消</a>
            </div>

 

二、自定義主題。

JM自帶了兩種主題，  推薦大家一個設置JM theme的網站 http://themeroller.jquerymobile.com，可以先導入樣式文件再添加新的樣式。

另外也可以只配置某些控件的樣式，比較默認樣式下很多都可以復用的。我這里就自定義了bar和button 的樣式 g。

 .ui-bar-g {
border: 1px solid #fff /*{a-bar-border}*/;
background-color: #E0177F /*{a-bar-background-color}*/;
color: #fff /*{a-bar-color}*/;
font-weight: normal;
     line-height: 22px;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f83b9c /*{a-bar-background-start}*/), to( #E0177F /*{a-bar-background-end}*/));
background-image: -webkit-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -moz-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -ms-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -o-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
}
 .ui-bar-g h1{ color: white;font-size: larger!important}
.ui-body-g,.ui-btn,input, .ui-body-g input, .ui-body-g select, .ui-body-g textarea, .ui-body-g button, .ui-bar-g, .ui-bar-g input, .ui-bar-g select, .ui-bar-g textarea, .ui-bar-g button {
font-family:Microsoft JhengHei, "宋體",Helvetica, Arial, sans-serif /*{global-font-family}*/;
}
.ui-btn-g {
    background-color: #E0177F /*{a-bar-background-color}*/;
    font-weight: normal;color: white !important;text-shadow: none !important;
    background-image: -webkit-gradient(linear, left top, left bottom, from( #f83b9c /*{a-bar-background-start}*/), to( #E0177F /*{a-bar-background-end}*/));
background-image: -webkit-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -moz-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -ms-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: -o-linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
background-image: linear-gradient( #f83b9c /*{a-bar-background-start}*/, #E0177F /*{a-bar-background-end}*/);
}
.ui-btn-g:hover {
background-image: linear-gradient( #f83b9c /*{a-bar-background-start}*/, #cd1273 /*{a-bar-background-end}*/);

}

使用時，設置data-theme='g' 即可。

 <input type="button" data-theme="g"   data-icon="heart"  id="attention" value="關注此人" />

三、Slider

 適合移動端的slider，我使用的是swipeSlide.

 

   <div class="slide" id="WSCSlideWrapper">
                <ul>
                    <li>
                        <a href="#">
                            <img src="/Mobile/Images/s1.jpg" alt="" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="/Mobile/Images/s2.jpg" alt="" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="/Mobile/Images/s3.jpg" alt="" />
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          <img src="/Upload/Slideshow_Upload/3.jpg" />
                        </a>
                    </li>
                </ul>
                <div class="dot">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
View Code 
    $(document).ready(function () {
            $('#WSCSlideWrapper').swipeSlide({
                continuousScroll: true,
                speed: 4000,
                transitionType: 'cubic-bezier(0.22, 0.69, 0.72, 0.88)',
                callback: function (i) {
                    $('.dot').children().eq(i).addClass('cur').siblings().removeClass('cur');
                }
            });
        });

 

小結：第一次做移動端項目，JM的這些組件確實節省了不少開發時間，另外就是不用去考慮ie的那些問題了；有些做法還是pc端的思路，繼續優化；后面再嘗試下別的框架；最后希望本文對你有幫助，另有不當之處歡迎指正。

 移動解決方案大集合：https://github.com/stoneniqiu/mobileSolutions      


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 jQuery Mobile 筆記（1）- jQuery Mobile頁面結構 jquery mobile 事件 方法 jQuery Mobile + HTML5 JQuery Mobile 實戰一 JQuery Mobile + Cordova 實戰一 jquery mobile 方法收集. jquery mobile 學習 jQuery Mobile 頁面事件 jquery mobile小案例 jQuery mobile的優缺點
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM