2013-03-31 77 views
1

之間導航jQuery Mobile下面的代碼將執行以下操作...jQuery Mobile的:如何使用動態生成的頁面

1)它產生的菜單項,並將它們添加到索引頁面。

2)它創建菜單項的實際頁面。

現在,當我點擊一個菜單項時,它似乎沒有移動到該頁面?我可以在標記中看到頁面存在正確的ID。

這是我到目前爲止。

$.each(siteData["pages"], function(i,v) { 
    $.mobile.activePage.find('[data-role=content]').append('' + 
     '<a href='+ v["id"] + ' data-role="button">' + v["name"] + '</a>').trigger('create'); 

     // Prepare your page structure 
     var newPage = $("<div data-role='page' id=>" + v["id"] + 
      "<div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" + 
         "<h1>Dynamic Page</h1>" + 
         "</div>" + 
         "<div data-role=content>Stuff here</div>" + 
         "</div>"); 

       // Append the new page info pageContainer 
       newPage.appendTo($.mobile.pageContainer); 



      }); 

標記

<div data-role="page" id="index"> 
    <div data-theme="a" data-role="header"> 
     <h3></h3> 
    </div> 
    <div data-role="content" class="navlist"></div>  
</div> 

我如何動態生成的頁面之間進行導航?

有人可以給我一個例子使用我的代碼。謝謝。

+0

大聲笑,我告訴過你了! – Omar

回答

2

不幸的是,你幾乎沒有錯誤。

看看我的工作實例,它是做出來的代碼:http://jsfiddle.net/Gajotres/3kPTf/

$(document).on('pagebeforeshow', '#index', function(){  
    $.mobile.activePage.find('[data-role=content]').append('<a href="#second" data-role="button">Second</a>').trigger('create'); 

    var newPage = $("<div data-role='page' id='second'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' data-rel='back'>Back</a>" + 
         "<h1>Dynamic Page</h1>" + 
         "</div>" + 
         "<div data-role=content>Stuff here</div>" + 
         "</div>"); 

    // Append the new page info pageContainer 
    newPage.appendTo($.mobile.pageContainer);  

}); 
  • 第一個錯誤,關閉一個標籤按鈕裏面,給它一個#標籤。
  • 你的動態頁面div沒有正確關閉
+1

謝謝你做到了! – MarkO