HTML and CSS Reference
In-Depth Information
Webanwendung unter Nutzung von jQTouch zu erstellen, können Sie die aktuelle Posi-
tion eines Benutzers mit nur wenigen Zeilen Code erhalten. Eine detaillierte Einführung
zu jQTouch finden Sie am Anfang des Buchs.
Die Geofunktionaliät für jQTouch ist im Verzeichnis
Extensions
in der Datei
jqt.location.js
definiert. Diese muss mit in den HTML-Code geladen werden.
<! JavaScript Erweiterung für Geolocation einbinden >
<script type "application/x javascript"
src "extensions/jqt.location.js"></script>
In der Datei
jqt.location.js
befindet sich die Funktion
updateLocation
, die wir mit einer
Rückruffunktion versehen. Diese JavaScript-Funktion macht letztendlich genau das
Gleiche, was wir in unserem vorhergehenden Beispielen gelernt haben, und erhält die
Geoposition über den
navigator.geolocation.getCurrentPosition
-API-Aufruf.
Weiterhin setzen wir die Variable
coords
, um festzustellen, ob wir von dem Gerät eine
Geoposition erhalten können oder nicht. Die selbst definierte Funktion
setDisplay
ist
nur für die Textausgabe verantwortlich.
Hier ist das volle Beispiel:
<html>
<head>
<title>Geo Location mit jQTouch</title>
<! jQuery direkt von Google Code einbinden >
<script type "text/javascript"
src "http://www.google.com/jsapi"></script>
<script type "text/javascript"> google.load("jqüry", "1.3.2"); </script>
<! jQTouch einbinden >
<script type "text/javascript" src "jqtouch/jqtouch.js"></script>
<link type "text/css" rel "stylesheet" media "screen"
href "jqtouch/jqtouch.css">
<link type "text/css" rel "stylesheet" media "screen"
href "themes/jqt/theme.css">
<! JavaScript Erweiterung für Geolocation einbinden >
<script type "application/x javascript"
src "extensions/jqt.location.js"></script>
<! jQTouch initialisieren >
<script type "text/javascript">
var jQT $.jQTouch({ });
</script>
<script type "text/javascript" charset "utf 8">
var jQT new $.jQTouch({ });
$(function(){
function setDisplay(text) {
$('.info').empty().append(text)
}
var lookup jQT.updateLocation(function(coords){
