Framework7 - Status Bar-alljchome-开发者的教程家园

Framework7 Tutorial

Framework7 Components

Framework7 Styling

Framework7 Templates

Framework7 Fast Clicks

Framework7 Useful Resources

Selected Reading

Framework7 - Status Bar

Description

The iOS 7+ allows you to build full screen apps which could create an issue when your status bar overlaps your app. Framework7 solves this problem by detecting whether your app is in full screen mode or not. If your app is in full screen mode then, the Framework7 will automatically adds with-statusbar-overlay class to <html> (or removes if app is not in full screen mode) and you need to add statusbar-overlay class in <body> as shown in the following code −

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

By default, <span> will always be hidden and fixed on top of your screen. It will only be visible when the app is in full screen mode and with-statusbar-overlay class is added to <html>.

Example

The following example demonstrates the use of status bar in the 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>
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
      <pnk rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>

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

         // If your using custom DOM pbrary, 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>

Output

Let us carry out the following steps to see how the above given code works −

Save the above given html code as status_bar.html file in your server root folder.

Open this HTML file as http://localhost/status_bar.html and the output is displayed as shown below.