Question

假设我在JQM Panel中有一个相当复杂的菜单，我需要从应用程序的每个页面访问它。实现它的一种方法是将Panel代码复制并粘贴到每个子页面。

Approach 1 - The brutal way

这很有用。但是，它只适用于具有简单面板的小型应用程序。复制大量的Panel代码并应用于其他所有页面可能非常麻烦，并且在以后将更多页面加载到DOM时肯定会遇到性能问题。

所以我尝试用另一种方式 - 自己操纵Panel。我点击了pagecreate事件，并将Panel添加到已加载的页面中。通过这种方式，我可以保持我的DOM清洁，并始终处理一个Panel。

Approach 2 - The wishful way

但那没用。在强制完全将其从一个页面移动到另一个页面并调用pageContainer.trigger('refresh')或pageContainer.trigger('create')之后，专家组似乎未能重新启动自己。

所以我最终这样做了 - 将Panel html保存在js变量中，然后将面板html添加到加载的页面中，而不删除上一页面板。这似乎有效。

Approach 3 - The compromise way

虽然这种方法并没有真正关注DOM中只有一个Panel，但至少我不需要将它复制粘贴到每个页面中。

现在它有效，但我对此并不满意。我在这里发布这个问题，并希望有人可以解释为什么方法2不起作用，这真的会让我的一天。

**我的应用正在使用多页模板

干杯

Answer 1

我在面板中使用listview，每个页面都有一个唯一的id。使用onpagecreate事件，我使用javascript中的数据填充listview。

查看我的博客，了解工作示例http://teusink.blogspot.nl/2013/04/android-example-app-with-phonegap-and.html?m=1

Answer 2

我正在使用此代码

$(":jqmData(role='page')").bind("pagebeforeshow", function()  {  
       $.mobile.activePage.find('#panel_menu').load("share/menu.html",
           function(data) {
                $.mobile.activePage.trigger("pagecreate");  
           });
});

Answer 3

相当晚，但还有第三种方式

<div data-role="panel" id="mypanel">
    <!-- panel content goes here -->
</div>

<div data-role="page">
<!-- Blah blah blabh -->
</div>

然后使用javascript初始化它。 $（ “＃mypanel”）面板（）;

静态头中的jQuery Mobile Panel

3 个答案: