jQuery Mobile Panel in static header

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

Approach 1 - The brutal way

这个工作。但是，它仅适用于使用简单面板的小型应用程序。复制大块面板代码并应用于其他所有页面可能会非常麻烦，并且在稍后将更多页面加载到DOM时会出现性能问题。

所以我试图以另一种方式做到 - 自己操纵面板。我点击pagecreate事件，并将面板放入加载的页面。这样我可以保持我的DOM清洁，并始终处理一个面板。

Approach 2 - The wishful way

但没有奏效。在我强制将它从一个页面完全移动到另一个页面并致电pageContainer.trigger('refresh')或pageContainer.trigger('create')后，它似乎没有重新启动自己。

所以我最终这样做了 - 将面板html保存为js变量，然后将面板html放入加载的页面中，而无需移除前一页面上的面板。这似乎工作。

Approach 3 - The compromise way

虽然这种方法并没有真正照顾在DOM只具有一个小组，至少我没有将它复制粘贴到每一个网页。

现在它可以工作，但我并不是那么满意。我在这里发布这个问题，希望有人可以解释为什么方法2没有工作，这将真正让我的一天。

**我的应用程序是使用多页模板

干杯

来源

2013-03-22 Kagawa

我使用这个代码

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

来源

2013-04-24 03:19:00

这工作得很好。谢谢！我遇到列表过滤器显示错误的问题。正在处理... – jasonflaherty 2013-08-15 23:17:25

刚发现你需要添加到CSS中：form.ui-listview-filter { margin：0; \t } – jasonflaherty 2013-08-15 23:21:11

我在面板使用一个ListView具有唯一ID的每一页。随着onpagecreate事件，我用javascript中的数据填充listview。

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

来源

2013-05-13 06:58:28

非常好的主题！我可能会使用它;） – 2013-07-16 14:22:25

较晚，但有第三条路

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

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

，然后使用JavaScript的初始化。 $（ “＃mypanel”）面板（）。

来源

2013-11-07 07:44:33

在面板中有更多的jQuery Mobile元素（例如Listview），您需要使用'enhanceWithin（）'方法链接'panel（）'方法来增强它们：'$（“ #mypanel“）。面板（）。enhanceWithin（）;' – 2014-08-18 08:05:33

jQuery Mobile Panel in static header

回答

相关问题