Framework7-도구 모음

기술

도구 모음을 사용하면 화면 하단의 탐색 요소를 사용하여 다른 페이지에 쉽게 액세스 할 수 있습니다.

표에 지정된 두 가지 방법으로 도구 모음을 사용할 수 있습니다.

S. 아니	도구 모음 유형 및 설명
1	도구 모음 숨기기 페이지를로드 할 때 도구 모음을 자동으로 숨길 수 있습니다. no-toolbar 로드 된 페이지에 클래스.
2	하단 도구 모음 페이지 하단에 도구 모음을 배치하려면 toolbar-bottom 수업.

도구 모음 방법

다음 사용 가능한 방법은 도구 모음에서 사용할 수 있습니다-

S. 아니	도구 모음 방법 및 설명
1	myApp.hideToolbar(toolbar) 지정된 도구 모음을 숨 깁니다.
2	myApp.showToolbar(toolbar) 지정된 툴바를 보여줍니다.
삼	view.hideToolbar() 보기에서 지정된 도구 모음을 숨 깁니다.
4	view.showToolbar() 보기에 지정된 도구 모음을 표시합니다.

예

다음 예제는 Framework7의 도구 모음 레이아웃 사용을 보여줍니다.

먼저 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로 열면 출력이 아래와 같이 표시됩니다.