OnsenUI 메뉴와 탭 바를 결합하여 사용하는 샘플

14649 단어 HTML5 온 등봉 monaca

소개

OnsenUI2를 사용해 웹 페이지를 모바일 대응으로 하는 심플한 샘플을 소개한다고 명언하고 나서, 어떻게 할까~라고 생각하기 시작해, 모바일 같게 하는 시작에는 메뉴와 탭 바의 사용이 좋을까라고 생각했으므로, 이것을 조합한 페이지를 만드는 방법을 소개합니다.

페이지 구성

Monaca 에서 메뉴를 사용할 수 있는 템플릿에서 프로젝트를 생성하면 손쉽게 메뉴 기능을 얻을 수 있으므로, 이것에 탭 바를 추가하는 흐름으로 만들어 갑니다.

먼저 새 프로젝트 만들기에서 Onsen UI V2 JS Splitter에서 만들기 버튼을 클릭합니다.

프로젝트가 생성되면 다음 메뉴가 초기화됩니다.

Home

Setting

About

여기에서 Home으로 표시되는 페이지 하단에 Home 및 Home2라는 탭을 추가합니다.
완성의 이미지는 아래 그림과 같습니다.

HTML 도식

나의 이해로는, 각 태그와 표시 부분의 관계를 그림에 나타내면 아래 그림과 같이 되는 느낌입니다.

그래서, 홈으로 표시되는 템플릿 부분에 탭 바의 표시를 추기해, 탭을 사용할 수 있도록 변경해 보겠습니다.

Home2 템플릿 만들기

원래는 Home 밖에 없기 때문에 Home2 템플릿을 추가합니다.
내용은 Home을 카피해, id를 「home2.html」로 하는 것 뿐입니다만, 표시가 전환된 것을 알 수 있듯이 「Main」이라고 하는 타이틀도 「Main2」라고 재기록합니다.

  <ons-template id="home2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main2
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
    </ons-page>
  </ons-template>

탭 표시줄에 추가된 템플릿 만들기

다음으로, 탭 바는 home와 home2에만 표시하면 좋기 때문에 이것을 어떻게 할까 생각합니다.
그래서, 메뉴의 Home로부터 호출하는 페이지를 탭 바용의 페이지로서, 탭 바용의 페이지로부터 home.html와 home2.html를 호출한다고 하는 구조로 해 보겠습니다.

...라고 설명이 다소 어렵네요.

우선, 이하의 코드를 추가.

  <ons-template id="tab.html">
    <ons-page>
      <ons-tabbar>
        <ons-tab page="home.html" label="home" active>
        </ons-tab>
        <ons-tab page="home2.html" label="home2">
        </ons-tab>
      </ons-tabbar>
    </ons-page>
  </ons-template>

초기 표시 설정 변경

초기 표시가 home.html이므로이 부분을 tab.html로 다시 씁니다.
덧붙여서, 수정 부분은 2 개소 있습니다.

  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-header>Default</ons-list-header>
          <ons-list-item onclick="fn.load('tab.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="tab.html"></ons-splitter-content>
  </ons-splitter>

사족이지만 메뉴에 ~ 라고 쓰면 그룹으로 나눈 UI가되므로 여기에서는 그것도 추기하고 있습니다.

표시 부분의 모든 소스

~의 내용을 아래에 요약합니다.

<body>
  <ons-splitter>
    <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
      <ons-page>
        <ons-list>
          <ons-list-header>Default</ons-list-header>
          <ons-list-item onclick="fn.load('tab.html')" tappable>
            Home
          </ons-list-item>
          <ons-list-item onclick="fn.load('settings.html')" tappable>
            Settings
          </ons-list-item>
          <ons-list-item onclick="fn.load('about.html')" tappable>
            About
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-splitter-side>
    <ons-splitter-content id="content" page="tab.html"></ons-splitter-content>
  </ons-splitter>

  <ons-template id="tab.html">
    <ons-page>
      <ons-tabbar>
        <ons-tab page="home.html" label="home" active>
        </ons-tab>
        <ons-tab page="home2.html" label="home2">
        </ons-tab>
      </ons-tabbar>
    </ons-page>
  </ons-template>

  <ons-template id="home.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="home2.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="fn.open()">
            <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">
          Main2
        </div>
      </ons-toolbar>
      <p style="text-align: center; opacity: 0.6; padding-top: 20px;">
        Swipe right to open the menu!
      </p>
    </ons-page>
  </ons-template>

  <ons-template id="settings.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        Settings
      </div>
    </ons-toolbar>
    <div>
        設定用の内容
    </div>
  </ons-page>
  </ons-template>

  <ons-template id="about.html">
  <ons-page>
    <ons-toolbar>
      <div class="left">
        <ons-toolbar-button onclick="fn.open()">
          <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>
        </ons-toolbar-button>
      </div>
      <div class="center">
        About
      </div>
    </ons-toolbar>
    <div>
        アプリについての説明
    </div>
  </ons-page>
  </ons-template>

</body>

할 수 있었다!

Reference

이 문제에 관하여(OnsenUI 메뉴와 탭 바를 결합하여 사용하는 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/mix_dvd/items/201f4b9a49582ab06de3

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Onsen UI 2 + Monaca에서 옷 관리 앱을 만든 메모

Web IDE cloud9에서 스마트폰 앱 개발 using React

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다