Framework7 - Related App & View Methods

Description

The View(<div class = "view">) is a disconnected visual section of app consisting of its own settings, navigations and history. Every view may have a different navbar and toolbar layouts.

Views is the wrapper container for all visual views except modals and panels. When views is set as a main wrapper for your app's body, only one views element is allowed. The following code shows the HTML structure for views −

<body>
   ...
   <div class = "panel panel-left panel-cover">
      <div class = "view panel-view"> .... </div>
   </div>
   
   <!-- Views -->
   <div class = "views">
      <!-- Your main view -->
         
      <div class = "view view-main">
         <!-- Navbar-->
         <!-- Pages -->
         <!-- Toolbar-->
      </div>
         
      <!-- Another view -->
      <div class = "view another-view">
         <!-- Navbar-->
         <!-- Pages -->
         <!-- Toolbar-->
      </div>
   </div>
  
   <div class = "popup">
      <div class = "view popup-view"> .... </div>
   </div>
   ....
      
</body>

On initializing the View, framework7 allows you to use the methods available for navbar as shown below −

S.No Methods & Description
1

myApp.hideNavbar(navbar)

It is used to hide a particular navbar. The navbar can be HTMLElement or string (with CSS selector) of required navbar and is a required parameter.
2

myApp.showNavbar(navbar)

It is used to show a particular navbar. The navbar can be HTMLElement or string (with CSS selector) of required navbar and is a required parameter.
3

view.hideNavbar()

It hides navbar in this view.
4

view.showNavbar()

It shows navbar in this view.
5

myApp.sizeNavbars(viewContainer)

It is used to recalculate positional styles for Navbar. The viewContainer can be CSS selector string or HTMLElement and is used only by iOS theme.

Example

The following example demonstrates the use of view methods in Framework7, which hides the navbar when you click the Hide Navbar (uses .hide-navbar class) button and shows the navbar by clicking on the Show Navbar (uses .show-navbar class) button.

<!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>Navbar View Methods</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 = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                     
                        <div class = "left">
                           <a href = "#" class = "link"> <i class = "icon icon-back"></i><span>Previous</span></a>
                        </div>
                        
                        <div class = "center">Center Part</div>
                        
                        <div class = "right">
                           <a href = "#" class = "link icon-only"> <i class = "icon icon-bars"></i></a>
                        </div>
                        
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "button hide-navbar">Hide Navbar</a></p>
                        
                        <p> <a href = "#" class = "button show-navbar">Show Navbar</a></p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper   turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam  sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                           Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                           Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer 
                           sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat 
                           dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia 
                           dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam 
                           eu consectetur. Sed posuere a orci id imperdiet.</p>
                     </div>
                  </div>
                  
               </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>
         var myApp = new Framework7();
         var $ = Framework7.$;
         var mainView = myApp.addView('.view-main');
         
         $('.hide-navbar').on('click', function () {
            mainView.hideNavbar();
         });
         
         $('.show-navbar').on('click', function () {
            mainView.showNavbar();
         });
      </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 navbar_app_view.html file in your server root folder.

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

  • When you run the code, you can hide the navbar by clicking on the Hide Navbar button and shows the navbar by clicking on the Show Navbar button.

framework7_navbars.htm
Advertisements