Leopard Desktop mit jQuery mit jqDock

() translation by (you can also view the original English article)

jQuery fügt Ihren Websites eine Menge cooler Funktionen hinzu. Es kann eine Reihe von Dingen ausführen, von Animation bis AJAX. Es ist normalerweise verpönt, sich beim Entwerfen Ihrer Websites stark auf jQuery zu verlassen, aber es macht Spaß, ab und zu wild zu werden. In diesem Tutorial werde ich Ihnen zeigen, wie Sie mit jQuery ein vollständig codiertes Dashboard erstellen, genau wie Leopard! Dies kann nützlich sein, um eine ganze Reihe von Gadgets oder Widgets zu verstecken, für die Sie keinen Platz haben!

Vorwort

Dieses Tutorial enthält eine Reihe von Komponenten. Eine Menge Bilder, ein 3.
Party Dock Plugin und die UI.draggable jQuery Komponente, zusammen mit natürlich
der jQuery-Kern (v1.2.6). Hinweis: Viele der Bilder sind wahrscheinlich
urheberrechtlich geschützt von ihren Eigentümern. Einige Dock-Symbole wurden aus ihren Paketen entnommen
und ich habe das Leopard Default Wallpaper verwendet. Aber sie sind [Tapeten] austauschbar!

Images.zip
jQuery + -Komponenten

Platzieren Sie alle diese in einem Verzeichnis. Ein Ordner namens "images" (mit den Bildern darin),
ein Ordner namens 'js' mit dem darin enthaltenen JavaScript.

Angriffsplan

Der Angriffsplan für dieses Tutorial lautet wie folgt. Auf dem Desktop wird ein
Draggable Window und ein Dock. Es gibt eine andere Div namens #dashboardWrapper, die
versteckt sich, wenn die jQuery verwendet wird. Ohne JS wird es sich verschlechtern, aber nicht gut. Der JS-Plan
des Angriffs werde ich erklären, wenn wir dort ankommen.

Haftungsausschluss!

Abgesehen von den verwendeten Symbolen möchte ich auch darauf hinweisen, dass dies nicht so umfangreich ist
Sie können alles selbst tun, um dynamische Widgets usw. zu erhalten! Diese
bietet nur das grundlegende "Framework", mit dem gearbeitet werden kann. In der Tat, als ich anfing zu schreiben
Dieses Tutorial begann als WordPress-Theme mit den Widgets als Widgets
auf dem Armaturenbrett. Es ist immer noch möglich! Ich werde später erklären, wie.

Schritt 1 - Struktur und Datei enthält

Erstellen Sie eine Datei mit dem Namen index.html. Dies wird die Seite sein, die wie Leopard aussieht.
Sie müssen das gesamte JavaScript und die style.css verwenden, die wir später erstellen werden. Gerade
Beginnen Sie damit:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Leopard Dashboard</title>
	<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="js/draggable.jquery.ui.js" type="text/javascript"></script>
	<script src="js/dashboard.js" type="text/javascript"></script> 
	<script src="js/jquery.jqDock.min.js" type="text/javascript"></script>
	<style type="text/css">
		@import url(style.css);
	</style>
</head>
<body>
	<div id="wrapper">
	
	</div>
</body>
</html>

Die Seite hat dann 3 Mindestabschnitte. 2 Divs im #wrapper (ein Fenster und das
tatsächliches Dashboard) und das Dock außerhalb des Wrappers. Fügen Sie diese Abschnitte hinzu in:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>Leopard Dashboard</title>
	<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
	<script src="js/draggable.jquery.ui.js" type="text/javascript"></script>
	<script src="js/dashboard.js" type="text/javascript"></script> 
	<script src="js/jquery.jqDock.min.js" type="text/javascript"></script>
	<style type="text/css">
		@import url(style.css);
	</style>
</head>
<body>
	<div id="wrapper">
	<div class="draggableWindow">
		
	</div>
		
		<div id="dashboardWrapper">
			
		</div>
	</div> <!-- #wrapper -->
	<div id="dock">
		
	</div>
