Onsen UI - Using Slide-Menu just for specifics pag

2019-03-06 12:32发布

站内文章 / 后端开发
83 0 0

问题:

I'm building an app where I have the first 3 pages (login, register and password recover) without toolbar and sliding-menu. Inside of my app (logged pages) I want to provide the slide-menu, but I'm not achiving this goal. How can I do it?

Here my app:

index.html

<!DOCTYPE HTML>
<html lang="pt-br"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="components/loader.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script>
        ons.bootstrap();
        ons.disableAutoStatusBarFill();  // (Monaca enables StatusBar plugin by default)
    </script>
</head>
<body>  

    <ons-navigator var="appNowa">
        <ons-sliding-menu 
            var="app.slidingMenu" 
            menu-page="menu.html" 
            main-page="login.html" 
            side="right" 
            type="overlay" 
            max-slide-distance="200px"
            swipable="false">
        </ons-sliding-menu>        
    </ons-navigator>

    <ons-template id="login.html">
        <ons-page id="pageInicial">
            <div id="formLogin">
                <div class="subFormLogin">
                    <img id="logoInicial" src="images/logo-nowa-branco.png" />

                    <p class="login-chamada">Solicite exames clínicos diretamente pelo seu celular.</p>

                    <p><input maxlenght="5" type="text" id="login-email" name="login-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:center"></p>

                    <p><input type="password" id="login-senha" name="login-senha" class="text-input" placeholder="Senha" style="display:block;width:100%;text-align:center"></p>
                </div>

                <ons-button id="login-entrar" modifier="large">Entrar</ons-button>

                <div style="width=100%;text-align:center;font-size:14px;margin-top:20px;">
                    <a href="#" onclick="appNowa.pushPage('senha.html')" style="margin-right:15px">Esqueci minha senha</a> | 
                    <a href="#" onclick="appNowa.pushPage('registro.html')" style="margin-left:15px">Registrar-se</a>
                </div>        
            </div>

            <ons-modal var="loginModal">
                <ons-icon icon="ion-alert"></ons-icon>
                <p id="login-msg"></p>
            </ons-modal>        
        </ons-page>
    </ons-template>

    <ons-template id="senha.html">
        <ons-page id="pageSenha">
            <div id="formSenha">
                <div class="subFormSenha">
                    <img id="logoInicial" src="images/logo-nowa-branco.png" />

                    <p class="login-chamada">Informe seu e-mail para recuperar sua senha.</p>

                    <p><input type="email" id="usuario-email" name="login-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:center"></p>

                </div>

                <ons-button id="senha-enviar" modifier="large">Enviar</ons-button>
                <p></p>
                <ons-button id="senha-cancelar" modifier="large" onclick="appNowa.popPage()">Cancelar</ons-button>
            </div>

            <ons-modal var="senhaModal">
                <ons-icon icon="ion-alert"></ons-icon>
                <p id="senha-msg"></p>
            </ons-modal>
        </ons-page>
    </ons-template>

    <ons-template id="registro.html">
        <ons-page id="pageRegistro">
            <div id="formRegistro">
                <div class="subFormLogin">
                    <img id="logoInicial" src="images/logo-nowa-branco.png" />

                    <p class="login-chamada">Solicite exames clínicos diretamente pelo seu celular.</p>

                    <p><input type="text-input" id="registro-nome" name="registro-nome" class="text-input" placeholder="Nome Completo" style="display:block;width:100%;text-align:center"></p>

                    <p><input type="email" id="registro-email" name="registro-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:center"></p>

                    <p><input type="password" id="registro-senha" name="registro-senha" class="text-input" placeholder="Senha" style="display:block;width:100%;text-align:center"></p>
                </div>

                <ons-button id="registro-entrar" modifier="large">Registrar-se</ons-button>
                <p></p>
                <ons-button id="registro-entrar" modifier="large" onclick="appNowa.popPage();">Cancelar</ons-button>

                <p class="registro-termos">
                    <a onclick="window.open('http://appnowa.com/termos-de-uso-e-politica-de-privacidade/', '_blank', 'location=yes');">
                        Termos de Uso e Política de Privacidade
                    </a>
                </p>

            </div>
            <ons-modal var="registroModal">
                <ons-icon icon="ion-alert"></ons-icon>
                <p id="registro-msg"></p>
            </ons-modal>
        </ons-page>
    </ons-template>

    <ons-template id="menu.html">
    <ons-page id="pageMenuContexto" style="background-color:#6989CD">
        <ons-list>
            <ons-list-item
                modifier="tappable" 
                class="list-item-perfil"
                onclick="app.slidingMenu.setAbovePage('perfil.html', {closeMenu: true})"
                style="padding-top: 20px">
                <ons-row>
                    <ons-col>
                        <ons-row align="center">
                            <ons-col><div class="circle circle-perfil"></div></ons-col>
                        </ons-row>
                        <ons-row align="center">
                            <ons-col><div>Dalai Lama</div></ons-col>
                        </ons-row>
                    </ons-col>
                </ons-row>
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('dashboard.html', {closeMenu: true})">
                <i class="fa fa-home fa-lg" style="color: #FFF"></i>
                <span>&nbsp; Menu Principal</span>
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('exames-marcados.html', {closeMenu: true})">
                <i class="fa fa-table fa-lg" style="color: #FFF"></i>
                &nbsp; Exames Marcados
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('configuracoes.html', {closeMenu: true})">
                <i class="fa fa-gear fa-lg" style="color: #FFF"></i>
                &nbsp; Configurações
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('tutorial.html', {closeMenu: true})">
                <i class="fa fa-question-circle fa-lg" style="color: #FFF"></i>
                &nbsp; Como Usar
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('contato.html', {closeMenu: true})">
                <i class="fa fa-envelope fa-lg" style="color: #FFF"></i>
                &nbsp; Fale Conosco
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('sobre.html', {closeMenu: true})">
                <i class="fa fa-exclamation-circle fa-lg" style="color: #FFF"></i>
                &nbsp; Sobre
            </ons-list-item>

            <ons-list-item
                modifier="tappable" class="list__item__line-height"
                onclick="app.slidingMenu.setMainPage('sair.html', {closeMenu: true})">
                <i class="fa fa-power-off fa-lg" style="color: #FFF"></i>
                &nbsp; Sair
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>

