<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<link href="css/jquery.mobile-1.4.4.min.css" rel="stylesheet" type="text/css">
<link href="css/jquery.mobile.theme-1.4.4.min.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/estilos.css" rel="stylesheet" type="text/css">
</head>
<body onload="onBodyLoad()">
<!-- esta es la página de entrada: el listado de contactos-->
<div data-role="page" id="home" data-theme="a" >
<div data-position="fixed" data-role="header" data-theme="a">
<a href="index.html" data-icon="back" data-theme="a" rel="external" data-ajax="false">Atras</a>
<h5>Mi Agenda</h5>
</div>
<!-- <div data-role="header">
<div class="ui-btn-left">
<a href="#form" data-role="button" data-inline="true" data-icon="plus" data-iconpos="notext">Nuevo</a>
</div>
<h1>Mi Agenda</h1>
<div class="ui-btn-right">
<a href="#ayuda" data-role="button" data-inline="true" data-icon="info" data-iconpos="notext">Ayuda</a>
</div>
</div> -->
<div data-role="content" data-theme="a">
<img src="imgs/headerapp.jpg">
<div class="ui-responsive ui-mini ui-body ui-body-d">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<a href="#form" data-role="button" data-inline="true" data-icon="plus">Agregar Contacto</a>
<a href="#ayuda" data-role="button" data-inline="true" data-icon="info">Información de uso</a>
</div><hr />
<div data-role="collapsible-set">
<div data-role="collapsible" id="lista_familia">
<h3>Familia</h3>
<ul data-role="listview" data-inset="true" data-split-icon="edit" >
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" id="lista_trabajo">
<h3>Trabajo</h3>
<ul data-role="listview" data-inset="true" data-split-icon="edit">
</ul>
</div>
<div data-role="collapsible" data-collapsed="true" id="lista_amigo">
<h3>Amigos</h3>
<ul data-role="listview" data-inset="true" data-split-icon="edit">
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- esta página es la de detalle-->
<div data-role="page" id="detalle" data-theme="a" >
<div data-position="fixed" data-role="header" data-theme="a">
<a href="#home" data-icon="back" data-theme="a" rel="external" data-ajax="false">Atras</a>
<h5>Mi Agenda</h5>
</div>
<div data-role="content" data-theme="a">
<img src="imgs/headerapp.jpg">
<div class="ui-responsive ui-mini ui-body ui-body-d">
<div class="caja_blanca">
<p id="categoria">Familia</p>
<div id="foto"><img id="foto_img" src="assets/no_foto.png"/></div>
</div>
<div class="caja_blanca">
<h3 id="nombre">Jorge G. V.</h3>
<div ><span id="num_tel">45645674567</span> <a href="#" data-role="button" data-inline="true" data-icon="phone" data-iconpos="notext" id="telefono">Llamar</a></div>
<div id="email"><span id="label_mail">email@dom.es</span> <a href="#" data-role="button" data-inline="true" data-icon="mail" data-iconpos="notext">Llamar</a></div>
</div>
</div></div>
<div data-ajax="false" data-position="fixed" data-role="footer" data-theme="a">
<h5>Mi Agenda</h5>
<!-- <a href="#menu-panel" class="ui-btn ui-corner-all ui-btn-inline ui-mini footer-button-right ui-btn-icon-right ui-icon-carat-r">Menu</a> -->
</div>
<div data-role="panel" id="menu-panel" data-display="overlay" data-position="right" class="ui-panel-peru nav-glyphish-example">
<ul data-role="listview" class="nav-glyphish-example">
<li><a href="index.html" rel="external" data-ajax="false" id="homeini" data-icon="custom"></a></li>
<li><a href="peru.html" rel="external" data-ajax="false" id="productos" data-icon="custom"></a></li>
<li><a href="calcperu.html" rel="external" data-ajax="false" id="calc" data-icon="custom"></a></li>
<li><a href="cultperu.html" rel="external" data-ajax="false" id="culti" data-icon="custom"></a></li>
<li><a href="informeperu.html" rel="external" data-ajax="false" id="informe" data-icon="custom" class="ui-state-disabled"></a></li>
</ul>
</div>
</div>
<!--página de edición-->
<div data-role="page" id="form" data-theme="a" >
<div data-position="fixed" data-role="header" data-theme="a">
<a href="#home" data-icon="back" data-theme="a" rel="external" data-ajax="false">Atras</a>
<h5>Mi Agenda</h5>
</div>
<div data-role="content" data-theme="a">
<img src="imgs/headerapp.jpg">
<div class="ui-responsive ui-mini ui-body ui-body-d">
<div data-role="fieldcontain">
<input type="text" name="ti_nombre" id="ti_nombre" value="" placeholder="nombre" />
</div>
<div data-role="fieldcontain">
<input type="text" name="ti_apellidos" id="ti_apellidos" value="" placeholder="apellidos" />
</div>
<div data-role="fieldcontain">
<input type="text" name="ti_telefono" id="ti_telefono" value="" placeholder="teléfono" />
</div>
<div data-role="fieldcontain">
<input type="text" name="ti_mail" id="ti_mail" value="" placeholder="email" />
</div>
<div id="cajaCategorias">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="categoriaSel" id="cat_familia" value="familia" />
<label for="cat_familia">Familia</label>
<input type="radio" name="categoriaSel" id="cat_trabajo" value="trabajo" />
<label for="cat_trabajo">Trabajo</label>
<input type="radio" name="categoriaSel" id="cat_amigo" value="amigo" />
<label for="cat_amigo">Amigo</label>
</fieldset>
</div>
</div>
<button id="b_guardar">Guardar</button>
</div>
</div>
</div>
<!-- formulario de envío de mail_page-->
<div data-role="page" id="mail_page" data-theme="a" >
<div data-position="fixed" data-role="header" data-theme="a">
<a href="#home" data-icon="back" data-theme="a" rel="external" data-ajax="false">Atras</a>
<h5>Mi Agenda</h5>
</div>
<div data-role="content" data-theme="a">
<img src="imgs/headerapp.jpg">
<div class="ui-responsive ui-mini ui-body ui-body-d">
<div data-role="fieldcontain">
<input type="text" name="ti_asunto" id="ti_asunto" value="" placeholder="asunto" />
</div>
<div data-role="fieldcontain">
<textarea cols="40" rows="8" name="ta_body" id="ta_body" placeholder="este es el cuerpo del mensaje..."></textarea>
</div>
<button id="b_enviar">Enviar</button>
</div>
</div>
</div>
<!--página de ayuda-->
<div data-role="page" id="ayuda" data-theme="a" >
<div data-position="fixed" data-role="header" data-theme="a">
<a href="#home" data-icon="back" data-theme="a" rel="external" data-ajax="false">Atras</a>
<h5>Mi Agenda</h5>
</div>
<div data-role="content" data-theme="a">
<img src="imgs/headerapp.jpg">
<div class="ui-responsive ui-mini ui-body ui-body-d">
<ul id="listaAyuda">
<li>Usa el + para añadir contactos</li>
<li>Con el segundo botón del header podrás añadir contactos de tu agenda</li>
<li>Selecciona la categoría de contactos y podrás verlos</li>
<li>Haz click en el ojo para ver los detalles del contacto y para actuar sobre él</li>
<li>Haz click sobre la foto del contacto para cambiarla</li>
<li>Haz click sobre el botón del teléfono y del mail para actuar</li>
</ul>
</div>
</div>
</div>
</body>
</html>
html de agenda phonegap que junto a main.js generan agenda personalizada dentro del sistema
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.