CODEWITHSUNDEEP
jqueryjquery-mobilepanel
Reinstar
Reinstar

Reputation: 146

JQuery Mobile 1.3.0 panel from javascript or difference file

Standard example from jQuery Mobile when creating Panel like this:

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

May I create Panel from javascript or difference file so I can create dynamic content Panel?

Upvotes: 0

Views: 1086

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Take a look at my other answer regarding this solution: https://stackoverflow.com/a/15223926/1848600

This is how you can add it dynamically:

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

Upvotes: 2

Related Questions