將外部面板加載到Jquery移動頁面

Question

利用側面板的JQuery Mobile模板。 為簡單起見，我希望能夠從“外部頁面” /單獨的文檔中加載此面板，以便可以一次構建該頁面並在許多頁面上使用。

經過一些研究，我得到了以下代碼，以將html字符串加載到變量中，然后將該變量加載到側面板的每個頁面中：

/* Get the sidebar-panel as a var */
var side_var = '<div data-role="panel" id="left-panel" data-position="left" data-display="push"><h1>Panel</h1><p>stuff</p></div>';

/* Load the side-panel var to the DOM / page */
$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend( side_var );
  $("#left-panel").panel();
});

這可以完美地工作，但是仍然不能滿足將邊欄/面板構建為單獨的html文件的需求。

要做更多的工作，我發現了以下代碼片段，可將頁面加載到變量中：

$.get("http://www.somepage.com", function( side_var ) {}, 'html');

因此，從理論上講，將兩者加在一起應能得到預期的結果。

/* Get the sidebar-panel as a var */
$.get("mypage.html", function( side_var ) {}, 'html');


/* Load the side-panel var to the DOM / page */
$(document).one('pagebeforecreate', function () {
   $.mobile.pageContainer.prepend( side_var );
   $("#left-panel").panel();
});

但是，運行此程序時，我得到的只是一個永久旋轉的AJAX加載器。

我想念什么和/或做錯了什么？

---

完整的解決方案

Omar的以下解決方案采用了大多數方法，但需要少量但重要的添加才能使JQM元素按預期顯示。 這是完整的解決方案：

$(document).one("pagebeforecreate", function () {
  $.get('side-panel.html', function(data) { 
    //$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
    $.mobile.pageContainer.prepend(data);
    $("[data-role=panel]").panel().enhanceWithin(); // initialize panel
  }, "html");
});

每個要增強為JQM元素的元素都需要添加數據主題，以告訴它使用哪個主題。 另外，在JavaScript中，初始化的面板小部件需要.enhanceWithin()才能以所需的樣式呈現元素。

Answer 1

$.get()函數應包裝在pagebeforecreate事件中，以在檢索到后直接附加內容。 另外，您需要初始化檢索到的內容。

$(document).one("pagebeforecreate", function () {
  $.get('mypage.html', function(data){ 
    $(data).prependTo("body"); // or .prependTo($.mobile.pageContainer);
    $("[data-role=panel]").panel(); // initialize panel
  }, "html");
});