</body>
</html>

Schritt 2 - Ausfüllen des Inhalts

Jetzt haben wir unsere 3 grundlegenden leeren Divs. Wir müssen sie mit den jeweiligen füllen
Inhalt. Da das ziehbare Fenster nur ein altes Fenster ist, können Sie es mit füllen
was du willst Ich habe so etwas wie TextEdit erstellt, das ist im Grunde genommen nur ein Generikum
Fenster mit Text. Es wird später gestylt! Platzieren Sie dies im '.draggableWindow'.

<h1><span></span>Leopard Dashboard with jQuery</h1>
<div class="content">
	<h2>jQuery is awesome!</h2>
	<p>jQuery is pretty cool. I mean, look at all this cool stuff it can do. A dock (<a href="http://www.wizzud.com/jqDock/">Sourced from Wizzud.com! Thanks!</a>), a dashboard, and draggable windows! Awesome! If you didn't get here via it, this is the demo of a tutorial from <a href="http://nettuts.com">Nettuts</a>.</p>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Wie gesagt, dies ist nur ein Fülltext für unser Fenster. Sieht irgendwie eklig aus, genau wie
eine nicht gestylte Seite.

Die nächste Inhaltsfüllung ist das Dashboard. Im Wesentlichen kann dies alles sein
Sie wollen. Ernsthaft Jungs, wenn Sie das selbst in die Hand nehmen, werden Sie verrückt. Du kannst
Gestalten Sie alles, was Sie möchten, so, dass es wie Widgets aussieht. Wie gesagt, es ist nicht umfangreich,
Es werden keine tatsächlichen Widgets angezeigt. Ich werde am Ende erklären, wie man sich in WordPress integriert.
Platziere dies in #dashboardWrapper:

<ul>
	<li class="widget"><img src="images/widgets/googlesearch.png" alt="" /></li>
	<li class="widget"><img src="images/widgets/date.png" alt="" /></li>
	<li class="widget"><img src="images/widgets/dictionary.png" alt="" /></li>
	<li class="widget" id="notepad">This is a text widget! You can make any type of widget you want, simply by adding the class 'widget' to an li element within the Dashboard unordered list. Don't stop there though, create custom looking widgets by adding another class (e.g. myClass) and styling that in style.css. Like this one! <a href="http://net.tutsplus.com/">Nettuts</a></li>
</ul>

Eines der Widgets enthält Text. Dies soll nur zeigen, dass Sie tun können, was Sie wollen.
Behandle die Li's als Divs! Setzen Sie was auch immer! Ein Mini-Blog!

Schließlich brauchen wir das Dock. Aufgrund der Funktionsweise des jqDock-Plugins haben wir
Ich kann keine ul dafür zu leicht verwenden. Schmerz, nicht wahr? Stattdessen sind es nur ein paar Bilder
nebeneinander in einem div:

1	<img src="images/finder.png" alt="Finder" title="finder"/>
2	<img src="images/dashboard.png" alt="Dashboard" id="dashboardLaunch" title="Dashboard" />
3	<img src="images/mail.png" alt="Mail" title="finder" />
4	<img src="images/coda.png" alt="Coda" title="Coda" />

Sehen Sie die mit der ID von dashboardLaunch? Das wird später mit jQuery manipuliert
auf.

Alles läuft nach Plan, Ihre Seite sollte eine Menge Text und Bilder enthalten. Widgets
und Symbole, Text und Überschriften. Im Moment ist alles Müll.

Schritt 3 - CSS

Das CSS macht den Desktop im Wesentlichen zu einem Teil der Seite. Es wird enthalten
der Hintergrund usw. Kommen wir dazu. Erstellen Sie eine neue Datei mit dem Namen 'style.css'.
und legen Sie es im selben Verzeichnis wie die anderen Dateien ab. Beginnen Sie die Bearbeitung:

Info + Zurücksetzen

Im Allgemeinen füge ich beim Zurücksetzen einige Informationen zu meinem CSS hinzu, damit ich weiß, was die Datei ist
zum:

