Framework7-ツールバー

説明

ツールバーを使用すると、画面下部のナビゲーション要素を使用して他のページに簡単にアクセスできます。

表で指定されているように、ツールバーは2つの方法で使用できます-

S.No	ツールバーの種類と説明
1	ツールバーを非表示を使用してページをロードすると、ツールバーを自動的に非表示にできます。 no-toolbar ロードされたページへのクラス。
2	下部ツールバーを使用して、ページの下部にツールバーを配置します。 toolbar-bottom クラス。

ツールバーの方法

以下の利用可能な方法はツールバーで使用できます-

S.No	ツールバーの方法と説明
1	myApp.hideToolbar(toolbar) 指定したツールバーを非表示にします。
2	myApp.showToolbar(toolbar) 指定したツールバーが表示されます。
3	view.hideToolbar() ビュー内の指定されたツールバーを非表示にします。
4	view.showToolbar() 指定したツールバーがビューに表示されます。

例

次の例は、Framework7でのツールバーレイアウトの使用法を示しています。

まず、というHTMLページを1つ作成します。 toolbar.html 以下に示すように-

<!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>Toolbar Layout</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 = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <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. 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. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</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
         });
      </script>
   </body>

</html>

次に、カスタムJSファイルでアプリとビューを初期化します toolbar.js。

出力

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

上記のHTMLコードを次のように保存します toolbar.html サーバーのルートフォルダにあるファイル。
このHTMLファイルをhttp：//localhost/toolbar.htmlとして開くと、出力が次のように表示されます。