来自javascript或差异文件的JQuery Mobile 1.3.0面板

创建如下面板时，来自jQuery Mobile的标准示例：

<div data-role="page">
    <div data-role="header">
        <h1>Example</h1>
        <a href="#main-panel" data-icon="bars" data-iconpos="notext">Navigation</a>
    </div>

    <div data-role="content">
        Your Content
    </div>

    <div data-role="footer">
        Your Footer
    </div>

    <div data-role="panel" id="main-panel">
        Your Panel
    </div>
</div>

例子
你的内容
你的页脚
你的小组

---

我可以从javascript或差异文件创建面板，以便创建动态内容面板吗？

看看我关于此解决方案的其他答案：

以下是动态添加的方式：

$(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");       
    });    
});

$（document）.on（'pagebeforeshow'，'[data role=“page”]'，function（）{
$（''）.attr（{'id'：'mypanel'，'data-role'：'panel'}）.appendTo（$（this））；
$（''）.attr（{'id'：'test-btn'，'data-role'：'button'}）.html（'Click me'）.appendTo（'mypanel'）；
$.mobile.activePage.find（'#mypanel'）.panel（）；
$（文档）.on（'单击'，'打开面板'，函数（）{
$.mobile.activePage.find（'#mypanel'）.panel（“打开”）；
});    
});