/*
Name:			Leopard
Author:			Nettuts/Harley Alexander
Description:	For a Tutorial at http://net.tutsplus.com/, it's aimed at showing how jQuery and jQuery UI can create a leopard style Web Desktop. Although basic, it incompases Dashboard and Windows!
*/
*{
	margin: 0;
	padding: 0;
}

a{
	color: #005693;
}

Desktop-Oberfläche

Einfach. Als nächstes die Karosserie und das Fenster-Styling:

body{
	background: url(images/background.jpg) no-repeat center top;
	font: 75%/18px "Lucida Grande", Lucida, Verdana, sans-serif;
	overflow: hidden;
}

.draggableWindow{
	width: 500px;
	overflow: auto;
	clear: both;
	padding: 0 20px;
	float: left;
	margin: 40px;
}

.draggableWindow h1{
	width: 100%;
	height: 21px;
	float: left;
	
	font-size: 10px;
	text-align: center;
	text-indent: -67px;
	
	background: url(images/h1long.png) no-repeat;
	text-shadow: #fff 1px 0 1px;
	cursor: default;
}

.draggableWindow h1 span{
	width: 67px;
	height: 21px;
	float: left;
	background: url(images/h1short.png) no-repeat left;
}

.content{
	background: white;
	padding: 36px;
}

.content h2{
	margin-bottom: 1em;
}

#smaller{
	width: 300px;
	float: right;
	margin: 10px;
	margin-top: -100px;
}

alles relativ einfach. Die Art und Weise, wie die h1s mit den vorhergehenden codiert werden, wird verwendet die Schiebetürtechnik, um sicherzustellen, dass die Größe der oberen Leiste entsprechend geändert wird. Das
ID #smaller war eine weitere kleine Modalbox, die ich gemacht habe, nur um zu überprüfen, ob sie funktioniert hat. Überprüfen
Erstellen Sie einfach ein neues Div mit der ID #smaller und einem h1/#content
div, du kannst eine kurze Nachricht eingeben. Weil #smaller als Breite definiert wurde
von 300px wird es genau das sein - eine kleine modale Box.

Dashboard-Stile

Für das eigentliche Dashboard werden nur wenige Stile benötigt ... Nur um das Listenelement zu erstellen
Widgets sehen hübsch aus und gestalten das Notepad-Widget!

.widget{
	position: relative;
	z-index: 9999;
	float: left;
	margin: 1em;
	list-style: none;
}

#notepad{
	padding: 10px 20px;
	width: 185px;
	height: 191px;
	background: url(images/widgets/sticky.png) no-repeat center;
	font-size: 10px;
}

Dock zurücksetzen

Im Allgemeinen wird der größte Teil des CSS des Docks im jQuery-Plugin ausgeführt, ist jedoch abbaubar
Gründe und *grobe* Zentrierung, es braucht noch ein bisschen eigenes CSS:

#dock{
	position: fixed;
	margin: 0 auto;
	bottom: 36px;
	left: 37.5%;
	min-width: 20px;
	max-width: 400px;
	z-index: 9999;
}

#dock img{
	float: left;
}

Und nach all dem Code (obwohl immer noch mutig!) Sollte Ihr Leopard Desktop
sieh ungefähr so aus:

Schritt 4 - jQuery

Woohoo! Der lustige Teil! Ich entschuldige mich auch bei all den Web-Lords, die den übermäßigen Gebrauch von JS verachten
aber du gewinnst etwas, lernst du etwas hm? Nun der Grund, warum ich dieses Tutorial schreiben wollte
so schlimm ist, weil es mich tatsächlich zum Nachdenken gebracht hat, um es zu machen
- ganz zu schweigen von anderen Arbeiten! Das musste ich eigentlich nur sehr seitlich denken
um zum fertigen Produkt zu gelangen. Dankbar kann ich das auf andere Projekte anwenden
- Hoffen wir, dass Sie es auch tun!

Bevor ich mit jQuery beginne, schreibe ich immer eine englische Version dessen, was benötigt wird. Als Regel
von Daumen.

Initiieren Sie beim Laden des Dokuments das Dock, initiieren Sie Draggables und blenden Sie alle Dashboards aus
Elemente, die noch da sind.
Wenn Sie auf das Dashboard-Symbol klicken, aktivieren Sie Dashboard!
Wenn der Benutzer wieder auf den Hauptbildschirm klickt, deaktivieren Sie das Dashboard.

Glücklicherweise (oder leider, je nachdem, wie Sie es betrachten) stellt sich heraus, dass es danach
herauszufinden, dass es ein bisschen mehr gibt als das. Erstellen Sie eine Datei mit dem Namen 'dashboard.js'.
und legen Sie es im JS-Verzeichnis ab. Die JS-Datei wurde vor langer Zeit aufgerollt (im HTML-Code)
Abschnitt) ist jetzt da! Beginnen Sie mit der Bearbeitung!

Beginnen Sie immer mit einem document.ready()!

// Name: 	jQuery --> Leopard

$(document).ready(function(){

});

Plugin Definition

Stark kommentiert, daher selbsterklärend. Starten Sie im Grunde das Dock, starten Sie das
schlepp:

//launch dock
$('#dock').jqDock();
//draggables defenition
$('.widget').draggable();
$('.draggableWindow').draggable({
	handle: 'h1'
});

Wenn Sie jetzt auf Ihr Dock schauen, zoomt es (oder sollte es trotzdem)! Hinweis:
Wir hier bei Nettuts werden Ihnen mit dieser Technologie wahrscheinlich nicht allzu ausführlich helfen.
wie das Wizzuds Job ist!. Sie sollten auch in der Lage sein
um die angezeigten Widgets und das Dialogfenster zu ziehen (nur durch das h1 entlang
die Oberseite als Griff!).

alt="">

Dashboard ausblenden und 'Zone schließen' einleiten

Eh? Zone schließen? Überprüfen Sie, ob Sie jQuery einfach angewiesen haben, das Dashboard beim #dashboardWrapper zu schließen
wurde trotzdem angeklickt (einschließlich der angeklickten Widgets), dann würde es zu einem Schmerz werden
weil Sie sich nicht wirklich in den Widgets bewegen konnten. Also muss eine 'Zone schließen'
erstellt werden, die ein Geschwister der Widgets ist (nicht eingebettet), die einen Z-Index annehmen
von weniger als den Widgets, aber mehr als der Desktop. Tricky, nicht wahr? Die Schichtung sieht aus
etwas wie das:

alt="">

Es wird viel CSS verwendet. Dies dient dazu, das Dashboard an den tatsächlichen Browser anzupassen
Fenster, und setzen Sie die Deckkraft auf 0, damit die Animation sie einblenden kann. Blendet das gesamte Bild aus
Element auch aus der Sicht.

//initial hiding of dashboard + addition of 'closeZone'
$('#dashboardWrapper')
	.css({
		position: 'absolute',
		top: '0px',
		left: '0px',
		width: '100%',
		height: '100%',
		opacity: '0'
	})
	.hide()
	.append('<div id="closeZone"></div>');

Kinderleicht!

Position + Deaktivierung der Schließzone

Wie bei #dashboardWrapper muss die Schließzone vergrößert werden, um das Fenster zu füllen.
Die Close Zone hat tatsächlich auch den halbtransparenten schwarzen Hintergrund!

//Position, and hiding of '#closeZone'.
$('#closeZone')
	.css({
		position: 'absolute',
		top: '0px',
		left: '0px',
		width: '100%',
		height: '100%',
		opacity: '0.5',
		background: '#000'
	});

Start des Dashboards

Jetzt passiert die Magie! Indem Sie das Dashboard anzeigen, wenn Sie auf #dashboardLaunch klicken,
Die Schließzone wird ebenfalls angezeigt. Dieses Codebit initiiert jedoch nur das
Instrumententafel. Derzeit gibt es keine Möglichkeit, sich dem zu entziehen, außer zu aktualisieren - Zone schließen
Job ist der nächste!

