Framework7 - Thanh trạng thái

Sự miêu tả

IOS 7+ cho phép bạn tạo các ứng dụng toàn màn hình có thể gây ra sự cố khi thanh trạng thái chồng lên ứng dụng của bạn. Framework7 giải quyết vấn đề này bằng cách phát hiện xem ứng dụng của bạn có đang ở chế độ toàn màn hình hay không. Nếu ứng dụng của bạn ở chế độ toàn màn hình thì Framework7 sẽ tự động thêm lớp with-statusbar-overlay vào <html> (hoặc loại bỏ nếu ứng dụng không ở chế độ toàn màn hình) và bạn cần thêm lớp statusbar-overlay trong <body> như được hiển thị trong đoạn mã sau:

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

Theo mặc định, <div> sẽ luôn bị ẩn và cố định trên đầu màn hình của bạn. Nó sẽ chỉ hiển thị khi ứng dụng ở chế độ toàn màn hình và lớp với-statusbar-overlay được thêm vào <html> .

Thí dụ

Ví dụ sau minh họa việc sử dụng thanh trạng thái trong 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>

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã html đã cho ở trên dưới dạng status_bar.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/status_bar.html và kết quả được hiển thị như hình dưới đây.

Ví dụ cho thấy việc sử dụng statusbar-overlay, cho phép bạn tạo ứng dụng toàn màn hình khi thanh trạng thái của bạn chồng lên ứng dụng.