1、Create與及refresh： 創建事件和刷新方法有一個重要的區別需要注意 重要區別在一些widgets關系。 Create - 事件適合用於加強原始標記包含一個或多個widgets。 refresh - 方法應該使用現有的widgets（已增強）已編程操作和需要更新匹配的UI。 例如: 如果你有一個頁面， 在那裡你動態地追加一個新的無序列表與數據的 data-role=listview 屬性創建頁面後， 觸發父元素上創建，列表將它改造成一個ListView風格的小部件。 如果多個列表項，然後以編程方式添加， 調用ListView的刷新方法將更新這些新的列表項的強化狀態， 並保留現有的列表項目不變。 2、範例： 2.1 流程： 2.1.1、主頁面loginMember.html ，進入會有二個選項，為Test create 及Test refresh。 2.1.2、選擇Test create ，是將div id為#divData，載入createpage.html #data。 主要是測試，將更新大量的元件。 2.1.3、選擇Test refresh，是將div id為#divData，載入refreshpage.html #data。 主要是測試，將更新大量的元件後，在於其中更新部分元件。 如果將移除 $('#divData').trigger('create'); $('#divData').trigger('create').trigger('pagecreate'); 其你更新的大量元件將沒有jQuery ui的效果。 2.2 程式 主頁面： loginMember.html <!DOCTYPE html> <html> <head> <title>jQuery Mobile Menu Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta id="extViewportMeta" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> <script type="text/javascript"> $().ready(function(){ $("#createpage").live("click",function(){ $("#divData").empty(); $("#divData").load("createpage.html #data" , function() {$('#divData').trigger('create'); }); }); $("#refreshpage").live("click",function(){ $("#divData").empty(); $("#divData").load("refreshpage.html #data" , function() {$('#divData').trigger('create').trigger('pagecreate'); }); }); }); $('#listDemo').live('pagecreate', function() { $('#withoutRefresh').on("click", function() { $('ul').append('<li>list item</li>'); }); $('#withRefresh').on("click", function() { $('ul').append('<li>list item</li>'); $('ul').listview('refresh'); }); $('#clear').on("click", function() { $('ul').empty(); }); }); </script> </head> <body> <div id="listDemo" data-role="page"> <div data-role="header"> <h3><a href="#"id="createpage">Test create</a></h3> <h3><a href="#"id="refreshpage">Test refresh</a></h3> </div> <div data-role="content" id="divData" align="left"> </div> </div> </body> </html> 測試create 頁面： createpage.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="data"> <div data-role="main" align="center">請選擇</div> <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> </div> </div> <div><label for='account1'>帳號:</label><input type='text' /></div> </div> </body> </html> 測試refresh 頁面： refreshpage.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="data"> <input type="button" id="withoutRefresh" value="Add without refresh"/> <input type="button" id="withRefresh" value="Add with refresh"/> <ul data-role="listview" data-inset="true"></ul> <input type="button" id="clear" value="Clear List"/> </div> </body> </html> 3、畫面
4、參考 本文編輯的版本為jQuery.mobile-1.3 參考來源： jQuery mobile Scripting pages http://jquerymobile.com/demos/1.2.1/docs/pages/page-scripting.html Operation Mobile http://operationmobile.com/category/jquery-mobile/ jquery moblie download http://jquerymobile.com/download/
ZK (1)
