HTML and CSS Reference
In-Depth Information
des Sencha-Touch-Frameworks in den Projektordner. Im Idealfall sollte Ihr Projekt-
ordner in etwa so aussehen wie in Abbildung 8.33.
Abbildung 8.33 So sollte Ihr Projektordner aussehen.
Ihr Magazin nutzt eine Kombination aus zwei verschiedenen Frameworks, es ist ein
sogenanntes Mashup . Dies ist problemlos möglich, da sich beide Frameworks nicht
in die Quere kommen, sich also keine Variablen-, Selektor- oder Funktionsnamen tei-
len. Das ist nicht selbstverständlich. Sie sollten daher, bevor Sie planen, zwei Frame-
works miteinander zu kombinieren, überprüfen, ob diese gut zusammenspielen.
Doch zurück zu Ihrem Magazin-Mashup :
Legen Sie eine Datei mit dem Namen index.html an, und verknüpfen Sie Magazine-
Grid und Sencha Touch darin:
<link rel="stylesheet" href="styles/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="styles/magazinegrid.min.css" type="text/css">
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<script src="javascript/sencha-touch.js" type="text/javascript"></script>
<script src="javascript/app.js" type="text/javascript"></script>
Auch bei diesem Projekt legen Sie wieder eine Datei styles.css und app.js an, in die Sie
alle eigenen Skriptbefehle und CSS-Stile schreiben.
Jetzt geht es an die HTML-Dateien: Da Sie später mit Sencha Touch alle Seiten in ein
Browserfenster laden werden, sollten Sie die Verlinkungen zum MagazineGrid in den
Seiten entfernen. Genauer gesagt, können Sie die komplette HTML-Grundstruktur
entfernen, also alles vor dem öffnenden article -Tag und alles nach dem schließen-
den article -Tag. So wird z. B. aus
<!DOCTYPE html>
<html>
<head>
Search WWH ::




Custom Search