Framework7-navbar-app-view

提供：Dev Guides
移動先:案内、検索

Framework7-関連するアプリとビューのメソッド

説明

_View（<div class = "view">）_は、独自の設定、ナビゲーション、および履歴で構成されるアプリの切断された視覚セクションです。 すべてのビューには、異なるナビゲーションバーとツールバーのレイアウトがあります。

Viewsは、_modals_および_panels_を除くすべてのビジュアルビューのラッパーコンテナーです。 _views_がアプリの本体のメインラッパーとして設定されている場合、許可される_views_要素は1つだけです。 次のコードは、ビューの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では、以下に示すようにnavbarで使用可能なメソッドを使用できます-

S.No Methods & Description
1

myApp.hideNavbar(navbar)

特定のnavbarを非表示にするために使用されます。 _navbar_は、必要なnavbarのHTMLElementまたは文字列（CSSセレクターを使用）であり、必須パラメーターです。

2

myApp.showNavbar(navbar)

特定のnavbarを表示するために使用されます。 _navbar_は、必要なnavbarのHTMLElementまたは文字列（CSSセレクターを使用）であり、必須パラメーターです。

3

view.hideNavbar()

このビューではnavbarを非表示にします。

4

view.showNavbar()

このビューにはnavbarが表示されます。

5

myApp.sizeNavbars(viewContainer)

Navbarの位置スタイルを再計算するために使用されます。 _viewContainer_はCSSセレクター文字列またはHTMLElementであり、iOSテーマでのみ使用されます。

例

次の例は、Hide Navbar（.hide-navbarクラスを使用）ボタンをクリックするとnavbarを非表示にし、Show Navbar（.show-navbarクラスを使用）ボタンをクリックしてnavbarを表示する、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>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>

出力

上記のコードがどのように機能するかを確認するために次の手順を実行してみましょう-

  • 上記のHTMLコード navbar_app_viewl ファイルをサーバーのルートフォルダーに保存します。
  • このHTMLファイルをhttp：//localhost/navbar_app_viewlとして開き、出力を以下のように表示します。
  • コードを実行すると、[Navbarを非表示]ボタンをクリックしてnavbarを非表示にし、[Navbarを表示]ボタンをクリックしてnavbarを表示できます。
「https://www.finddevguides.com/index.php?title=Framework7-navbar-app-view&oldid=30466」から取得
Powered by MediaWiki