如何把一个“勾号”按钮，以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滑动面板

回答

相关问题