transition-test.js

//Os eventos 'pageinit' e 'pagecreate' são chamados 
//quando exibimos uma página pela primeira vez...

//vamos criar um objeto chamado app
var app = {};

$(document).bind('pageinit', function (ev) {
  //toda vez que chamarmos esse novo evento
	//checaremos se a propriedade 'loaded'
	//existe e é verdadeira. Caso contrário instanciamos
	//um novo objeto 'App'

	if (!app.loaded) {
		console.log('NEW app')
		app = new App();
		app.init();
	}

	console.log('pageinit')
});

$(document).bind('pagecreate', function (ev) {
	console.log('pagecreate')
})

//O objeto 'App' tem um método 'init'
//e 'setEvents'
var App = function () {
	return {
		init: function () {
			//quando chamamos o construtor setamos 'loaded' como true
			//evitando instaciar outro objeto

			//chamamos 'setEvents'...
			this.loaded = true;
			this.setEvents();
		},

		setEvents: function () {
			//setamos eventos em duas páginas diferentes...

			//na primeira página, no 'tap' chamamos a segunda página
			//usando $.mobile.changePage passando a hash '#segunda'	
			//e passando um objeto com as opções. Nesse caso o objeto tem 
			//a propriedade 'transition' setada como 'pop'
			$('#primeira').on('tap', function (ev) {
				ev.originalEvent.stopPropagation();
				$.mobile.changePage('#segunda', {
					transition: 'pop'
				});
			});

			//na segunda página usamos o 'swipeleft', (deslizar o dedo para a esquerda)
			//para voltar para a primeira página...
			$('#segunda').on('swipeleft', function (ev) {
				$.mobile.changePage('#terceira', {
					transition: 'slide'
				});
			});

			//e usamos o 'swiperight' para avançar para a terceira página...
			$('#segunda').on('swiperight', function () {
				$.mobile.changePage('#primeira', {
					transition: 'slide'
				});
			});
		}
	}
}