онсэн UI меню

раздвижные У меня есть Menue вроде этого:онсэн UI меню

<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>

После перехода к "ссылке/к/некоторые/другие/page.html", у меня есть операция $scope.myNavigator.pushPage('anotherpage', {});

. Это также работает. Но после того, как я выполнил операцию , я больше не могу использовать меню. Я должен сделать 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>

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

источник

2014-11-25 publicDisplay

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

Содержимое, находящееся в навигаторе, будет заменено другой страницей при нажатии, поэтому скользящее меню в вашем примере исчезнет, когда вы используете 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

источник

2014-11-26 04:38:33

Спасибо. Это работает для меню, но приводит к некоторым другим проблемам ... Например: В моем угловом коде я установил несколько стилей для кнопок и так далее. Эти элементы больше не найдены. Пример команды: document.getElementById ('btn_apply') – publicDisplay

Но в данной ссылке не отображается меню – RezaRahmati

Вот рабочее раздвижное меню в онсэне UI. Два изменения, которые вы должны сделать, это поместить элемент 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>

источник

2016-06-16 00:29:04

онсэн UI меню

ответ

Смежные вопросы