2017-11-15 5 views
1

https://jsfiddle.net/7xwrxkrd/jquery mobile - JQM 1.4.5 navbar nicht halten aktiven Zustand nach Panel Overlay

Zunächst Tab One wird mit ui-btn-aktiv und Stile ui-state-beharren - wenn Sie den Burger-Symbol klicken Sie im Panel Overlay wird angezeigt und wenn Sie wegklicken, ist Tab Eins noch aktiv.

Wenn Sie jedoch Tab Zwei auswählen und dann auf das Burger-Symbol klicken, um das Bedienfeld anzuzeigen, verliert das Register Zwei seinen aktiven Status.

Gibt es eine Möglichkeit, die Tabs aktiv zu halten, während das Panel Overlay verwendet wird?

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
    </head> 

    <body> 
     <div data-role="page"> 

      <div data-role="header" data-position="fixed" data-fullscreen="false"> 
       <a href="#panel-overlay" class="ui-btn ui-btn-left ui-alt-icon ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-bars">Menu</a> 
       <h1>Demo</h1> 
      </div> 

      <div data-role="tabs" id="tabs" style="padding:0px;"> 
       <div data-role="navbar"> 
        <ul> 
         <li><a href="#one" class="ui-btn-active ui-state-persist">Tab One</a></li> 
         <li><a href="#two">Tab Two</a></li> 
         <li><a href="#three">Tab Three</a></li> 
        </ul> 
       </div> 

       <div id="one" class="ui-content" date-role="content"> 
        <p>First tab Content</p> 
       </div> 

       <div id="two" class="ui-content" date-role="content"> 
        <p>Second tab contentnt</p> 
       </div> 

       <div id="three" class="ui-content" date-role="content"> 
        <p>Thrid tab contentnt</p> 
       </div> 
      </div> 

      <div data-role="panel" id="panel-overlay" data-display="overlay"> 
       <ul data-role="listview"> 
        <li><a href="#">Menu 1</a></li> 
        <li><a href="#">Menu 2</a></li> 
       </ul> 
      </div> 

     </div> 
    </body> 
</html> 

Antwort

1

Dies ist eine generische Lösung für dieses Problem:

$(document).on("panelbeforeopen", "div[data-role='panel']", function(e,ui) { 
    $.mobile.activeClickedLink = null; 
}); 

Wenn Sie bereits irgendwo in Ihrem Code haben die panelbeforeopen Rückruf, einfach den Hotfix setzen $.mobile.activeClickedLink = null; in Ihrer Funktion.

Verwandte Themen