Question

我是jQuery mobile的新手，我正在使用jQuery mobile 1.4.3开发一个App。我的问题是我需要动态地向所有页面添加左侧面板，但我无法使其正常工作。

页面还需要在所有页面上都有一个左侧标题按钮，以访问面板菜单。

我失败的代码尝试：JSFIDDLE

一些示例代码：

$(document).on('pagecontainerbeforeshow', function (e, ui) {
    var activePage = $(ui.toPage),
        activePageId = activePage[0].id,
        myPanel = "",
        panelBtn = "";

    //does not work, but you get the ideia:
    myPanel = $('<div data-role="panel" id="mypanel" data-theme="a"><li><a href="#page1" data-role="button" data-theme="a">Btn page 1</a></li><li><a href="#page2" data-role="button" data-theme="a">Btn page 2</a></li></div>');
    activePage.append(myPanel);

    //how to add the panel Button to the Header so that it will show the left panel? some dummy code:

    panelBtn = $('<a href="#mypanel" data-role="button" data-icon="bars" data-iconpos="notext"></a>');
    activePage.append(panelBtn);

    switch (activePageId) {
        case 'page1':

            break;
        case 'page2':

            break;
        default:
    }

}).on("pagecontainerhide", function (e, ui) {
    var activePage = $(ui.toPage),
        activePageId = activePage[0].id;
});

Answer 1

尝试附加到$(body)

并假设pagecontainerbeforeshow是定义的侦听器？

将左侧面板动态附加到所有页面

1 个答案: