Das iPhone Springboard in XHTML, CSS und jQuery

Dieser Gastartikel wurde von Marco Kuiper geschrieben, einem weiteren kreativen Design-Geek, der xHTML, CSS und jQuery liebt. Marcos Blog ist unter Marcofolio.net zu finden.

Letzte Woche habe ich einen Artikel darüber geschrieben, wie man den iPhone Entsperrbildschirm mit xHTML, CSS und jQuery erstellt. Wie im Artikel erwähnt, würde ich wirklich gerne mehr von dem eleganten iPhone Design auf eine Webseite übertragen. Der nächste logische Schritt für mich war, das iPhone Springboard in xHTML, CSS und jQuery zu erstellen.

Demo anzeigen   Dateien herunterladen

Funktionen

• XHTML und CSS valides.
• Icons "schieben herein" (Hauptsymbole) genau wie beim echten iPhone.
• Icons "blenden ein" (Leistensymbole) genau wie beim echten iPhone.
• Icons "blenden aus", wenn sie angeklickt werden, genau wie beim echten iPhone.
• Kombiniert mit dem Entsperrbildschirm sieht es wirklich wie das Original aus.
• Getestet und funktioniert in Firefox 3, Internet Explorer 7 und Safari 3.
• Nun, was will man mehr?

Bekannte Probleme

• Es hat nicht die "Multi-Desktop"-Funktionalität wie das echte iPhone, aber diese kann in Zukunft hinzugefügt werden.
• Wenn ein Symbol angeklickt wird, zeigt das echte iPhone ein sich vergrößerndes Fenster. Man könnte diesen Effekt mit einemiframenachbauen, aber ich wollte eine elegantere und einfachere Lösung. Jetzt blenden die Symbole einfach aus.
• Funktioniert nicht (richtig) auf einem echten iPhone, fällt aber schön zurück.

Abgesehen von diesen kleineren Problemen funktioniert es wie erwartet. Ich plane, weitere dieser "iPhone-Style"-Webseiten zu erstellen, also abonnieren Sie den Feed, wenn Sie auf dem Laufenden bleiben möchten. Möchten Sie wissen, wie ich es erstellt habe? Schauen Sie es sich an.

Ressourcen

Bevor ich anfing, brauchte ich etwas Referenzmaterial zum Arbeiten.

• Für das hochauflösende iPhone-Layout hat mir Teehan+lax geholfen.
• Das PSD von Teehan+lax lieferte nicht die benötigten Icons, also habe ich sie von Judge auf DeviantArt.
• Ich wollte jQuery für die Funktionalität (Schieben, Einblenden usw.) verwenden. Ich verwende die aktuelle Version: 1.3.1

Das war's im Grunde. Mit allen Ressourcen bereit, können wir zum nächsten Schritt übergehen.

xHTML

Ich habe die folgende Anatomie für das HTML verwendet.

Wie Sie sehen können, ist der

1. #iphone-scrollcontainer der gesamte Container für das Innere.
2. #springboard-items ist der Container für die Symbole, die nicht in der Leiste platziert sind.
3. #springboard-bar ist die Leiste am unteren Rand des Telefons.
4. .row ist jede Zeile, die Symbole enthält.
5. .icon ist der Container für das eigentliche Symbol und den Text.

Das ergibt uns folgendes xHTML (teilweise)

<div id="iphone-scrollcontainer">
    <div id="springboard-bar">
        <div class="icon">
            <a href="phone.html" title="Phone" id="ico_btn"><img src="images/icon_phone.png" alt="Phone" /></a>
            <p class="ico_txt">Phone</p>
        </div>
        <!-- Bar Icons Removed -->
    </div>
    <div id="springboard-items">
        <div class="row">
            <div class="icon">
                <a href="#" title="Text" class="ico_btn"><img src="images/icon_text.png" alt="Text" /></a>
                <p class="ico_txt">Text</p>
            </div>
            <!-- Springboard Items Removed -->
        </div>
        <div class="row">
            <div class="icon">
                <a href="#" title="Marcofolio" class="ico_btn"><img src="images/icon_marcofolio.png" alt="Marcofolio" /></a>
                <p class="ico_txt">Marcofolio</p>
            </div>
            <!-- Springboard Items Removed -->
        </div>
        <!-- More Rows Removed -->
    </div>
</div>

Der Grund, warum ich diespringboard-baroben platziert habe, ist, dass Sie dann ihre Position am unteren Rand des iPhones fixieren können, unabhängig von der Anzahl der Symbole auf dem Springboard.

Dies gab mir das perfekte xHTML zum Arbeiten. Nun zum unterhaltsamen Teil: Hinzufügen von Farbe, Styling und mehr mit CSS.

