如何把一個「勾號」按鈕，以jquerymobile滑動面板

我想使用this sliding panel，使用jQuery的手機完成。它完美的作品。如何把一個「勾號」按鈕，以jquerymobile滑動面板

我想在滑動面板的邊框上放一個小按鈕，比如刻度線。這個按鈕也應該用面板滑動。按下此按鈕將打開面板，並始終可見。我不知道該怎麼做，我不知道這是否可能。

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

來源

2013-04-30 santi

工作例如：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-04-30 13:08:36 Gajotres

非常感謝你!!!!非常聰明的使用！重要。 – santi 2013-04-30 14:16:44

再次感謝你，我剛剛做到了。 – santi 2013-04-30 14:22:19

我很高興你喜歡它，因爲我確信它是可能的。 :) – Gajotres 2013-04-30 14:28:40

如何把一個「勾號」按鈕，以jquerymobile滑動面板

回答

相關問題