Phonon framework configuração basica

app.js

phonon.options({ // iniciando as opções
	navigator: {
		defaultPage: 'principal' // definindo a tela inicial da aplicação
	},
	i18n: null // definindo que não iremos utilizar internacionalização (multi idiomas)
});

phonon.navigator().on({page: 'principal'}); // definindo a tela 'principal' da aplicação

phonon.navigator().on({page: 'pedido', readyDelay: 1, preventClose: true }, function( atividade ){ 

	/* para guardar as ações realizadas e compartilhar 
	com outras atividades (onCreate, onReady, onClose e outras veja http://phonon.quarkdev.com/docs/navigator) 
	*/
	var acao = null; 
	
	
	// uma função para facilitar a reutilização ao confirmar e cancelar pedido
    var naAcao = function( evt ){
        var target = evt.target;
        acao = 'ok';
		
		// verificando se o botão o atributo do botão possui valor 'confirmar'
        if( target.getAttribute('data-pedido') === 'confirmar' ){
			
			// exibe o alerta
            phonon.alert( "Obrigado por realizar seu pedido", "Pedido realizado" );

        }else{
			// exibe o alerta
            phonon.alert( "Cancelamento realizado", "Pedido cancelado" );
        }
    };


	atividade.onCreate(function(){ // quando a tela for iniciada
	
		document.querySelector( '.confirmar' ).on( 'tap', naAcao ); // quando clicar em pedido
		
		document.querySelector( '.cancelar' ).on( 'tap', naAcao ); // quando clicar em cancelar pedido
	});
	
	
	// sempre que a tela for fechada
	atividade.onClose(function( self ){
	
		if( acao !== null ){
			self.close();
		}else{
			phonon.alert( "Você precisa fechar o pedido ou cancela-lo.", "Ação necessária" );
		}
	
	});
	
	
	// sempre que o hash da URL mudar
	atividade.onHashChanged(function( var_sabor_img, var_sabor ){
		
		// alterando o nome da pizza
        document.querySelector( '.pizza' ).textContent = var_sabor;
		
		// alterando a imagem da pizza
        document.querySelector( 'img' ).src = "img/"+ var_sabor_img +".jpg";
    });
	
	
	// sempre que o app for fechado
	atividade.onHidden(function(){
		acao = null; // removendo o valor da alção
	});

}); // definindo a tela 'pedido' da aplicação

phonon.navigator().start(); // iniciando a aplicação