Question

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

这是我的代码。 http://jsfiddle.net/ravi1989/TXRjk/2/

跳转到第二页跳转到第三页

第一页

下一个打开Pannel

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

    <div data-theme="a" data-role="header">
        <h3>
            Second Page
        </h3>
        <a href="#index" class="ui-btn-left">Back</a>
    </div>

    <div data-role="content">
        <a data-role="button" id="open-panel">Open Pannel</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

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

    <div data-theme="a" data-role="header">
        <h3>
            Third Page
        </h3>
        <a href="#index" class="ui-btn-left">Back</a>
    </div>

    <div data-role="content">
        <a data-role="button" id="open-panel">Open Pannel</a>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

Answer 1

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

<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>

和这个javascript：

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

和这个css：

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

以及此功能示例http://jsfiddle.net/wgbn/Hxy37/

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

第一页

1 个答案: