Clever Geek Handbook

JQuery Mobile Panels

I'm trying to add a panel to use as a side menu, but it looks like I'm doing something wrong. I've tried troubleshooting but can't see where the problem is.

The panel is not hidden by default (not sure if it should behave) and I can't get it out.

Here's what I have. I appreciate your help.

<!-- @ Page = menu -->
<div data-role="page" id="menu">

    <div data-role="panel" id="myPanel" class="main_nav" data-display="push"  data-dismissible="true" data-theme="a">

        <div class="nav_profile">
            <div class="nav_thumb"><img src="images/nav_thumb.png" width="64" /></div>
            <div class="nav_name">
                <h3>user</h3>
                <p>2 active threads</p>
            </div><!--/nav_name-->
        </div><!--/nav_profile-->


    </div><!-- /panel -->

    <div data-role="header" class="header" data-position="fixed" role="banner" >

        <h3>Threads (2)</h3>
        <a href="#" class="right menu_button">New</a>
    </div>

    <div data-role="content">
        <a href="#myPanel" data-rel="panel" data-role="button" class="menu_icon left" ></a>
        <div class="head_search">
            <input type="text" class="search rounded" placeholder="Search" />
        </div>


    </div>

</div><!--/menu-->
+3


source to share


2 answers


Here: http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

The panel's visibility is toggled by a link somewhere on the page or by calling the open panel method directly. By default, place the panel on the left and it will be shown. Open the panel programmatically for example:

$( "#idofpanel" ).panel( "open" , optionsHash );

To control a panel from a link, specify the href value for the link to the ID of the panel you want to switch (mypanel in the example above). This instructs the framework to bind the link to the panel. This link will toggle the panel's visibility so that she clicks on it, the panel will open, and clicking again will close it again.

<a href="#mypanel">Open panel</a>



I put your code in jsFiddle and found no problem, panel opens correctly: http://jsfiddle.net/Twisty/Ej7A7/1/

Make sure you are using the latest JQuery and JQM Framework.

+2


source


I had the same problem, but in my case, the CSS file (download from jQuery mobile site) seemed to be corrupted. After downloading the free CSS file, it worked as expected. The problem seems to be fixed now!



+1


source






More articles:


All Articles