//Launch Dashboard + initiation of 'closeZone'
$('#dashboardLaunch').click(function(){
	$('#dashboardWrapper')
		.show()
		.animate({opacity: '1'}, 300);
});

alt="">

Das Dashboard verlassen/schließen

Die Close Zone wird endlich ins Rampenlicht gerückt.

//closeZone's job: escaping the Dashboard
$('#closeZone').click(function(){
	$('#dashboardWrapper')
		.animate({opacity: '0'}, 300)
		.hide(1);
});

Nun hat dies einen interessanten Hinweis. Aus irgendeinem Grund führt jQuery die Animation nicht aus
es sei denn, das '.hide' hat eine Zeit von 1 Zehntel Millisekunde. Tolle Fluchtmöglichkeit!

Aber was ist mit Links ...

Abgesehen von der Schließzone ist dies die einzige andere offensichtliche Sache, die entkommen muss
Das Dashboard mit Animation ist, wenn auf einen Link geklickt wird. Wie? Einfach die gleiche "Funktion"
wie bei der Close Zone.

1	//fadeout of dashboard and when a link is clicked within
2	$('#dashboardWrapper a').click(function(){
3	$('#dashboardWrapper').animate({opacity: '0'}, 300);
4	});

Und das ist es! Ihre dashboard.js sollten ungefähr so aussehen
diese js Datei

Integration in WordPress

Wie versprochen, ein einfacher Schritt in die richtige Richtung, wie man dies mit WordPress benutzt.
Grundsätzlich ist der gesamte Code schließlich HTML und JavaScript, wenn er in den Browser gelangt
Ende, richtig? Kein PHP, kein ASP.NET, vielleicht auch etwas XML. Dieses Prinzip ist wesentlich
zu verstehen, da dies bedeutet, dass Sie Code auf jedes bereitgestellte Medium anwenden können
Es hat die gleichen IDs und Klassen.

Betrachten Sie das '#content'-Div Ihres WordPress-Blogs angesichts einer Klasse von 'draggableWindow'.
Geben Sie es ein h1 an der Spitze, und hey presto! Fenster-Post-Inhalt. Die Seitenleiste gegeben
Eine ID (oder ändern Sie sie innerhalb des JS-Codes) von '#dashboardWrapper' wird automatisch
verstecken, bis angerufen. Das bedeutet, dass alle Ihre Li-Widgets für Archive und Kategorien
und alles sind jetzt separate Widgets.

Sogar dynamische Seitenleisten haben Listen mit bestimmten Klassen, sodass sie gestylt werden können
wie echte Widgets! Das Dock, würde ich sagen, ist das einzige, was tatsächlich benötigt würde
hinzugefügt werden. Keine Sorgen machen! Aufgrund seiner Positionierung ist es nur ein Div mit ein paar
Bilder darin.

Wenn Sie möchten, dass Ihre anderen Dock-Symbole Orte verknüpfen, wird ein Inline-Tag nichts beschädigen!
Das statische HTML, das von WordPress (oder wirklich jeder Web-Technologie) ausgespuckt wird, ist
Dies gilt für alle erstellten CSS oder JS, sofern die IDs und Klassen ausgerichtet sind.

Einpacken

OK, legen Sie die stirnrunzelnden No-Extensive-JS-Usage Grandaddys in Ruhe und geben Sie Ihr Bestes, nicht
jQuery in diesem Umfang zu verwenden. Dieses Tutorial sollte nur zeigen, wie viel Spaß die Animation macht
kann wirklich sein und wie einfach es ist, Effekte zu erzeugen. In der Tat, wenn jemand gesehen hat
Alle Effekte Ich werde gerne warten, bis 5 vorgeschlagen wurden und einen Artikel darüber schreiben
wie man jeden macht!

Abonnieren Sie den NETTUTS RSS Feed für weitere tägliche Webentwicklungs-Tuts und Artikel.