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();
});

jQuery Mobile多个外部面板

1 个答案: