How to show the panel in pageshow in jQuery mobile

Question

How to show the panel in pageshow in jQuery mobile

1.4k Views Asked by Michael Jiang At 26 April 2025 at 09:12

I try to add a handle in the panel to toggle it,

here is the my code: http://jsfiddle.net/bjtn8/

I just want the handle display by default, use it to show or hide the panel.

So I use below code:

$("#slide-menu").panel("toggle").panel("close");

It seems doesn't work fine.

Another question is should I add a panel for each page? Thanks.

Original Q&A

There are 1 best solutions below

**Gajotres** · Answer 1

Working example: http://jsfiddle.net/Gajotres/qgDst/

You need to put panel into every page and one last thong, panel must be on a same level as content and not be a part of it.

HTML :

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <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.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">              
                <h1>Index page</h1>
            </div>

            <div data-role="content">

            </div>

            <div data-role="panel" id="left-panel" data-display="overlay" data-position="left" data-theme="c">
                <img src="small_image_as_button" /><!-- click here to open the panel -->
                <nav id="indice">
                    <!-- content here -->
                </nav>
                <div data-role="button" id="tick-button">>></a>                
            </div>            
        </div>    
    </body>
</html>

Javascript :

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click tap', '#tick-button', function(){ 
        $("#left-panel").panel( "open");       
    });      
});

CSS :

.ui-panel-closed {
    visibility: visible !important;  
    width: 100px !important; 
    left: 160px !important;
    overflow: visible !important;
}

.ui-content {
    padding: 0 15px 15px 15px !important;
}

#tick-button {
    position: absolute;
    top: 100px;
    right: -27px;    
    width: 25px;
    height: 100px;
    margin: 0 0 !important;
    border-radius: 0 1em 1em 0;
}

#tick-button .ui-btn-inner {
    padding: 0 0 !important;
    height: 100% !important;
    font:10px 'Courier New', 'Verdana',serif;     
    line-height: 100px;
    color: #555;
    text-shadow: 1px 1px #fff;   
}

How to show the panel in pageshow in jQuery mobile

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in CSS

Related Questions in HTML

Related Questions in JQUERY-MOBILE

Related Questions in JQUERY-MOBILE-PANEL

Trending Questions

Popular # Hahtags

Popular Questions