将外部面板加载到Jquery Mobile Page

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

一些研究导致我得到以下代码将一串html加载到变量中，然后将该变量作为侧面板加载到每个页面中：

/* Get the sidebar-panel as a var */ var side_var = '
Panel
stuff
'; /* 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"); });