CSS

Das CSS für das iPhone Springboard ist eigentlich ziemlich unkompliziert, ohne viele seltsame Dinge. Ich verwende absolute Positionierung, da der iPhone-Container eine feste Breite, Höhe und Position hat. Hier ist, was ich mir überlegt habe.

body { background-image:url(../images/iphone-bg.png); background-repeat:no-repeat; background-color:#25262b; padding:0; margin:0; }
a { outline:none; }
p { padding:0; margin:0; }
img { border:0; }

#iphone-scrollcontainer { height:461px; width:320px; position:absolute; top:140px; left:40px; background-color:#000000; overflow:hidden; }

.row { clear:both; }
.icon { float:left; margin:9px 11px; }
.ico_txt { text-align:center; font-family:Georgia, Times, serif; font-size:10px; color:#d4d4d5; }

#springboard-bar { position:absolute; top:368px; background-image:url(../images/springboard-bar-bg.png);
			background-repeat:repeat-x; width:100%; height:92px; display:none; }
#springboard-bar div.icon { margin-top:13px; }
#springboard-bar div.icon p.ico_txt { margin-top:8px; }

#springboard-items { width:100%; height:368px; display:none; }

Ich möchte einige Dinge aus der CSS-Datei hervorheben

• #iphone-scrollcontainer hat einoverflow:hidden;, damit die Symbole nicht angezeigt werden, wenn sie sich außerhalb des iPhone-Bildschirms befinden (bevor sie hineinfliegen).
• #springboard-bar und #springboard-items haben beidedisplay:none;. Mit Hilfe von jQuery blenden wir sie ein, damit sie sichtbar werden.

Alles bereit: Jetzt zum ernsthaften Spaß mit JavaScript / jQuery, um ihm die schicken Effekte zu verleihen.

JavaScript

Zuerst müssen wir verstehen, wie die iPhone-Symbole auf den Bildschirm "fliegen". Dafür hatte ich folgende Referenz

Diespringboard-barhatte einfach einen "fadeIn"-Effekt, der leicht mit jQuery erreicht werden kann. Ich brauchte einen anderen Ansatz für die Symbole und musste das xHTML ändern.

<div class="icon">

wurde zu

<div class="icon upleft">

Ich musste jedes Symbol einzeln ändern und ihm die richtige Klasse für jede Ecke geben. Nun, um sie von ihrer Position zu bewegen, mit relativer Positionierung in CSS

.upleft { position:relative; left:-160px; top:-160px; }
.upright { position:relative; left:160px; top:-160px; }
.downleft { position:relative; left:-160px; top:160px; }
.downright { position:relative; left:160px; top:160px; }

Perfekt! Das lässt uns nur noch einige schicke JavaScript-Effekte mit jQuery hinzufügen.

$(document).ready(function()
{
	// Fade in the docking bar
	$("#springboard-bar").fadeIn(1500);
	
	// Fade and Slide in the elements
	$("#springboard-items").fadeIn(1000);
	$(".downright").animate({left:0, top:0}, 600);
	$(".downleft").animate({left:0, top:0}, 600);
	$(".upright").animate({left:0, top:0}, 600);
	$(".upleft").animate({left:0, top:0}, 600);
	
	// What will happen when an icon gets clicked
	$(".ico_btn").click(function(event) {
		var element = $(this);
		event.preventDefault();
		$("#springboard-bar").fadeOut("slow");
		$("#springboard-items").fadeOut("slow", function(){
			window.location = element.attr("href");
		});
	});

});

Ich möchte auch hier einige Dinge hervorheben

1. event.preventDefault(); verhindert, dass der Benutzer direkt zu einer anderen URL weitergeleitet wird. Zuerst blenden die Symbole aus und wenn sie fertig sind, geht der Benutzer zu einer anderen Seite überwindow.location.
2. var element = $(this); erlaubt, das DOM-Element in einer Variable zu speichern. Dies ist notwendig, da wir später den href von diesem Element abrufen müssen. Wenn dies nicht verwendet wird, weiß jQuery nicht, zu welcher URI es gehen soll.

Das war's! Aus irgendeinem Grund blendet der Internet Explorer die Symbole nicht gleichzeitig ein und animiert sie, was bedeutet, dass der Effekt in diesem Browser etwas anders ist als in anderen. Benutzen Sie auch den *Respring*, um die Seite immer wieder neu zu laden, nur um den Effekt zu sehen.

Ich hoffe, Sie alle haben es genauso genossen wie ich es bei der Erstellung hatte. Fühlen Sie sich frei, Änderungen vorzunehmen, die Sie mögen, ich liebe es immer zu sehen, wie Leute mit der Arbeit anderer kreativ sind!