3

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

方法 1 - 残酷的方式

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

所以我试着用另一种方式来做——自己操纵面板。我点击了该pagecreate事件并将面板添加到加载的页面中。这样我就可以保持我的 DOM 干净并且始终处理一个面板。

方法二——如意的方式

但这没有用。pageContainer.trigger('refresh')在我强制将其从一页完全移动到另一页并调用or后，面板似乎未能重新初始化pageContainer.trigger('create')。

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

方法 3 - 妥协的方式

虽然这种方法并不能真正解决 DOM 中只有一个 Panel 的问题，但至少我不必将它复制粘贴到每个页面中。

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

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

干杯

4

3 回答 3

4

我在面板中使用一个列表视图，每个页面都有一个唯一的 id。通过 onpagecreate 事件，我使用 javascript 中的数据填充列表视图。

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

于 2013-05-13T06:58:28.983 回答
3

我正在使用此代码 

$(":jqmData(role='page')").bind("pagebeforeshow", function()  {  
       $.mobile.activePage.find('#panel_menu').load("share/menu.html",
           function(data) {
                $.mobile.activePage.trigger("pagecreate");  
           });
});
于 2013-04-24T03:19:00.940 回答
1

相当晚了，但还有第三种方法

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

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

然后使用javascript对其进行初始化。$("#mypanel").panel();

于 2013-11-07T07:44:33.210 回答