<ons-template id="main.html">
    <ons-page id="pageMenuInicial">
        <ons-toolbar id="cabecalho">
             <div class="right">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center"><img src="images/logo-nowa-branco.png" class="logoHeader" /></div>
        </ons-toolbar>   

        <div id="menu-inicial">
            <ons-row align="center">
                <ons-col>
                    <div class="menu-item-area" onclick="app.slidingMenu.setMainPage('perfil.html')">
                        <div class="circle perfil-icone"></div>
                        <div class="menu-item">Perfil</div>
                    </div>
                </ons-col>
                <ons-col>
                    <div onclick="app.slidingMenu.setMainPage('exames.html')">
                        <div class="circle exame-icone"></div>
                        <div class="menu-item">Exames</div>
                    </div>
                </ons-col>

                <ons-col>
                    <div onclick="app.slidingMenu.setMainPage('alertas.html')">
                        <div class="circle alerta-icone"></div>
                        <div class="menu-item">Alertas</div>
                    </div>
                </ons-col>
            </ons-row>
            <p class="menu-inicial-separador"></p>
            <ons-row align="center">
                <ons-col>
                    <div onclick="app.slidingMenu.setMainPage('favoritos.html')">
                        <div class="circle favorito-icone"></div>
                        <div class="menu-item">Favoritos</div>
                    </div>
                </ons-col>
                <ons-col>
                    <div onclick="app.slidingMenu.setMainPage('labs.html')">
                        <div class="circle lab-icone"></div>
                        <div class="menu-item">Labs</div>
                    </div>
                </ons-col>
                <ons-col>
                    <div onclick="app.slidingMenu.setMainPage('rotas.html')">
                        <div class="circle rota-icone"></div>
                        <div class="menu-item">Rotas</div>
                    </div>
                </ons-col>
            </ons-row>
        </div>
    </ons-page>
</ons-template>

