如何顯示在jQuery的在pageshow面板移動

-1

我嘗試在面板中添加一個手柄切換它，如何顯示在jQuery的在pageshow面板移動

我只是默認情況下，想把手顯示，用它來顯示或隱藏面板。

於是我就用下面的代碼：

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

似乎不正常工作。

另一個問題是我應該爲每個頁面添加一個面板嗎？謝謝。

來源

2013-05-05 Michael Jiang

工作例如：http://jsfiddle.net/Gajotres/qgDst/

你需要把面板到每一個網頁，並最後一個丁字褲，面板必須在同一級別的內容，而不是成爲它的一部分。

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

來源

2013-05-05 07:45:14 Gajotres

如何顯示在jQuery的在pageshow面板移動

回答

相關問題