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加载器。

我缺少什么＆amp; /或做错了？

完整解决方案

下面的奥马尔解决方案大部分都是如此，但需要一个小而重要的补充，以使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");
});

将外部面板加载到Jquery Mobile Page

1 个答案: