以下列出幾種動態載入 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 後變成 pageindex.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...
