0

パネルを実装できます。しかし、ページをパネルで表示する必要があります。実際には、パネルボタンをクリックすると、パネルが非表示になります。画面全体でページを表示します。しかし、パネルでページを表示する必要があります。

これが私のコードです。 http://jsfiddle.net/ravi1989/TXRjk/2/

2ページ目にジャンプ 3ページ目にジャンプ

先頭ページ

次の開いているパネル 
<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>
4

1 に答える 1

0

私はそれがあなたが望んでいるものであるべきだと思います:

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

于 2013-07-05T11:09:22.800 に答える