<ons-template id="perfil.html">
    <ons-page id="pagePerfil">
        <ons-toolbar id="cabecalho">
            <div class="left">
                <!--<ons-toolbar-button ng-click="appNowa.popPage()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>-->
            </div>
            <div class="right">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center"><img src="images/logo-nowa-branco.png" class="logoHeader" /></div>
        </ons-toolbar>

        <ons-list style="background:none">
            <ons-list-header class="perfil-list-header">Titular da Conta</ons-list-header>
            <ons-list-item 
                modifier="tappable"
                onclick="app.slidingMenu.setMainPage('perfil-detalhe.html')"
                style="background:#6989CD">
                <div class="circle-perfil-lista"></div>
                <span id="perfil-titular-nome">Dalai Lama</span>
            </ons-list-item>

            <ons-list-header class="perfil-list-header">Dependentes</ons-list-header>
            <ons-list-item 
                modifier="tappable"
                onclick="app.slidingMenu.setMainPage('perfil-detalhe.html')"
                style="background:#6989CD">
                <div class="circle-dependente-lista"></div>
                <span id="perfil-titular-nome">Mahatma Gandhi</span>
            </ons-list-item>
            <ons-list-item 
                modifier="tappable"
                onclick="app.slidingMenu.setMainPage('perfil-detalhe.html')"
                style="background:#6989CD">
                <div class="circle-semfoto-lista"></div>
                <span id="perfil-titular-nome">Adicionar Dependente</span>
            </ons-list-item>
        </ons-list>
    </ons-page>
</ons-template>

<ons-template id="perfil-detalhe.html">
    <ons-page id="pagePerfilDetalhe">
        <ons-toolbar id="cabecalho">
            <div class="left">
                <!--<ons-toolbar-button ng-click="appNowa.popPage()"><ons-icon icon="fa-chevron-left"></ons-icon></ons-toolbar-button>-->
            </div>
            <div class="right">
                <ons-toolbar-button ng-click="app.slidingMenu.toggleMenu()"><ons-icon icon="bars"></ons-icon></ons-toolbar-button>
            </div>
            <div class="center"><img src="images/logo-nowa-branco.png" class="logoHeader" /></div>
        </ons-toolbar>

        <ons-row>
            <ons-col>
                <ons-row style="padding-top:15px">
                    <ons-col align="center"><div class="circle circle-perfil"></div></ons-col>
                </ons-row>
                <ons-row style="padding-top:10px">
                    <ons-col align="center" style="font-weight:bold;">Bill Gates</ons-col>
                </ons-row>
                <ons-row style="padding:15px 0px 5px 0px;">
                     <ons-col align="center">
                        <ons-button id="registro-entrar">Solicitar Exame</ons-button>
                    </ons-col>
                </ons-row>
            </ons-col>
        </ons-row>

        <div id="form-perfil-detalhe">
            <p><input maxlength="40" type="text-input" id="usuario-nome" class="text-input" placeholder="Nome Completo" style="display:block;width:100%;text-align:left"></p>

            <p><input maxlength="40" type="email" id="usuario-email" class="text-input" placeholder="E-mail" style="display:block;width:100%;text-align:left"></p>

            <p>
                <select id="usuario-sexo" class="text-input" style="width:100%">
                    <option value="">Sexo</option>
                    <option value="M">Masculino</option>
                    <option value="F">Feminino</option>
                </select>    
            </p>

            <p><input type="text-input" id="usuario-nasc" class="text-input" placeholder="Data de Nascimento" style="width:100%"></p>

            <p><input type="text-input" id="usuario-rg" class="text-input" placeholder="RG" style="width:100%"></p>

            <p><input type="text-input" id="usuario-cpf" class="text-input" placeholder="CPF" style="width:100%"></p>

            <p><input type="tel" id="usuario-cel" class="text-input" placeholder="Telefone Celular" style="width:100%"></p>

            <p>
                <select id="usuario-convenio" class="text-input" style="width:100%">
                    <option value="0">Convênio</option>
                    <option value="-1">Não tenho convênio</option>
                    <option value="1">UNIMED</option>
                </select>
            </p>

            <p>
                <select id="usuario-plano" class="text-input" style="width:100%">
                    <option value="0">Plano</option>
                    <option value="1">UNIMED Básico</option>
                </select>
            </p>

            <p><input type="text-input" id="usuario-carteira" class="text-input" placeholder="Número da carteirinha (convênio)" style="width:100%"></p>

            <p><input type="text-input" id="usuario-cep" class="text-input" placeholder="CEP" style="width:100%"></p>

            <ons-row>
                <ons-col width="70%">
                    <input maxlength="40" type="text-input" id="usuario-endereco" class="text-input" placeholder="Endereço">
                </ons-col>
                <ons-col width="30%">
                    <input type="number" id="usuario-endereco-numero" class="text-input" placeholder="Nº">
                </ons-col>
            </ons-row>

            <p><input maxlength="20" type="text-input" id="usuario-complemento" class="text-input" placeholder="Complemento" style="width:100%"></p>

            <p><input maxlength="20" type="text-input" id="usuario-bairro" class="text-input" placeholder="Bairro" style="width:100%"></p>

            <p><input maxlength="20" type="text-input" id="usuario-cidade" class="text-input" placeholder="Cidade" style="width:100%"></p>

            <p>
                <select id="usuario-uf" class="text-input" style="width:100%">
                    <option value="0">Estado</option>
                    <option value="AC">AC</option>
                    <option value="AL">AL</option>
                    <option value="AP">AP</option>
                    <option value="AM">AM</option>
                    <option value="BA">BA</option>
                    <option value="CE">CE</option>
                    <option value="DF">DF</option>
                    <option value="ES">ES</option>
                    <option value="GO">GO</option>
                    <option value="MA">MA</option>
                    <option value="MT">MT</option>
                    <option value="MS">MS</option>
                    <option value="MG">MG</option>
                    <option value="PA">PA</option>
                    <option value="PB">PB</option>
                    <option value="PR">PR</option>
                    <option value="PE">PE</option>
                    <option value="PI">PI</option>
                    <option value="RJ">RJ</option>
                    <option value="RN">RN</option>
                    <option value="RS">RS</option>
                    <option value="RO">RO</option>
                    <option value="RR">RR</option>
                    <option value="SC">SC</option>
                    <option value="SP">SP</option>
                    <option value="SE">SE</option>
                    <option value="TO">TO</option>
                </select>    
            </p>

            <ons-button id="usuario-salvar" modifier="large">Salvar</ons-button>
        </div>

        <ons-modal var="perfilDetalheModal">
            <ons-icon icon="ion-alert"></ons-icon>
            <p id="perfil-msg"></p>
        </ons-modal>
        <ons-modal var="perfilDetalheSucessoModal">
            <ons-icon icon="ion-checkmark"></ons-icon>
            <p id="perfil-sucesso-msg"></p>
        </ons-modal>
    </ons-page>
