Скользящее меню пользовательского интерфейса Onsen

У меня такое меню:

   <ons-navigator animation="slide" var="myNavigator">
    <ons-sliding-menu menu-page="menu.html" main-page="link/to/some/page.html" side="left"
                         var="menu" type="reveal" max-slide-distance="260px" swipable="true">
       </ons-sliding-menu>

       <ons-template id="menu.html">
          <ons-page modifier="menu-page">
             <ons-toolbar modifier="transparent"></ons-toolbar>
             <ons-list class="menu-list">
                <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/page.html', {closeMenu: true})">
                   Home
                </ons-list-item>
            <ons-list-item class="menu-item" ng-click="menu.setMainPage('link/to/some/other/page.html', {closeMenu: true})">
                   Home
                </ons-list-item>
     </ons-list>
          </ons-page>
       </ons-template>
   </ons-navigator>

после перехода к "link/to/some/other/page.html" у меня есть $scope.myNavigator.pushPage('anotherpage', {});

операция. Это также работает. Но после того, как я выполнил операцию pushpage, я больше не могу использовать меню. Я должен сделать popPage раньше.

Страница выглядит так:

<div ng-controller="someNiceController">
   <ons-page>
      <ons-toolbar>
         <div class="left">
            <ons-toolbar-button ng-click="menu.toggle()">
               <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
            </ons-toolbar-button>
         </div>
         <div class="center">{{title}}</div>
      </ons-toolbar>
        My nice content
   </ons-page>
</div>

Я думаю, что есть проблема со структурой моей страницы... Есть предложения?


javascript angularjs onsen-ui
person publicDisplay    schedule 25.11.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны вынести скользящее меню за пределы навигатора.

Содержимое внутри навигатора будет заменено другой страницей при нажатии, поэтому скользящее меню в вашем примере исчезнет, ​​когда вы используете pushPage().

Следующий код показывает, как вы можете использовать скользящее меню вместе с навигатором:

<ons-sliding-menu
                  main-page="main.html"
                  menu-page="menu.html"       
                  side="left"
                  max-slide-distance="250px"
                  var="menu">
</ons-sliding-menu>

<ons-template id="main.html">
  <ons-navigator var="myNavigator">
    <ons-toolbar>
      <div class="center">Page 1</div>
    </ons-toolbar>
    <br>
    <div style="text-align: center">
      <ons-button onclick="myNavigator.pushPage('page2.html')">Push</ons-button>
    </div>
  </ons-navigator>
</ons-template>

<ons-template id="page2.html">
  <ons-page>
    <ons-toolbar>
      <div class="center">Page 2</div>
    </ons-toolbar>
    <br>
    <div style="text-align: center">
      <ons-button onclick="myNavigator.popPage()">Pop</ons-button>
    </div>
  </ons-page>
</ons-template>

<ons-template id="menu.html">
  <ons-list>
    <ons-list-item modifier="tappable">
      Some option
    </ons-list-item>
    <ons-list-item modifier="tappable">
      Another option      
    </ons-list-item>
  </ons-list>
</ons-template>

Здесь вы можете увидеть это в действии: http://codepen.io/argelius/pen/ogXGeV.

person Andreas Argelius    schedule 26.11.2014
comment
Благодарю вас. Это работает для меню, но приводит к некоторым другим проблемам... Например: в моем угловом коде я установил некоторые стили для кнопок и так далее. Эти элементы больше не встречаются. Пример команды: document.getElementById('btn_apply') - person publicDisplay; 27.11.2014

arrow_upward
0
arrow_downward

Вот рабочее скользящее меню в пользовательском интерфейсе Onsen. Два изменения, которые вы должны сделать, это поместить элемент sliding-menu вне навигатора и сослаться на него с помощью переменной var="menu". Использование переменной упрощает ваш сценарий. Щелкните ниже для простого примера.

ons.bootstrap();
<head>
  <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
  <script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/js/onsenui.min.js"></script>
  <link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" rel="stylesheet" />
</head>

<body>
  <ons-sliding-menu main-page="main.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
  </ons-sliding-menu>
  <ons-template id="main.html">
    <ons-navigator var="myNavigator">
      <ons-toolbar>
        <div class="center">Page 1</div>
      </ons-toolbar>
      <br>
      <div style="text-align: center">
        <ons-button onclick="myNavigator.pushPage('page2.html')">Next Page</ons-button>
        <ons-button onclick="menu.toggleMenu()">Toggle Menu</ons-button>
      </div>
    </ons-navigator>
  </ons-template>
  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Page 2</div>
      </ons-toolbar>
      <br>
      <div style="text-align: center">
        <ons-button onclick="myNavigator.popPage()">Back</ons-button>
      </div>
    </ons-page>
  </ons-template>
  <ons-template id="menu.html">
    <ons-list>
      <ons-list-item modifier="tappable">
        First option
      </ons-list-item>
      <ons-list-item modifier="tappable">
        Second option
      </ons-list-item>
    </ons-list>
  </ons-template>
</body>

person Victor Stoddard    schedule 16.06.2016