Skip to content

Instantly share code, notes, and snippets.

@mariochavez

mariochavez/jqtouch-demo.js

Created June 19, 2010 15:40
Show Gist options
  • Save mariochavez/444996 to your computer and use it in GitHub Desktop.
Save mariochavez/444996 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment