I created an app in Eclipse using Intel's AppFramework, with HTML5 and everything else. In the browser it runs normal, in the normal android emulator runs; but when I export the APK, it does not show the menu, which in this case is a div footer, with some icons.
In APK (running right on mobile), only the first page of the app appears and nothing more. How do I resolve this?
<!DOCTYPE html>
<html>
<head>
<title> </title>
<!--
This template can be used for simple tab view application that has tabs at the bottom to switch views, for applications like Phone app, Facebook App or Instagram app.
-->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<style type="text/css">
.list-image {float: left;width: auto;height:50px}
.list-text {margin-left: auto;min-height:50px}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<!--Tab View Pages-->
<div class="panel" title="Home" id="page1" data-tab="tab1" selected="true">
<header>
<h1><b>Quem somos</b></h1>
</header>
<p>A & é uma ótima oportunidade para pessoas que querem ganhar um dinheiro a mais.
A empresa de venda social permite às mulheres ter seu próprio negócio de moda ao tornar-se uma estilista, a qual é responsável
pelas vendas das joias da marca. Os produtos são exclusivos, com características finas e delicadas, e elaborados por profissionais
com mais de 10 anos de mercado, que fazem com total zelo e dedicação a produção e finalização dos itens.
O papel da estilista é auxiliar a potencial compradora a escolher as joias da marca que mais realçarão sua beleza.<br />
A & disponibiliza ferramentas online para ajudar a estilista a conquistar clientes fiéis e oferece 50%
de desconto para adquirir os primeiros itens. <br />
Sem dúvidas, ser uma parceira de negócios da & traz
muitas vantagens para a mulher moderna!</p>
</div>
<!-- Tendências -->
<div class="panel" title="Favorites" id="page2" data-tab="tab2">
<header>
<h1>Tendências</h1>
</header>
<p>Esteja sempre linda, acompanhe nossas dicas e fique por dentro das tendências.</p> <br />
<ul class="list">
<li>
<img class="list-image" src="imagens/brincos2.jpg" />
<a href="#detailview">Agarradinho as orelhas</a>
</li>
<li>
<img class="list-image" src="imagens/caselux.jpg" />
<a href="#detailview2">Arrumando as malas</a>
</li>
<li>
<img class="list-image" src="imagens/colar.jpg" />
<a href="#colar">1001 colares</a>
</li>
</ul>
</div>
<div class="panel" title="Dicas" id="page3" data-tab="tab3">
<header>
<h1>Dicas de Moda</h1>
</header>
<p>Acompanhe nossas dicas e esteja sempre fashion</p>
<ul class="list">
<li><a href="#detailview">Anéis</a></li>
<li><a href="#detailview2">Brincos</a></li>
<li><a href="#detailview">Colares</a></li>
<li><a href="#detailview">Pedras</a></li>
</ul>
</div>
<div class="panel" title="Brincos" id="detailview" data-footer="none">
<img src="imagens/brincos.jpg" alt=" " style="max-width: 100%; border-image:round"/>
<p>
<br />
Agarradinhos às orelhas, os solitários e brincos curtos são ideais tanto para o dia como para a noite.<br />
E melhor ainda ficam bem em qualquer formato de rosto.<br />
Basta apenas escolher o modelo conforme a ocasião que você vai utilizar.
</p>
<br />
</div>
<div class="panel" title="Viajar" id="detailview2" data-footer="none">
<p>
<p style="text-align: center"> <b>Vai viajar?</b> </p>
<br />
Que bom, viajar é ótimo!<br />
Traz um ar novo a tudo, muda o ambiente, permitindo um novo olhar sobre as coisas.<br />
Para montar sua mala, em primeiro lugar, escolha as roupas que deseja levar.<br />
Depois escolha seus acessórios que possam fazer conjuntos entre si.<br />
Não esqueça que um dia pode ter até três programas, um programa matinal, um à tarde e outro, geralmente mais sofisticado, à noite.
</p>
<p>
E o mais importante é como você vai transportar suas joias dentro da mala ou bolsa.<br />
Pensando nisso a & lançou os <b>Cases Lux</b> para solucionar essa questão para voce.<br />
Se vai ser uma viajem curta invista no <b>Case Mini Lux</b>, prefeito para ser colocado na bolsa e garantir a segurança das joias.<br />
Mas, se sua viagem for durar uma semana ou mais aposte no Case Lux, tem compartimentos suficientes para várias opções.<br />
</p>
<img src="imagens/caselux.jpg" alt=" " style="max-width: 100%; border-image:round" />
<img src="imagens/caselux2.jpg" alt=" " style="max-width: 100%; border-image:round" />
<img src="imagens/caselux3.jpg" alt=" " style="max-width: 100%; border-image:round" />
</div>
<div class="panel" title="Agarre seu colar" id="colar" data-footer="none">
<p>
<p>
Um, dois, três, quatro colares longos de pedras.<br />
Isso mesmo você pode usá-los juntos para fazer parecer que é um só.<br />
Monte o seu com todas as opções que você mais gosta!<br />
</p>
<img src="imagens/colar3.jpg" alt=" " style="max-width: 100%; border-image:round" />
<img src="imagens/colar.jpg" alt=" " style="max-width: 100%; border-image:round" />
<img src="imagens/colar2.jpg" alt=" " style="max-width: 100%; border-image:round" />
</div>
</div>
<!--Footer with Tabs or Navigation bar -->
<div id="navbar">
<a href="#page1" id='tab1' class="icon home" data-transition="none">Home</a>
<a href="#page2" id='tab2' class="icon heart" data-transition="none">Tendências</a>
<a href="#page3" id='tab3' class="icon info" data-transition="none">Dicas</a>
<!-- <a href="#page4" id='tab4' class="icon user" data-transition="none">Profile</a>-->
</div>
</div>
</body>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="appframework/af.ui.css" />
<link rel="stylesheet" type="text/css" href="appframework/icons.css" />
<script type="text/javascript" charset="utf-8" src="appframework/appframework.ui.min.js"></script>
<script type="text/javascript">
function onDeviceReady() {
$.ui.launch();
intel.xdk.device.hideSplashScreen();
}
document.addEventListener("intel.xdk.device.ready", onDeviceReady, false);
</script>
<script type="text/javascript">
$.ui.autoLaunch = false;
$.ui.animateHeaders = false;
$(document).ready(function () {
$.ui.launch();
});
</script>
</html>
