Framework7 - Statusleiste

Beschreibung

Mit iOS 7+ können Sie Vollbild-Apps erstellen, die ein Problem verursachen können, wenn sich Ihre Statusleiste mit Ihrer App überschneidet. Framework7 löst dieses Problem, indem festgestellt wird, ob sich Ihre App im Vollbildmodus befindet oder nicht. Wenn sich Ihre App im Vollbildmodus befindet, fügt Framework7 <html> automatisch eine With-Statusbar-Overlay- Klasse hinzu (oder wird entfernt, wenn sich die App nicht im Vollbildmodus befindet), und Sie müssen in <body> eine Statusbar-Overlay- Klasse hinzufügen wie im folgenden Code gezeigt -

<html class = "with-statusbar-overlay">
...
   <body>
      <div class = "statusbar-overlay"></div>
      ...

Standardmäßig wird <div> immer oben auf Ihrem Bildschirm ausgeblendet und fixiert. Es ist nur sichtbar, wenn sich die App im Vollbildmodus befindet und <html> eine With-Statusbar-Overlay- Klasse hinzugefügt wurde .

Beispiel

Das folgende Beispiel zeigt die Verwendung der Statusleiste in Framework7 -

<!DOCTYPE html>
<html>

   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, 
         maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
      <meta name = "apple-mobile-web-app-capable" content = "yes" />
      <meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
      <title>My App</title>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

   <body>
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel"><i class = "icon icon-bars"></i></a>
                  </div>
                  
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <p>page contents goes here!!!</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
            
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
            //get page data from event data
            var page = e.detail.page;
         })
      </script>
   </body>

</html>

Ausgabe

Lassen Sie uns die folgenden Schritte ausführen, um zu sehen, wie der oben angegebene Code funktioniert:

Speichern Sie den oben angegebenen HTML-Code als status_bar.html Datei in Ihrem Server-Stammordner.
Öffnen Sie diese HTML-Datei als http: //localhost/status_bar.html und die Ausgabe wird wie unten gezeigt angezeigt.

Das Beispiel zeigt die Verwendung der statusbar-overlayHiermit können Sie Vollbild-Apps erstellen, wenn sich Ihre Statusleiste mit der App überschneidet.