</ons-template>

    <script src="js/jquery.mask.min.js"></script>
    <script src="js/date.js"></script>
    <script src="js/jquery.ba-outside-events.min.js"></script>
    <script src="js/jquery.plugin.min.js" type="text/javascript"></script> 
    <script src="js/jquery.maxlength.min.js" type="text/javascript"></script>
    <script src="js/ap.js"></script>
</body>
</html>

dashboard.html

<ons-navigator var="slideNav" page="main.html"></ons-navigator>

EDIT - UPDATED: I did the solution provided by @Vu. It's working, but I'm facing the issue below:

Normal Screen:

Slide-Menu opened in LG Optimus G (Android 4.1.2 version)

Slide-menu opened in Moto E (Android 4.4.4 version) - the main page disapears

回答1:

I can think of one way: 1. Have the ons-navigator loads login.html, register.html and password-recover.html (your first 3 pages) 2. Once logged in, push onto the navigator a page that loads the ons-sliding-menu

<ons-navigator title="Navigator" var="appNowa" page="login.html">

The 3 templates you have should work with that navigator

Then, once you logged in... I added an onclick on the login button to demonstrate:

<ons-button id="login-entrar" modifier="large" onclick="appNowa.pushPage('mainPage.html')">Entrar</ons-button>

That would load the mainPage.html.

mainPage.html

<ons-template id="mainPage.html">
   <ons-sliding-menu 
        var="app.slidingMenu" 
        menu-page="menu.html" 
        main-page="main.html" 
        side="right" 
        type="overlay" 
        max-slide-distance="200px"
        swipable="false">
    </ons-sliding-menu>          
</ons-template>

See the whole thing at: 'http://codepen.io/vnguyen972/pen/ghKcB'



回答2:

Im used multiple page, and add sliding-menu-ignore="true"

<ons-page sliding-menu-ignore="true">

<ons-toolbar> 
<div class="center">Login</div>
</ons-toolbar>

<div class="main-image-wrapper">
<i class="fa fa-sign-in main-image"></i>
</div>
<input type="email" class="text-input--underbar" placeholder="Email" value="">
<input type="password" type="text" class="text-input--underbar" placeholder="Password" value="">
<br>
<button class="button login-button">Log in</button>



标签： onsen-ui
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~