将外部面板加载到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");
});