mariochavez · June 19, 2010 15:40
diff --git a/jqtouch-demo.js b/jqtouch-demo.js
 <!doctype html>
 <html>
 	<head>
 		<meta charset="UTF-8" />
 		<title>Aplicacion de demo</title>
 		<style type="text/css" media="screen">@import "./jqtouch/jqtouch.min.css";</style>
 		<style type="text/css" media="screen">@import "./themes/jqt/theme.min.css";</style>

 		<script src="./jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="./jqtouch/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
 		<script src="./scripts/jquery.nano.js" type="text/javascript" charset="utf-8"></script>

 		<script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                icon: 'jqtouch.png',
                addGlossToIcon: false,
                startupScreen: 'jqt_startup.png',
                statusBar: 'black',
                preloadImages: [
                    './themes/jqt/img/back_button.png',
                    './themes/jqt/img/back_button_clicked.png',
                    './themes/jqt/img/button_clicked.png',
                    './themes/jqt/img/grayButton.png',
                    './themes/jqt/img/whiteButton.png',
                    './themes/jqt/img/loading.gif'
                    ]
            });
 			
 			$(function(){
 				$('#city').bind('pageAnimationEnd', function(e, info) {
 					if (!$(this).data('loaded')) {
 						$(this).append('<div class="loading">Loading</div>');
 						$.getJSON('http://search.twitter.com/search.json?q=jqtouch&callback=?', 
 							function(data) {
 								$(this).parent().data('loaded', true);
 								$('.loading').remove();
 							}
 						);
 					}
 				});

 				$('#cities').bind('pageAnimationEnd', function(e, info) {
 					if(!$(this).data('loaded')) {
 						$(this).append('<div class="loading"><img src="./themes/jqt/img/loading.gif" /> Cargando datos</div>');
 						$.getJSON('http://garitas.heroku.com/ciudades?callback=?',
 							function(data) {
 								var template = '<li id="city_{id}">{name}</li>';
 								$('#cities_list').hide();

 								$.each(data, function(index, item) {
 									$('#cities_list').append($.nano(template, item));	
 								});

 								$(this).parent().data('loaded', true);
 								$('.loading').remove();
 								$('#cities_list').show();
 							}
 						);
 					}
 				});
 			});
 		</script>

 		<style type="text/css" media="screen">
 			p { padding: 15px; }
 			.area {
 				background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5E5E65), to(#333));
 				color: #ccc;
    			border-top: 1px solid #333;
    			border-bottom: #555858;
    			padding: 10px 10px 10px 10px;
 				-webkit-border-radius: 8px;
    			-webkit-box-shadow: rgba(0,0,0,.3) 1px 1px 3px;
 				margin: 10px 10px 10px 10px;
 				overflow: hidden;
 			}
 		</style>
 	</head>
 	<body>
 		<div id="home" class="current">
 			<div class="toolbar">
 				<h1>Garitas</h1>
 				<a class="button slideup" href="#cities" id="citiesButton">Ciudades</a>
 			</div>
 			<div class="info"> 
 				Usted se encuentra en la ciudad de: <span class="cityname">Tijuana</span> 
 			</div>
 			<ul class="rounded">
                <li class="arrow"><a href="#city">San Isidro</a></li>
                <li class="arrow"><a href="#city">Otay Mesa</a></li>
 			</ul>
 		</div>

 		<div id="cities">
 			<div class="toolbar">
 				<h1>Ciudades</h1>
 				<a href="#home" class="back">Inicio</a>
 			</div>
 			<div class="info"> 
 				Elija una ciudad
 			</div>
 			<ul id="cities_list">
 			</ul>
 		</div>

 		<div id="city">
 			<div class="toolbar">
 				<h1>Garitas</h1>
 				<a href="#home" class="back">Inicio</a>
 			</div>
 			<div class="info"> 
 				<span class="cityname">Tijuana</span> 
 			</div>
 			<div class="area">
 				<p>Something</p>
 			</div>
 		</div>
 	</body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Aplicacion de demo</title>
	<style type="text/css" media="screen">@import "./jqtouch/jqtouch.min.css";</style>
	<style type="text/css" media="screen">@import "./themes/jqt/theme.min.css";</style>

	<script src="./jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./jqtouch/jqtouch.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="./scripts/jquery.nano.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript" charset="utf-8">
	var jQT = new $.jQTouch({
	icon: 'jqtouch.png',
	addGlossToIcon: false,
	startupScreen: 'jqt_startup.png',
	statusBar: 'black',
	preloadImages: [
	'./themes/jqt/img/back_button.png',
	'./themes/jqt/img/back_button_clicked.png',
	'./themes/jqt/img/button_clicked.png',
	'./themes/jqt/img/grayButton.png',
	'./themes/jqt/img/whiteButton.png',
	'./themes/jqt/img/loading.gif'
	]
	});

	$(function(){
	$('#city').bind('pageAnimationEnd', function(e, info) {
	if (!$(this).data('loaded')) {
	$(this).append('<div class="loading">Loading</div>');
	$.getJSON('http://search.twitter.com/search.json?q=jqtouch&callback=?',
	function(data) {
	$(this).parent().data('loaded', true);
	$('.loading').remove();
	}
	);
	}
	});

	$('#cities').bind('pageAnimationEnd', function(e, info) {
	if(!$(this).data('loaded')) {
	$(this).append('<div class="loading"><img src="./themes/jqt/img/loading.gif" /> Cargando datos</div>');
	$.getJSON('http://garitas.heroku.com/ciudades?callback=?',
	function(data) {
	var template = '<li id="city_{id}">{name}</li>';
	$('#cities_list').hide();

	$.each(data, function(index, item) {
	$('#cities_list').append($.nano(template, item));
	});

	$(this).parent().data('loaded', true);
	$('.loading').remove();
	$('#cities_list').show();
	}
	);
	}
	});
	});
	</script>

	<style type="text/css" media="screen">
	p { padding: 15px; }
	.area {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5E5E65), to(#333));
	color: #ccc;
	border-top: 1px solid #333;
	border-bottom: #555858;
	padding: 10px 10px 10px 10px;
	-webkit-border-radius: 8px;
	-webkit-box-shadow: rgba(0,0,0,.3) 1px 1px 3px;
	margin: 10px 10px 10px 10px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div id="home" class="current">
	<div class="toolbar">
	<h1>Garitas</h1>
	<a class="button slideup" href="#cities" id="citiesButton">Ciudades</a>
	</div>
	<div class="info">
	Usted se encuentra en la ciudad de: <span class="cityname">Tijuana</span>
	</div>
	<ul class="rounded">
	<li class="arrow"><a href="#city">San Isidro</a></li>
	<li class="arrow"><a href="#city">Otay Mesa</a></li>
	</ul>
	</div>

	<div id="cities">
	<div class="toolbar">
	<h1>Ciudades</h1>
	<a href="#home" class="back">Inicio</a>
	</div>
	<div class="info">
	Elija una ciudad
	</div>
	<ul id="cities_list">
	</ul>
	</div>

	<div id="city">
	<div class="toolbar">
	<h1>Garitas</h1>
	<a href="#home" class="back">Inicio</a>
	</div>
	<div class="info">
	<span class="cityname">Tijuana</span>
	</div>
	<div class="area">
	<p>Something</p>
	</div>
	</div>
	</body>
	</html>