1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQTouch β</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="application/x-javascript" charset="utf-8"></script>
<script src="extensions/jqt.location.js" type="application/x-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(){
function setDisplay(text) {
$('.info').empty().append(text)
}
// We pass "updateLocation" a callback function,
// to run once we have the coordinates.
// We also set it to a variable, so we can know
// right away if it's working or not
var lookup = jQT.updateLocation(function(coords){
if (coords) {
setDisplay('Latitude: ' + coords.latitude + '<br />Longitude: ' + coords.longitude);
$('.nearby').empty().append('<a href="list.php?lat=' + coords.latitude + '&lng=' + coords.longitude + '">Nearby List</a>');
} else {
setDisplay('Device not capable of geo-location.');
}
});
if (lookup) {
setDisplay('Looking up location…');
}
});
// Some sample Javascript functions:
$(function(){
$('a[target="_blank"]').click(function() {
if (confirm('This link opens in a new window.')) {
return true;
} else {
$(this).removeClass('active');
return false;
}
});
// Page animation callback events
$('#pageevents').
bind('pageAnimationStart', function(e, info){
$(this).find('.info').append('Started animating ' + info.direction + '… ');
}).
bind('pageAnimationEnd', function(e, info){
$(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
});
// Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
$('#callback').bind('pageAnimationEnd', function(e, info){
if (!$(this).data('loaded')) { // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
$(this).append($('<div>Loading</div>'). // Append a placeholder in case the remote HTML takes its sweet time making it back
load('ajax.html .info', function() { // Overwrite the "Loading" placeholder text with the remote HTML
$(this).parent().data('loaded', true); // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
}));
}
});
// Orientation callback event
$('body').bind('turn', function(e, data){
$('#orient').html('Orientation: ' + data.orientation);
});
});
</script>
</head>
<body>
<div id="home" class="current">
<div class="toolbar">
<h1>jQTouch</h1>
<a class="button slideup" id="infoButton" href="#about">About</a>
</div>
<ul class="rounded">
<li class="arrow"><a href="#ui">User Interface</a> <small class="counter">4</small></li>
<li class="arrow"><a href="list.php">All stops List</a></li>
<li class="arrow nearby">Nearby List</li>
<li class="arrow"><a href="list.php">Favourites List</a></li>
</ul>
<div class="info">
<p>Add this page to your home screen to view the custom icon, startup screen, and full screen mode.</p>
</div>
</div>
</body>
</html>
|