-
Notifications
You must be signed in to change notification settings - Fork 1
iRec revision backbutton
En la pagina de revision
tenemos un boton para volver:
<div data-role="header">
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
<h1>Revision</h1>
</div>
El boton es el primer <a>
que aparece en el <div data-role="header">
. No tiene nada que lo identifique, asi que vamos a tener que usar algun tipo de selector que nos devuelva univocamente ese boton. Bien podriamos agregarle un id
para poder ubicarlo, pero vamos a aprovechar para ver una manera de seleccionar el elemento con jQuery sin tener que agregarle un id
.
Ahora bien, como con todas las inicializaciones de los botones, vamos a asignarle la funcionalidad en el handler del evento pagecreate
de la pagina #revision
. En este momento debemos tener algo parecido a esto:
$('#revision').on('pagecreate', function(evt){
console.log('pagecreate on revision');
//inicializacion de botones
$('#play').click(function(e) {
e.preventDefault();
revisionApi.play();
});
$('#pausa').click(function(e){
e.preventDefault();
revisionApi.pausa();
});
//inicializacion de indicadores de tiempo
revisionApi.currentTime = $('#currentTime').text("00:00");
});
Tenemos la inicializacion de los botones de play
y pausa
y la configuracion inicial del reloj. Asi que, dentro de este handler vamos a agregar la inicializacion del boton de volver. Para seleccionarlo correctamente vamos a usar un selector por atributos.
A esta altura sabemos que podemos usar jQuery para seleccionar un elemento:
- por clase:
$('.nombre_de_clase')
nos devolvera todos los elementos que tengan esa clase - por id:
$('#id_del_elemento')
nos devuelve el primer elemento con elid
provisto (no deberia haber mas de uno con el mismoid
)
Pero en la documentacion de selectores de jQuery vemos tambien que podemos seleccionar un elemento por sus atributos. Como? Veamos nuestro boton para volver en HTML
:
<a href="#home" data-role="back" class="ui-nodisc-icon ui-alt-icon ui-btn ui-shadow ui-corner-all ui-icon-arrow-l ui-btn-icon-notext ui-btn-inline"></a>
El elemento tiene varios atributos:
- class: define las clases CSS que tiene asociadas
- href: a donde apunta el vinculo (en este caso es un
<a>
) - data-role: un atributo que usa jQueryMobile para identificar y asignar funcionalidad a los botones
Para seleccionar el elemento a traves de sus atributos la nomenclatura es la siguiente:
//atentos a la apertura y cierre de comillas simples y dobles
$('a[atributo="valor_del_atributo"]');
En nuestro caso vamos a usar el atributo href
, entonces nuestro selector se vera asi:
$('a[href="#home"]');
Para que puedan probarlo, vamos a comentar en el archivo js/index.js
todas las inicializaciones. Esto es, encuentren donde empiezan las inicializaciones (las llamadas del tipo $('#guia-list')...
) y comentenlas anteponiendo un /*
y cerrando el comentario cuando terminan estas llamadas con un */
. De esta forma van a poder correr la aplicacion en el browser sin que tire errores y podemos ver como seleccionar estos elementos.
Ahora abran index.html
en el browser, deberian tener la funcionalidad basica de navegacion con los contenidos de ejemplo. Abran la consola y escriban el selector que pusimos arriba, deberia devolverles un array de 4 elementos que corresponden al selector. Por que 4? Porque tenemos un boton con ese href
en 4 de nuestras paginas.
Pero solo queremos que nos devuelva el boton que corresponde a la pagina #revision
, entonces podemos usar el segundo parametro de seleccion en jQuery: context. En resumidas palabras, el context es una manera de acotar donde vamos a buscar el elemento, en nuestro caso sera la pagina #revision
:
$('a[href="#home"]', '#revision');
Vuelvan a probar este selector ahora y deberia devolverles solo uno de los elementos <a>
.
Ahora que tenemos el boton que queriamos entonces podemos intervenirlo para que funcione como queremos:
- que no vaya directamente a la pagina
#home
- que verifique el estado de la revision y si esta
isPlaying
, que detenga la reproduccion - que resetee el estado de la revision
- finalmente que nos lleve a la pagina
#home
Entonces, dentro del handler de pagecreate
agregamos primero nuestro selector y usamos on()
para capturar el evento click
:
$('a[href="#home"]', '#revision').on('click', function(evt) {
// nuestro codigo aca
});
Dentro vamos a cancelar el funcionamiento normal del evento y agregar la llamada a revisionApi
para que detenga el funcionamiento y haga un reset:
$('a[href="#home"]', '#revision').on('click', function(evt) {
evt.preventDefault(); // cancelar evento
if(revisionApi.isPlaying) {
revisionApi.pausa(); // <-- luego cambiaremos por stop
revisionApi.reset();
}
//ir a #home
$.mobile.navigate('#home');
});
Probar en el browser y luego, descomentando el codigo de inicializacion, en el dispositivo.
Vamos a repetir un procedimiento similar en #interview
- Repaso y conceptos basicos
- Ejercicios para repasar
- Problematica de desarrollo mobile
- Phonegap
- Requerimientos e instalacion
- Phonegap CLI
- [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
- Plugins
- Hello world
- Estructura de un proyecto Phonegap
- Plugin Device
- Debugging
- Incorporando un framework CSS
- Plugin Vibration
- Sumando partes
- Plugin Battery Status
- Un poco de jQuery
- jQuery Mobile
- Navegacion
- Plugin Dashboard
- Revision de Plugin Dashboard
- Paginas extra
- ToDo
- Persistencia
- ToDo Persistente
- Plugin Camera
- Opciones de camara
- App Mi Galeria
- Revision de Galeria
- Plugin File
- Escribir y leer texto
- Escribir archivos binarios
- Guardando fotos
- Debugger: weinre
- Inspeccionar con weinre
- Phonegap Developer App
- Refactor de apps
- Plugin Media
- Pruebas con audio
- Control y monitoreo de audio
- Encapsular play/pausa
- Hacks
- Formato de tiempos
- Grabar y reproducir
- Proyecto Integrador
- Revision de interfaz
- Interfaz basica
- Entrevista: modelo
- Funcionalidad: revision
- Seleccion de framework
- iRec: navegacion
- iRec: fileApi
- iRec: guias
- iRec: entrevistas
- iRec: recordApi
- iRec: helpers
- iRec: mediaApi
- iRec: inicializar paginas
- iRec: refactor
- iRec: mediaApi refactor
- iRec: recordApi refactor
- iRec: helpers
- iRec: guias.js
- iRec: entrevistas.js
- iRec: crear guias
- iRec: re-inicializando
- iRec: re-ordenando
- iRec: pendientes
- iRec: reporte ux
- iRec:revision: volver
- iRec:entrevista: volver
- iRec:revision: cambios
- iRec:revision: stop
- iRec:revision: Rew 10"
- iRec:revision: tag Go
- iRec: limpieza
- Firma de apps
- Android
- Generacion de key
- Firma de apk
- Alineacion de zip
- Firmar con Phonegap
- iOS
- Detalles finales
- Config.xml
- Iconos
- Splash