Mit jQTouch auf's iPhone & Android

MobileTech Conference 2010 - 6. - 8. September - Rheingoldhalle, Mainz

Mit jQTouch aufʻs iPhone & Android

Björn Wibben

Web-App Frameworks
Übersicht

CiUI Magic Framework

UiUIKit jPint

Was ist

• jQuery Plug-in für mobile Webentwicklung auf dem
iPhone, iPod Touch und anderen mobilen Geräten

• Entwickelt von David Kaneda; gepﬂegt von
Jonathan Stark

• Demo: http://jqtouch.com/

• Source: http://github.com/senchalabs/jQTouch/

jQTouch Features

• Startscreen, Homescreen Icon (auf iPhone / iPod Touch)

• Bilddaten vorladen

• Flexible Themes

• Native Webkit Animationen

• Callback Events

• Erweiterbar durch Extensions

Themes - Demo

Apple jQTouch

Theme CSS anpassen
Apple Theme:
.toolbar {
...
background: url(img/toolbar.png) #6d84a2 repeat-x;
...
}

jQTouch Theme:
.toolbar {
...
background: url(img/toolbar.png) #000000 repeat-x;
...
}

Animation

8 mitgelieferte Seiten-Animationen:
slide, slideup, dissolve, fade, ﬂip, pop, swap, und cube

Standard Selektor für Seitenübergänge: body > * > ul li a

...
<ul class="rounded">
<li class="arrow">
<a href="#subpage1" class="fade">Subpage 1</a>
</li>
</ul>
...

Animation über CSS3

@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

.fade.in {
z-index: 10;
-webkit-animation-name: fadein;
}

Animation - Demo

iPhone Android

Webkit Animationen
auf unterschiedlichen Endgeräten

Callback Events

Page Animations:
pageAnimationStart, pageAnimationEnd

Orientation Changes (z. Zt. iPhone only):
turn

Touch Events:
swipe, tap

Callback Events

$('#s2').bind('pageAnimationEnd', function(event, info) {

if (info.direction === 'in') { doSomething(); }

// gibt - wenn möglich - den Link als jQuery Objekt zurück, welcher die Animation auslöste

console.log($(this).data('referrer').attr('href ')); // #s2

});

Callback Events

$('#swipeme').bind('swipe', function(event, info) {
console.log(info.direction);
});

oder auch

$('#swipeme').swipe(function(event, info) {
console.log(info.direction);
});

jQTouch Schnellübersicht

• Eine HTML-Datei,
Unterseiten sind in separaten <div>

• jQTouch Dateien im <head> einbinden

• jQTouch mittels $.jQTouch() aufrufen

jQTouch Einfache App - Grundgerüst Kopf

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Web App</title>
<style type="text/css">@import "jqtouch/jqtouch.css";</style>
<style type="text/css">@import "themes/apple/theme.css";</style>
<script src="jquery-1.4.2.min.js"></script>
<script src="jqtouch.js"></script>
...

jQTouch initialisieren

...
<script type='text/javascript'>

var jQT = new $.jQTouch({
icon: 'homescreenIcon.png',
startupScreen: 'startupImage.png',
preloadImages: [
'img1.png', 'img2.png'
]
...
});

</script>
</head>
<body>
...

Übersicht: http://wiki.github.com/senchalabs/jQTouch/initoptions

Grundgerüst Seiten
...
<div id="home" class="current">
<div class="toolbar"><h1>Apple Theme</h1></div>
<ul class="rounded">
<li class="arrow">
<a href="#subpage1" class="ﬂip">Subpage 1</a>
</li>
</ul>
</div>

<div id="subpage1">
<div class="toolbar">
<h1>Subpage 1</h1>
<a href="#" class="back">Back</a>
</div>
<p class="rounded">Subpage 1 Text</p>
</div>
...

jQTouch mehr „native“ - Demo

http://cubiq.org/iscroll

Web App - Fähigkeiten und Integration
iPhone / iPod Touch Android 2.2

Homescreen Icon ✔ ✗
Startscreen ✔ ✗
HTML5 DB ✔ ✔
Application Cache ✔ ✔
CSS3-Animationen ✔ ✗
Schriften (enthalten) ✔ ✗

iPhone / Android / Bada
Worauf sollte man achten?

• "Webkit" !== "Webkit" // true

• turn Event nicht überall verfügbar

• Homescreen Icon und Startscreen nur auf iDevices

Webevents Webapp Demo

http://bit.ly/webevents_app

Vielen Dank

Frontend-Entwickler

http://www.wibben.de/
Twitter: bjoernwibben
GitHub: bjoernwibben

Mit jQTouch auf's iPhone & Android

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Mit jQTouch auf's iPhone & Android

Semelhante a Mit jQTouch auf's iPhone & Android (20)

Mit jQTouch auf's iPhone & Android