在运行时添加 Jquery Mobile Panel

Question

我正在尝试在我的应用程序中使用 jquery 移动面板作为导航菜单，当您单击页面上的菜单按钮时会出现此菜单，从文档中，我知道我应该将此菜单面板添加到每个页面。

由于我的页面也是在运行时添加的，所以我需要在创建页面时将菜单面板注入到页面中，我使用的以下代码不起作用：

var $menuElement = $("#menu");
if ($activePage.find($menuElement).length <= 0) {
    console.log("Adding menu");
    $menuElement.show().css({height:$(".fb-menu").find("li").size() * 5 + "px"});
    $menuElement.prependTo($activePage);
    $activePage.trigger('create');
    $activePage.trigger('update');
}

任何人都知道我应该如何将我的菜单面板添加到动态添加的页面中？

Answer 1

看看我关于这个解决方案的其他答案：https://stackoverflow.com/a/15223926/1848600

这是您可以动态添加它的方式：

$(document).on('pagebeforeshow', '[data-role="page"]', function(){                
    $('<div>').attr({'id':'mypanel','data-role':'panel'}).appendTo($(this));
    $('<a>').attr({'id':'test-btn','data-role':'button'}).html('Click me').appendTo('mypanel');
    $.mobile.activePage.find('#mypanel').panel();
    $(document).on('click', '#open-panel', function(){   
         $.mobile.activePage.find('#mypanel').panel("open");       
    });    
});

现场示例：http://jsfiddle.net/Gajotres/pZzrk/