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

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

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

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

經初步探索,得知此案似乎採用了 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=" /></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 不對點擊超連結做特別處理。

問題排查:行動裝置網頁前端 UI 設計 (1)的更多相关文章

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

    之前上網找了個星級評分的範例來玩, 當然這個範例已經用在另一個專案了, 目前看起來沒什麼狀況, 不過在移植到目前的專案之後, 就出現了怪現象: 1. 在大部份時間裡,點擊星星不會有任何反應 2. 即便 ...

  2. 問題排查:DataGridView 資料行下拉選單,資料繫結階段顯示 DataGridViewComboBoxCell 值無效

    可能原因: 1.下拉選單的選項資料繫結晚於 DataGridView 的資料繫結 2.下拉選單的 DataPropertyName 屬性,比 DisplayMember.ValueMember 早賦值 ...

  3. 問題排查:在 ServiceModel 客戶端配置部份中,找不到名稱 和協定 的終結點元素。

    同樣都是刪掉服務參考再重建重編譯重發行,為什麼之前幾次都沒事? 這次只不過是刪掉服務參考,然後換了個名稱重建而已,做完就變這樣? 後來發現問題出在 app.config,因為之前 app.config ...

  4. 問題排查:F5啟動偵錯後所提示的錯誤 (2)

    原始專案版本:Visual Studio 2005 開發環境:Visual Studio 2013 偵錯運行環境:IIS Express 啟動偵錯後,錯誤提示內容如下: HTTP 错误 403.14 ...

  5. 問題排查:F5啟動偵錯後所提示的錯誤 (1)

    原始專案版本:Visual Studio 2005 開發環境:Visual Studio 2013 偵錯運行環境:IIS Express 啟動偵錯後,錯誤提示內容如下: HTTP 错误 500.23 ...

  6. 問題排查:System.BadImageFormatException: 未能加载文件或程序集“System.ServiceModel

    錯誤訊息如下: System.BadImageFormatException: 未能加载文件或程序集“System.ServiceModel, Version=3.0.0.0, Culture=neu ...

  7. 問題排查:类型“System.DateTime”的对象无法转换为类型“System.String”

    最近在擴充資料對接工具的功能 經常會遇到這個狀況 當然還有其他同類提示,例如 int/decimal 無法轉 System.String 等等 無獨有偶 這些錯誤幾乎都是在 DataTable 轉換成 ...

  8. 問題排查:沒有任何多載符合 System.Timers.ElapsedEventHandler 委派

    這是在實作當前專案最後一個關鍵功能:提醒通知 所遇到的奇怪狀況 目前的設想,是以 Windows Form 結合 Timer,當作發送通知的載體 大家都知道在 C# 的環境裡,有三種內建的 Timer ...

  9. 問題排查:.NETSystem.Runtime.Remoting.RemotingException: TCP 信道协议冲突: 应为报头。

    這個錯誤訊息是在一個 Web Serveice 的偵錯階段發生的 目前還未找到原因,環境如下: 作業系統:Windows 10 x64 企業版 (簡中) 開發工具:Visual Studio 2013 ...

随机推荐

  1. AtomicBoolean使用

    使用 AtomicBoolean 高效并发处理 "只初始化一次" 的功能要求: 1 private static AtomicBoolean initialized = new A ...

  2. Python购物车程序

    1.要求用户输入工资,然后打印购物菜单 2.用户可以不断的购买商品,直到钱不够为止 3.退出时格式化打印用户已购买的商品和剩余金额 salary = int(input("请输入你的工资:& ...

  3. Rails 5 开发进阶

    Rails 5 开发进阶:https://www.gitbook.com/book/kelby/rails-beginner-s-guide/details   cancan : http://blo ...

  4. ASP.NET MVC学前篇之请求流程

    ASP.NET MVC学前篇之请求流程 请求流程描述 对于请求的流程,文章的重点是讲HttpApplication和HttpModule之间的关系,以及一个简单的示例实现.(HttpModule又是M ...

  5. IIS Express 虚拟目录

    1.打开C:\Users\<用户名>\Documents\IISExpress\config\applicationhost.config 2.编辑site节如下(行4) [html] v ...

  6. IOS- 自定义 UIButton

    #pragma mark init方法内部默认会调用initWithFrame: - (id)initWithFrame:(CGRect)frame { self = [super initWithF ...

  7. [Solution] Microsoft Windows 服务(2) 使用Topshelf创建Windows服务

    除了通过.net提供的windows服务模板外,Topshelf是创建Windows服务的另一种方法. 官网教程:http://docs.topshelf-project.com/en/latest/ ...

  8. [iOS翻译]《iOS7 by Tutorials》系列:iOS7的设计精髓(上)

    简介: 本文翻译自<iOS7 by Tutorials>一书的第一章“Designing for iOS 7”,主要从程序员角度介绍了iOS7的新设计理念,堪称神作!本文翻译仅作学习交流之 ...

  9. poj1679 次小生成树

    prim方法:先求过一遍prim,同时标记使用过得边.然后同时记录任意2点间的最大值. 每次加入一条新的边,会产生环,删去环中的最大值即可. #include<stdio.h> #incl ...

  10. 七天学会NodeJS (原生NodeJS 学习资料 来自淘宝技术团队)

    NodeJS基础 什么是NodeJS JS是脚本语言,脚本语言都需要一个解析器才能运行.对于写在HTML页面里的JS,浏览器充当了解析器的角色.而对于需要独立运行的JS,NodeJS就是一个解析器. ...