Пользовательский интерфейс Onsen - Использование Slide-Menu только для конкретных страниц
Я создаю приложение, в котором у меня есть первые 3 страницы (логин, регистрация и восстановление пароля) без панели инструментов и скользящего меню. Внутри моего приложения (зарегистрированные страницы) я хочу предоставить слайд-меню, но я не достигаю этой цели. Как мне это сделать?
Вот мое приложение:
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> 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>
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>
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>
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>
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>
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>
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>
РЕДАКТИРОВАТЬ - ОБНОВЛЕНО: Я сделал решение, предоставленное @Vu. Это работает, но я сталкиваюсь с проблемой ниже:
Нормальный экран:
Слайд-меню открылось в LG Optimus G (версия Android 4.1.2)
Слайд-меню открывается в Moto E (версия Android 4.4.4) - главная страница исчезает