問題排查：行動裝置網頁前端 UI 設計 (1)

這是最近開始接手的一個微信公眾平台專案，

在重整後端程式碼時，因為也需要透過前端來看效果，

所以就因此在前端的部分遇到了不少問題，

畢竟這是以前沒接觸過的領域 (早年的網頁應用程式開發沒有那麼多分工)

經初步探索，得知此案似乎採用了 jqMobi 做框架 (Intel App Framework 的前身)

大致上看一遍官網的簡介之後，就下載了最新版本 3.0 來玩玩看

然後就拿了一個有資料分頁的來嘗試

這不玩還好，一玩就捅了好幾個馬蜂窩等著我去收拾

頁面結構如下：

<div class="view" id="mainview">

    <!--顶部导览-->

    <header>

        <a id="isback" onclick="history.back(-1);" class="backButton">返回</a>

        <h1>單元標題</h1>

        <a href="#nb" class="menuButton"></a>

    </header>

    <!--顶部导览-->

    <div class="pages">

        <!--信息列表-->

        <div id="mHistory" class="panel">

            <asp:Repeater ID="rptList" runat="server">

                <HeaderTemplate>

                    <ul class="list inset">

                </HeaderTemplate>

                <ItemTemplate>

                    <li style="padding:5px 10px 5px 10px">

                        <h2 style="line-height:30px">欄位一：<font color="#ff0000"><%#Eval("c1") %></font>&nbsp;欄位二：<font color="#ff0000"><%#Eval("c2") %></font></h2>

                        <div class="note">

                            <p>欄位三：<font color="#ff0000"><%#Eval("c3") %>&nbsp;度量單位</font>

                                欄位四：<font color="#ff0000"><%#Eval("c4") %>&nbsp;度量單位</font>

                                欄位五：<font color="#ff0000"><%#Eval("c5") %>&nbsp;度量單位</font></p>

                            <p>欄位六：<font color="#ff0000"><%#Eval("c6") %>&nbsp;度量單位</font>

                                欄位七：<font color="#ff0000"><%#Eval("c7","{0:d}") %></font>欄位八：<font color="#ff0000"><%#Eval("c8") %>&nbsp;度量單位</font></p>

                            <p><i class="date">欄位九：<font color="#ff0000"><%=DeadlineMessage %></font></i></p>

                        </div>

                    </li>

                </ItemTemplate>

                <FooterTemplate>

                    </ul>

                </FooterTemplate>

            </asp:Repeater>

        </div>

        <!--信息列表-->

    </div>

    <!--分页-->

    <div class="pages">

        <div id="pageNavBar" class="panel">

            <div>

                <span>本次查询共有&nbsp;<font color="#ff0000"><%=TotalCount %></font>&nbsp;笔资料，分页耗时&nbsp;<font color="#ff0000"><%=Millisecond %></font>&nbsp;毫秒</span>

            </div>

            <div class="button-grouped" style="width:100%;">

                <a class="button icon paper" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PageFirst %>">首页</a>

                <a class="button icon left" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PagePrev %>">上页</a>

                <a class="button icon right" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PageNext %>">下页</a>

                <a class="button icon paper" href="Maintain_History.aspx?openid=<%=Request("openid") %>&PI=<%=PageLast %>">末页</a>

            </div>

            <div>

                <span>目前在第&nbsp;<font color="#ff0000"><%=PageIndex %>/<%=PageCount %></font>&nbsp;页，每页显示&nbsp;<font color="#ff0000"><asp:Label ID="lbPageSize" runat="server" Text="" /></font>&nbsp;笔资料</span>

            </div>

        </div>

    </div>

    <!--分页-->

    <!--底部导航-->

    <footer>

        <a href="/User/Index.aspx?openid=<%=Request("openid") %>" class="icon home" data-ignore="true">返回主页</a>

    </footer>

    <!--底部导航-->

    <!-- 左側選單 -->

    <ucLeftSlide:LeftSlide ID="ls1" runat="server" />

    <!-- 左側選單 -->

</div>

目前待解的問題如下：

1、整個分頁導覽工具都無法顯示

2、不知如何調整第二個 pages 區塊的高度

3、若將分頁工具的 pages、panel 階層定義移除，使其單獨與第一個 pages 和 header、footer 同階層，那麼整個分頁工具區塊就能正常顯示，但點擊換頁之後，分頁工具區塊內應該要變動的部分 (例如：當前頁、分頁耗時)，都沒有改變。

4、首次打開頁面時，列表區能正常顯示資料，但點擊換頁之後，列表區就換成一個空白頁；若將換頁連結直接複製到瀏覽器上打開，則是列表區和分頁工具中的所有元素均能正常顯示。

2016/03/15 後記：

經過查找相關資料得知，這種情況通常是頁面切換方式的問題，關鍵之處在於超連結裡的一個屬性：data-ignore="true"。此屬性的作用是讓 App Framework 不對點擊超連結做特別處理。