CODEWITHSUNDEEP
jqueryhtmljquery-mobile
ashok_p
ashok_p

Reputation: 749

JQuery Mobile :how to call panel in one page from the other page

i am new to JQuery Mobile can any one help me with it. I have 3 pages with different id(panel-main,room1,room2) in the container page. first page has a menu button if you click on that then it will open navigation panel with id "nav-panel". "nav-panel" contains the links to other two pages (room1,room2). now my problem is i am not able call "nav-panel" from the pages room1 and room2.

below is the code

<div data-role="page" class="jqm-demos ui-responsive-panel" id="panel-main" data-title="Panel main">

<div data-role="header">
    <h1>main panel</h1>
    <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
</div>

<div role="main" class="ui-content jqm-content jqm-fullwidth">
    <p>main panel</p>
</div>

<div data-role="panel" data-display="push" data-theme="b" id="nav-panel">
  <ul data-role="listview">
    <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
    <li><a href="#room1">Room 1 page</a></li>
    <li><a href="#room2">Room 2 Page</a></li>
  </ul>
</div>

</div>


<div data-role="page" id="room1" data-theme="a">

  <div data-role="header">
<h1>Room 1</h1>
<!--I want to call the "nav-panel" in this page (room1)-->
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
  </div>

  <div data-role="main" class="ui-content">
<p>This is room 1 page</p>

  </div>

</div> 

<div data-role="page" id="room2" data-dialog="true" data-theme="a">

  <div data-role="header">
<h1>Room 1</h1>
     <!--I want to call the "nav-panel" in this page (room2)-->
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
  </div>

  <div data-role="main" class="ui-content">
<p>This is room 2 page</p>

  </div>

</div>

Upvotes: 1

Views: 784

Answers (1)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/Gajotres/vds2U/47/

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="panel" data-display="push" data-theme="b" id="nav-panel" data-position="left">
            <ul data-role="listview">
                <li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
                <li><a href="#panel-main">Main panel page</a></li>                
                <li><a href="#room1">Room 1 page</a></li>
                <li><a href="#room2">Room 2 Page</a></li>
            </ul>
        </div> 

        <div data-role="page" id="panel-main" data-title="Panel main"  data-position="fixed">

            <div data-role="header">
                <h1>main panel</h1>
                <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
            </div>

            <div role="main" class="ui-content jqm-content jqm-fullwidth">
                <p>main panel</p>
            </div>            
        </div>


        <div data-role="page" id="room1" data-theme="a"  data-position="fixed">

            <div data-role="header">
                <h1>Room 1</h1>
                <!--I want to call the "nav-panel" in this page (room1)-->
                <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
            </div>

            <div data-role="main" class="ui-content">
                <p>This is room 1 page</p>

            </div>

        </div> 

        <div data-role="page" id="room2" data-dialog="true" data-theme="a"  data-position="fixed">

            <div data-role="header">
                <h1>Room 1</h1>
                <!--I want to call the "nav-panel" in this page (room2)-->
                <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
            </div>

            <div data-role="main" class="ui-content">
                <p>This is room 2 page</p>

            </div>

        </div>  
    </body>
</html>

JavaScript:

$(function () {
  $("[data-role=panel]").enhanceWithin().panel();
});

Notes:

  • Panel is placed outside, so every page will share only one panel
  • JavaScript is used to initialize panel correctly, don' to do that inside page events, this particular code must be executed on document ready (unlike everything else in jQuery Mobile)
  • This code will only work in jQuery Mobile 1.4 and above, lover versions used completely different logic (it wasn't pretty)

Upvotes: 2

Related Questions