Jquery mobile 如何在jquery mobile中使用面板在右侧显示页面

我能够实现面板。但我需要我的页面应该显示面板。实际上，当我点击面板按钮时，它会隐藏面板。在整个屏幕上显示页面。但我需要显示面板页面

这是我的密码。

跳转到第二页 跳转到第三页 首页 下一个 开口板

第二页
第三页
开口板

我认为这应该是你想要的：

<div data-role="page" id="index">  
    <div data-role="panel" id="mypanel">
        <a href="#" data-role="button" class="btnPages" data-idpage="index">Jump to index page</a>
        <a href="#" data-role="button" class="btnPages" data-idpage="second">Jump to second page</a>
        <a href="#" data-role="button" class="btnPages" data-idpage="third">Jump to third page</a>        
    </div>

    <div data-theme="a" data-role="header">
        <h3 id="header-page">
            First Page
        </h3>
    </div>

    <div data-role="content" id="content-page">
        <a data-role="button" href="#mypanel">Open Pannel</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed" id="footer-page">
        .
    </div>

</div> 

<div class="soHide" id="index">  
    <div data-theme="a" data-role="header">
        <h3 id="header-index">
            First Page
        </h3>
    </div>

    <div data-role="content" id="content-index">
        <a data-role="button" href="#mypanel">Open Pannel</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed" id="footer-index">
        .
    </div>

</div> 

<div class="soHide" id="second">
    <div data-theme="a" data-role="header">
        <h3 id="header-second">
            Second Page
        </h3>
    </div>

    <div data-role="content" id="content-second">
        <p>this is a second page</p>
        <a data-role="button" href="#mypanel">Open Pannel again</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed" id="footer-second">
       footer second page
    </div>
</div>

<div class="soHide" id="third">
    <div data-theme="a" data-role="header">
        <h3 id="header-third">Third Page</h3>
    </div>

    <div data-role="content" id="content-third">
        <a data-role="button" id="open-panel">Open Pannel one more time</a>
        <p>it's third!</p>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed" id="footer-third">
        it's some third footer page
    </div>
</div>

这个css：

.ui-panel-animate {
    transition: transform 1350ms ease 0s !important;
}
.soHide { display: none; }

---

这个功能示例

问题我需要在面板前面显示页面。运行我的小提琴。它显示打开的面板。当我单击面板上的按钮时，它显示页面，但我需要在面板右侧的面板前面显示页面

$(document).on('click', '.btnPages', function(){   
    var page = $(this).attr('data-idpage');
    var header = $("#header-"+page).html();
    var content = $("#content-"+page).html();
    var footer = $("#footer-"+page).html();

    // apply
    $("#header-page").html(header).trigger('create');
    $("#content-page").html(content).trigger('create');
    $("#footer-page").html(footer).trigger('create');
});

.ui-panel-animate {
    transition: transform 1350ms ease 0s !important;
}
.soHide { display: none; }