Framework7 - 相关应用和视图方法

描述

View(<div class = "view">) 是应用的一个不连贯的可视部分，由其自己的设置、导航和历史记录组成。每个视图可能具有不同的导航栏和工具栏布局。

Views 是除 modals 和 panels 之外的所有可视视图的包装容器。当 views 设置为应用主体的主要包装器时，只允许一个 views 元素。以下代码显示了视图的 HTML 结构 −

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

在初始化 View 时，framework7 允许您使用可用于导航栏的方法，如下所示 −

S.No	方法和说明
1	myApp.hideNavbar(navbar) 用于隐藏特定导航栏。 navbar 可以是所需导航栏的 HTMLElement 或字符串(带有 CSS 选择器)，并且是必需的参数。
2	myApp.showNavbar(navbar) 用于显示特定的导航栏。 navbar 可以是所需导航栏的 HTMLElement 或字符串(带有 CSS 选择器)，并且是必需的参数。
3	view.hideNavbar() 它隐藏此视图中的导航栏。
4	view.showNavbar() 它在此视图中显示导航栏。
5	myApp.sizeNavbars(viewContainer) 它用于重新计算导航栏的位置样式。 viewContainer 可以是 CSS 选择器字符串或 HTMLElement，并且仅由 iOS 主题使用。

示例

以下示例演示了 Framework7 中视图方法的使用，当您单击 隐藏导航栏(使用 .hide-navbar 类)按钮时会隐藏导航栏，而单击 显示导航栏(使用 .show-navbar 类)按钮时会显示导航栏。

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