jQuery mobile panel is not working

StackOverflow https://stackoverflow.com/questions/23594713

  •  20-07-2023
  •  | 
  •  

Question

Im trying to use jQuery mobile Panels to do a side menu. I was reading documentation here.

And now Im trying to do my first example. But nothing is happening when I click in my link to open the panel.

Do you see something wrong here?

<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
<title>First Example</title>
</head>

<body>
<div data-role="page">

    <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Open</a> <h1>Home</h1>
    </div>
    <div data-role="panel" id="menu-panel">
        <ul data-role="listview">
            <li><a href="index.html">Home</a></li>
            <li><a href="About.html">About</a></li>
        </ul>
    </div><!-- /panel -->       
</div><!-- /page -->
</body>

My trying on jsfiddle.

Was it helpful?

Solution

My two cents..you are inserting jQuery Mobile resources in the wrong order/place. In addition where is jQuery?

Here a working JSFiddle with jQuery Mobile already set up...JSFiddle demo. If you click on the left button the panel will open or close.

In HTML section do as before.

<div data-role="page">    
    <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> <h1>Home</h1>
    </div>
    <div data-role="panel" id="menu-panel">
        <ul data-role="listview">
            <li><a href="index.html">Home</a></li>
            <li><a href="About.html">About</a></li>
        </ul>
    </div><!-- /panel -->       
</div><!-- /page -->

Now, you should see content enriched correctly (the navigation bar only in this case) and you can manage the panel with

$( '#menu-panel' ).panel( "open" );

or

$( '#menu-panel' ).panel( "close" );
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top