0
툴바 및 슬라이딩 메뉴가없는 처음 3 페이지 (로그인, 등록 및 비밀번호 복구)가있는 앱을 만들고 있습니다. 내 응용 프로그램 (로그인 한 페이지) 안에는 슬라이드 메뉴를 제공하고 싶지만이 목표는 달성하지 못했습니다. 어떻게해야합니까? 여기Onsen UI - 특정 페이지에만 Slide-Menu 사용
내 응용 프로그램 :
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 옵티머스 G (안드로이드 4.1.2 버전)에서 열린
슬라이드 메뉴
슬라이드 메뉴가 Moto E (Android 4.4.4 버전) - mai n 개의 페이지 disapears
@VuNguyven 감사를 추가 많이! 그것은 완벽하고 내 문제를 해결합니다. 하지만 지금은 문제에 직면하고 있습니다. 필자의 Moto E (4.4.4v) 전화에서 슬라이드 메뉴를 테스트 해 본다. 그것은 내 LG Optimius G (4.1.2v) 장치에서 발생하지 않습니다. 스크린 샷으로 편집 된 게시물을 확인하십시오. –
굉장! 너의 새로운 문제는 이상해.어떻게 될지 모르겠습니다. 슬라이딩 메뉴가있는 응용 프로그램 (오른쪽)도 있고 4.4.4에서 잘 작동합니다. 어쩌면 온천 개발자가 (아마도이 문제를 매일 읽는다면) –
codepen이 작동하지 않을 수도 있습니다. 저기 좀 봐 주실 래요? –