Paginas extra - CGastrell/phonegap GitHub Wiki
En el ejercicio prueba5 vimos que por cada pagina incluimos un <footer> con vinculos a todas las paginas:
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a href="#home" data-icon="home" class="">Home</a></li>
<li><a href="#device" data-icon="star" class="">Device</a></li>
<li><a href="#vibration" data-icon="star" class="">Vibration</a></li>
<li><a href="#battery" data-icon="star" class="ui-btn-active ui-state-persist">Battery</a></li>
</ul>
</div>
</div>Estos vinculos se muestran al pie y fuimos asignando las clases ui-btn-active ui-state-persist al vinculo que correspondia a la pagina actual.
No todas las paginas deben poder accederse desde un vinculo visible, algunas solo responderan a ciertos pedidos.
Para probar esto, vamos a agregar una pagina para mostrar detalle de los eventos de bateria. Esta pagina no tiene por que estar en la navegacion principal, solo la accederemos desde el listado de eventos de bateria.
Agregar despues de la ultima pagina (id=battery) nuestra pagina de detalles:
<div data-role="page" id="batteryEventItem">
<div data-role="header">
<a href="#" class="ui-btn" data-rel="back">Volver</a>
<h1>Plugin Dashboard</h1>
</div>
<div data-role="content">
<div>
<h3 style="text-align:center">Detalle de evento de bateria</h3>
<p class="hora">
<strong>Hora</strong><br />
<span></span>
</p>
<p class="nivel">
<strong>Nivel de bateria</strong><br />
<span></span>
</p>
<p class="estado">
<strong>Estado</strong><br />
<span></span>
</p>
</div>
</div>
</div>Y modificaremos el evento batterystatus para que al agregar los eventos incluya un vinculo que nos lleve a esta pagina:
var color = evt.isPlugged ? 'green' : 'orange';
$('#batterylevel')
.addClass('ui-li-static')
.css('color','white')
.css('text-align','center')
.css('width', evt.level + "%")
.css('background-color', color)
.text(evt.level + "%");
navigator.vibrate(200);
//hasta aqui solo agregabamos un <li>
var status = $('<li />');
//creamos un vinculo <a>
var link = $('<a href="#batteryEventItem" data-transition="slide" class="batteryEvent" />');
//adosamos un objeto (ver jQuery.data)
//con copia de los datos del evento
link.data('batteryEvent',{
isPlugged: evt.isPlugged,
level: evt.level,
time: new Date()
});
//tomamos la hora y armamos el vinculo
var time = new Date().toTimeString().split(" ")[0];
link.text( time + " " + (evt.isPlugged ? "Cargando..." : "Desenchufado"));
//ahora damos funcion al 'click' del vinculo
link.on('click', function(e){
//al hacer click, obtenemos el objeto que
//habiamos guardado en el vinculo
var data = $(this).data('batteryEvent');
//luego actualizamos la pagina
$('span', '#batteryEventItem p.hora').text(data.time);
$('span', '#batteryEventItem p.nivel').text(data.level + "%");
$('span', '#batteryEventItem p.estado').text(evt.isPlugged ? "Enchufado" : "Desenchufado");
});
//ubicamos el vinculo dentro del <li>
status.append(link);
//lo agregamos a la lista y actualizamos
$('ul#batteryevents').append(status).listview('refresh');