Framework7 - Durum Çubuğu

Açıklama

İOS 7+, durum çubuğunuz uygulamanızla örtüştüğünde sorun yaratabilecek tam ekran uygulamalar oluşturmanıza olanak tanır. Framework7, uygulamanızın tam ekran modunda olup olmadığını tespit ederek bu sorunu çözer. Uygulamanız tam ekran modundaysa, Framework7 otomatik olarak statusbar-overlay sınıfını <html> ' ye ekler (veya uygulama tam ekran modunda değilse kaldırır) ve <body>' de statusbar-overlay sınıfı eklemeniz gerekir. aşağıdaki kodda gösterildiği gibi -

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

Varsayılan olarak <div> her zaman gizlenecek ve ekranınızın üstünde sabitlenecektir. Yalnızca uygulama tam ekran modundayken ve statusbar-overlay sınıfı ile <html> 'ye eklendiğinde görünür olacaktır .

Misal

Aşağıdaki örnek, Framework7'de durum çubuğunun kullanımını gösterir -

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

Çıktı

Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -

Yukarıda verilen html kodunu farklı kaydedin status_bar.html sunucunuzun kök klasöründeki dosya.
Bu HTML dosyasını http: //localhost/status_bar.html olarak açın ve çıktı aşağıda gösterildiği gibi görüntülenir.

Örnek, statusbar-overlay, durum çubuğunuz uygulamayla örtüştüğünde tam ekran uygulamalar oluşturmanıza olanak tanır.