Question

我正在尝试创建一个多页面应用程序并使用JQuery mobile，我有几个使用jQuery mobile的Panel：

<div data-role="panel" id="left-panel" data-theme="b" data-display="overlay"></div>
<div data-role="panel" id="right-panel" data-display="overlay" data-position="right" data-theme="b"></div>

但是，将这些面板添加到我创建的每个页面都很麻烦。所以我需要帮助在我即将创建的所有页面中使用这些面板。提前谢谢！

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 个答案: