jQuery Mobile多个外部面板 [英] jQuery Mobile multiple external panels

问题描述

我正在尝试在jquery Mobile中设置两个单独的外部面板，如下所示.一种是显示完整菜单，另一种是显示社交媒体网站的链接.如果我在.js中只有一个或另一个，则该面板可以正常工作，但是如果我在.js中都有它们，则只有最后列出的面板可以加载.我在想我需要指定除其他ID之外的其他内容.

I'm trying to setup two separate external panels in jquery Mobile as follows. One is to display a full menu, the other to display links to social media sites. If I have just one or the other in the .js, that one panel works fine, but if I have them both in the .js, only the panel listed last loads. I'm thinking I need to specify something else besides just different ids.

是否可以有两个外部面板?非常感谢您的指导！！ :)

Is it possible to have two external panels? Thank you so much for any direction!! :)

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

推荐答案

此代码对我有用

 $(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多个外部面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！