CODEWITHSUNDEEP
jquery-mobile
Shruti
Shruti

Reputation: 1574

How to show panel with buttons in panel?

can you please tell me how to show panel with buttons in panel(with slide show) .and display different pages on each Button click?

here is my code. http://jsfiddle.net/ravi1989/YAA4A/

<div data-role="page" id="index">

    <div data-role="panel" id="mypanel">

    </div>

        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
            <a href="#second" class="ui-btn-right">Next</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="second">
        <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>

Upvotes: 1

Views: 1837

Answers (1)

Gajotres
Gajotres

Reputation: 57309

I hope I have understood your question correctly.

Working example: http://jsfiddle.net/TXRjk/1/

HTML:

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

    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</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="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>

Javascript: 

$(document).on('click', '#open-panel', function(){   
    $.mobile.activePage.find('#mypanel').panel("open");       
});

Upvotes: 1

Related Questions