以下列出幾種動態載入 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...
沒有留言:
張貼留言