jQuery Mobile多个外部面板

Question

我试图在jquery Mobile中设置两个独立的外部面板，如下所示。一个是显示完整的菜单，另一个是显示社交媒体网站的链接。如果我在。js中只有一个或另一个，那一个面板工作得很好，但如果我在。js中都有它们，只有面板列出了最后的加载。除了不同的id，我还需要指定别的东西。

可以有两个外部面板吗?非常感谢您的任何指导!!:)

var panel = '<div data-role="panel" id="fullmenu" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">Home</a></li><li><a href="bio.html" data-transition="slide">About</a></li><li><a href="news.html" data-transition="slide">News</a></li></ul></div>';
$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend(panel);
  $("#fullmenu").panel().enhanceWithin();
});

var panel = '<div data-role="panel" id="social" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="https://www.facebook.com" data-transition="slide"><img src="images/icon-facebook.png" alt="Facebook" class="ui-li-icon ui-corner-none">Facebook</a></li><li><a href="https://twitter.com" data-transition="slide"><img src="images/icon-twitter.png" alt="Twitter" class="ui-li-icon ui-corner-none">Twitter</a></li></ul></div>';
$(document).one('pagebeforecreate', function () {
  $.mobile.pageContainer.prepend(panel);
  $("#social").panel().enhanceWithin();
});

Answer 1

这段代码为我工作

 $(document).on("pagecreate", ".demo-page", function() {
var panell = '<div data-role="panel" id="left-panel" data-position="left" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">Home</a></li><li><a href="bio.html" data-transition="slide">About</a></li><li><a href="news.html" data-transition="slide">News</a></li></ul></div>';
  $.mobile.pageContainer.prepend(panell);
  $("#left-panel").panel().enhanceWithin();
  var panelr = '<div data-role="panel" id="right-panel" data-position="right" data-display="reveal" data-theme="a"><ul data-role="listview" data-inset="true"><li><a href="index.html" data-transition="slide">Home</a></li><li><a href="bio.html" data-transition="slide">About</a></li><li><a href="news.html" data-transition="slide">News</a></li></ul></div>';
  $.mobile.pageContainer.prepend(panelr);
  $("#right-panel").panel().enhanceWithin();
});