Javascript 将外部面板加载到Jquery移动页面

使用侧面板的JQuery移动模板。为了简单起见，我希望能够从“外部页面”或单独的文档加载此面板，以便它可以构建一次并在多个页面上使用

经过一点研究，我得到了以下代码，将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();
});

因此，理论上，把这两个因素加在一起应该会得到我想要的结果

/* 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（）

，以便以所需的样式呈现元素。

应将

$.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");
});

---

是否有其他人回答关于JQM的问题，或者您是否拥有专有权？？；-）@PhillHealey哈哈..我和SO有独家合同；）@PhillHealey我已经更新了我的答案。我已经修复了dismissible panel的错误。您需要附加/前置，然后增强/初始化

.panel（）

。您还需要在外部面板内的每个小部件上设置数据主题。另外，一旦启动，还需要JQM根据数据主题来增强小部件。我用额外的细节更新了我的OP，以供其他人参考。@phillhealey true，不过，向面板添加主题就足够了，因为面板中的元素将从面板本身继承样式：）

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