2013/06/20

jQuery Mobile: Page 動態載入與切換

jQuery Mobile Page 是在 implement mobile app 很常用到的元件,它可以模擬 iOS navigation controller + view controller 的操作界面,不用寫太多程式碼就可以達到這樣的 UI 呈現,但真正在使用時,常常會遇到動態載入 page 或是同一個 page 要呈現不同 content 的時候,對於我這個初學者而言,也還在摸索怎麼管理這些page。

以下列出幾種動態載入 page 的方式:

Static page

提供兩種切換頁面的方式
In html file
<div data-role="page" id="page1">      
    <div data-role="header">         
        <h1>Page 1</h1>     
    </div>
    <div data-role="content">
        <a href="#page2">Change Page</a>
        <a href="#" onclick="$.mobile.changePage('#page2');">Change Page</a>
    </div>
    <div data-role="footer"> 
        <h4>Page Footer</h4>             
    </div> 
</div>    

<div data-role="page" id="page2">         
    <div data-role="header">    
       <h1>Page 2</h1>     
    </div>
    <div data-role="content">  
        <p>In page 2</p>
    </div>
    <div data-role="footer">   
        <h4>Page Footer</h4>      
    </div>
</div>


Load from html file

先放一個空的 page,再用 ChangePage() 的方式 load 下一個 page,把 page 分開在不同的檔案,code 比較清楚
In html file
<div data-role="page" id="page1">
</div>

In js file
$(function(){ 
    $.mobile.changePage("tpl/page2.html", {
        transition: "pop",
        reverse: false,
        changeHash: false
    });
});


Load html file as template

用 ajax 的方式去 load html 並當成 template,套用 data 後變成 page
index.html
<div data-role="page" id="page2">
 <div data-role="header">
  <h1><%= title %></h1>
 </div>

 <div data-role="content">
  <p><%= content %></a>
 </div>

 <div data-role="footer">
  <h4>Page Footer</h4>
 </div>
</div>

In js file
需要搭配 underscore.js 的 template
$(function(){
    $.get('tpl/page2.html', function(data) {
        var tpl = _.template(data);
        var m = {title: "This is title", content: "In the page 2"};
        var newPage = $(tpl(m));
        newPage.appendTo($.mobile.pageContainer);
        $.mobile.changePage(newPage);
    });
});

但上述的方法有個問題,就是 page 一直用 append 的方式加到 html 裡,對記憶體是個消耗,尚在思考要怎麼管理這些 page...

2013/06/16

jQuery Mobile + PhoneGap 快速打造 App

再次回到 mobile app 的世界。

最近接了一個 case,要做一個跨平台的 news feed,想到的組合就是 jQuery Mobile + PhoneGap,為了讓 code 更乾淨,也加入了 backbone.js 這個 MV* framework,說真的,這樣的組合我還沒開發過任何一支產品,本身是 back-end 起家,frontend 算是玩興趣的,兜一些小玩意還可以,開發大 project 就辛苦些...


用 jQuery mobile 兜 UI 比 native code 快了 n 倍,常用的 page view、table view、navigation bar...都可以在簡單的幾行 html 搞定。呈現 static 資料很容易,如果是 dynamic 資料對我這新手就...
分析需求之後,大概就幾個版型:category list、title list、content display,然後塞進不同的資料(來源可以是 api server 吐回來的 json)


Main menu 打算用 slide panel 來呈現,panel 這物件是要擺在 page 裡面的,那如果每個 page 都需要 panel 該怎做?
javascript - jquery mobile: do I have to create a new panel for every page - Stack Overflow
一份 menu 共用摟,我想到的是把 panel 獨立成一個 template,在 pageshow event 去加載
看到一些蠻炫的 panel


jQM 的 page sample 中,同個 html 嵌了多個 page,這在現實環境也是不合需求的。第一、全部的 page 放在同一頁肯定 code 會過長,第二、page 的內容會是 dynamic 的,page 本身應該只是個樣版
官網有提到動態載入 page 的方式:jQuery Mobile and Dynamic Page Generation
很明顯的沒有 router 與 template 的支援,code 相當冗長,於是就引入了 backbone.js 的 route 與 underscore.js 的 template

由於 jQM 與 backbone.js 都會監聽 hash change event,若要使用後者的 router,請參考


如果閒自己寫 html 太慢,可以使用 jQM UI builder