在onsen-ui的不同页面上实现不同的滑动菜单 [英] implement differens sliding menu on different pages onsen-ui

问题描述

我试图为onsen-ui的每个不同页面加载一个不同的滑动菜单，但是我还没有找到如何做的方法，现在我有了以下内容:

//Initializing sliding-menu
<ons-sliding-menu 
    menu-page="menuCalendario.html" 
    main-page="calendarioGeneral.html" 
    side="left" var="menu" 
    type="reveal" 
    max-slide-distance="260px" 
    swipeable="true"
    id="ons_sliding_menu"
>
</ons-sliding-menu>


//menu 1
<ons-template id="menuCalendario.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">
                <ons-icon icon="circle"></ons-icon>
                Vista General
            </ons-list-item>
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioDetallado.html', {closeMenu: true})">
                <ons-icon icon="ion-funnel"></ons-icon>
                Vista detallada
            </ons-list-item>
        </ons-list>

        <ul class="list-group">
            <li class="list-group-item" onclick="popupPrendaCalendario()">
                <img src="http://www.mafepe.com/admin/resources/productos/fotos/211/Camisa-Prendas-Atemporales-Aneto-CAMCP.jpg" class="img-prenda-list">
                <div>
                    Camisa verde de cuadros Big jhon                
                </div>
            </li>
        </ul>

    </ons-page>
</ons-template>


//menu 2
<ons-template id="menuPerfilUsuario.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-plus"></ons-icon>
                Editar perfil
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>



//page 1
<ons-template id="calendarioGeneral.html">
    <ons-page id="foobar_calendarioGeneral">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Calendario general !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('usuarioPerfil.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>


//page 2
<ons-template id="usuarioPerfil.html">
    <ons-page id="foobar_usuarioPerfil">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Usuario perfil !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>

我需要在打开calendarioGeneral.html(第1页)时加载menuCalendario.html(菜单1)，并且在打开usuarioPerfil.html(第2页)时加载menuPerfilUsuario.html(菜单2)

谢谢您的帮助.

解决方案

当您切换到其他页面时，请使用menu.setMenuPage(pageUrl, [options]).在文档中解释: http://onsen.io/reference/ons- slide-menu.html#method-setMenuPage

I'm trying to load a different sliding menu for each different page onsen-ui, but I have not found how to do it, now I have the following:

//Initializing sliding-menu
<ons-sliding-menu 
    menu-page="menuCalendario.html" 
    main-page="calendarioGeneral.html" 
    side="left" var="menu" 
    type="reveal" 
    max-slide-distance="260px" 
    swipeable="true"
    id="ons_sliding_menu"
>
</ons-sliding-menu>


//menu 1
<ons-template id="menuCalendario.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">
                <ons-icon icon="circle"></ons-icon>
                Vista General
            </ons-list-item>
            <ons-list-item class="menu-item" onclick="menu.setMainPage('calendarioDetallado.html', {closeMenu: true})">
                <ons-icon icon="ion-funnel"></ons-icon>
                Vista detallada
            </ons-list-item>
        </ons-list>

        <ul class="list-group">
            <li class="list-group-item" onclick="popupPrendaCalendario()">
                <img src="http://www.mafepe.com/admin/resources/productos/fotos/211/Camisa-Prendas-Atemporales-Aneto-CAMCP.jpg" class="img-prenda-list">
                <div>
                    Camisa verde de cuadros Big jhon                
                </div>
            </li>
        </ul>

    </ons-page>
</ons-template>


//menu 2
<ons-template id="menuPerfilUsuario.html">
    <ons-page modifier="menu-page">
        <ons-toolbar modifier="transparent"></ons-toolbar>

        <!--lista 1 del panel-->
        <ons-list class="menu-list">
            <ons-list-item class="menu-item" onclick="menu.setMainPage('page1.html', {closeMenu: true})">
                <ons-icon icon="fa-plus"></ons-icon>
                Editar perfil
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>



//page 1
<ons-template id="calendarioGeneral.html">
    <ons-page id="foobar_calendarioGeneral">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Calendario general !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('usuarioPerfil.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>


//page 2
<ons-template id="usuarioPerfil.html">
    <ons-page id="foobar_usuarioPerfil">
        <div class="menu_principal"></div>
        <ons-toolbar-button onclick="menu.toggle()" style="position: relative; z-index: 100;">
            <ons-icon icon="ion-navicon" size="28px" fixed-width="false"></ons-icon>
        </ons-toolbar-button>
        <div >
            <br /><br /><br />
            Usuario perfil !!!;
            <button class="btn btn-warning btn-sm" onclick="menu.setMainPage('calendarioGeneral.html', {closeMenu: true})">Acceder</button> 
            <div id='calendar' style="width:100%;"></div>  
       </div> 
    </ons-page>
</ons-template>

I need that when calendarioGeneral.html (page 1) is open the menuCalendario.html (Menu 1) is loaded, and when usuarioPerfil.html (page 2) is open the menuPerfilUsuario.html (Menu 2) is loaded

Thank you for any help.

解决方案

Use menu.setMenuPage(pageUrl, [options]) for that when you change to a different page. Explained in the docs: http://onsen.io/reference/ons-sliding-menu.html#method-setMenuPage

这篇关于在onsen-ui的不同页面上实现不同的滑动菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！