- Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2 › Webstandard-Blog

Windows 7 Fenster mit CSS3 und jQuery - Tutorial Teil 2

CSS - 24 Mär, 2010

Twittern
Kommentare (8)

Windows 7 Fenster mit CSS3 und jQuery - Schön euch auch beim zweiten Teil des Windows 7 Fenster Tutorials willkommen zu heißen! Die heutige Fortsetzung knüpft nahtlos an den ersten aus HTML- und CSS-Angaben bestehenden gestrigen Teil an. Nach dem das Interfacedesign eines Windows 7 Fensters im Firefox "Look & Feel" im gestrigen ersten Teil nachempfunden wurde, wird im heutigen zweiten Teil JavaScript bzw. das Plugin jQuery (UI) die Hauptrolle in diesem Tutorial-2-Teiler spielen. Hierbei wird insbesondere auf eine mögliche Änderung der Fenstergröße ( resizable ) und -position ( draggable ) durch den Anwender eingegangen.

Ist-Stand nach Tutorial Teil 1

Für diejenigen die den ersten Teil dieses Tutorial-2-Teilers nicht gelesen haben, zeigt die folgende Abbildung den momentanen Stand der Dinge.

Windows 7 Fenster inklusive Content - Ist-Stand nach Tutorial Teil 1

Step 1 - Anlegen und Referenzieren auf JavaScript-Dateien

Da wir zum aktuellen Zeitpunkt zwar ein Windows 7 Fenster entsprechend der "Designvorgaben" umgesetzt haben, aber noch keinerlei "Bewegung" möglich ist, werden als erstes die dafür notwendigen JavaScript-Dateien als Ressourcen ( aktuelle jQuery & jQuery-UI - Zeilen 4 bis 6 ) für die noch anstehenden Anforderung, dem bereits vorhandenem HTML-Code aus Tutorial 1 hinzugefügt. In der zum Schluss angegebenen JavaScript-Datei windows7.js ( Zeile 7 ) werden die für unsere Anforderungen entsprechenden Funktionen ( Step 3 bis 4 ) definiert.

Code-Beispiel ... <title>Windows 7 mit CSS3 und jQuery</title> ... <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/jquery-ui- 1.7.2.min.js"></script> <script type="text/javascript" src="../js/windows7.js"></script> </head> <body> ...

Step 2 - Draggable - Verschiebung

Damit das Windows 7 Fenster nicht nur visuell gesehen wie eines aussieht, sondern sich auch wie ein Windows 7 Fenster bewegt ( draggable ) und vergrößert bzw. verkleinert ( resizable ) werden kann, muss folgender Code in der Datei windows7.js angelegt werden. Dieser Code bewirkt, dass das bereits eingebundene jQuery UI Modul Dragging angesprochen und ausgeführt wird.

JavaScript - Draggable $(function() { $(".fenster").draggable({ cancel: '.inhalt', containment: 'body', scroll: false, stack: { group: '.fenster', min: 1 } }); });

Kurze Erklärung, dessen was hier abläuft:

Zeile 2 - alle Elemente der Klasse fenster können verschoben werden
Zeile 3 - Elemente der Klasse inhalt können nicht zum Verschieben genutzt werden
Zeile 4 - Elemente können nicht über das body-Tag hinaus verschoben werden
Zeile 5 - keine Scrollbalken, wenn ein Fenster aus dem body-Tag geschoben wird
Zeile 6 - stack bewirkt, dass jeweils das gerade aktive Fenster in den Vordergrund gerückt wird, ist erst bei mehr als einem Fenster interessant

Windows 7 Fenster - Draggable dank jQuery UI

Damit könnt ihr das Fenster jetzt anpacken und umher schieben.

Step 3 - Resizeable - Größenänderung

Das letzte Feature fehlt noch, die dynamische Änderung der Fenstergröße. Gleich unterhalb des Dragging-Codes innerhalb der windows7.js wird deshalb folgender JavaScript-Code angelegt.

JavaScript - Resizeable $(function() { $(".fenster").resizable({ handles: 'n, e, s, w, ne, se, sw, nw', containment: 'body', minHeight: 80, minWidth: 138, maxHeight: $(window).height(), maxWidth: $(window).width() }); });

Damit springt nun auch das Resizable Modul an.

Zeile 2 - alle Elemente der Klasse fenster können in ihrer Größe verändert werden
Zeile 3 - handles gibt an, an welchen Ecken und Kanten der Fenster Elemente hinzugefügt werden sollen, die zur Größenänderung benötigt werden
Zeile 4 - Elemente können nicht über das body-Tag hinaus vergrößert werden
Zeile 5 bis 6 - minHeight und minWidth legen die minimale Höhe bzw. Breite fest
Zeile 7 bis 8 - maxHeight und maxWidth legen die maximale Höhe bzw. Breite fest ( hier gleich dem Viewport des Browsers )

Windows 7 Fenster - Resizable dank jQuery UI

Step 4 - Resizeable Features designed by CSS

Eine Kleinigkeit fehlt allerdings noch: Die Elemente, die durch handles hinzugefügt werden wie bspw. der Resizeable-Cursor etc., müssen noch via CSS gestylt werden. Für jQuery UI gibt es Themes, die das natürlich schon beinhalten. Für unser Einsteiger-Beispiel soll erst einmal folgender Code, der in die style.css geschrieben werden muss, ausreichen:

CSS-Code - Resizeable .ui-resizable-handle {display:block;position:absolute;} .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle {display:none;} .ui-resizable-n,.ui-resizable-s {height:7px;left:0;width:100%;} .ui-resizable-n {cursor:n-resize;top:-5px;} .ui-resizable-s {bottom:-5px;cursor:s-resize;} .ui-resizable-e,.ui-resizable-w {height:100%;top:0;width:7px;} .ui-resizable-e {cursor:e-resize;right:-5px;} .ui-resizable-w {cursor:w-resize;left:-5px;} .ui-resizable-se,.ui-resizable-sw, .ui-resizable-nw,.ui-resizable-ne {height:12px;width:12px;} .ui-resizable-se {bottom:0;cursor:se-resize;right:0;} .ui-resizable-sw {bottom:0;cursor:sw-resize;left:0;} .ui-resizable-nw {cursor:nw-resize;left:0;top:0;} .ui-resizable-ne {cursor:ne-resize;right:0;top:0;}

Windows 7 Fenster in verschiedenen Fenstergrößen

Demo

Nun wären wir dann auch schon am Ende, ab jetzt ist eure Phantasie gefragt. Die strikte Trennung von Inhalt und Layout erlaubt es euch auch andere Themes zu erstellen, wie wäre es z.B. mit Fenster im Windows 2000 oder Mac OSX Style? Oder mehrere Fenster auf einmal? Wer von Euch bei der Umsetzung der zwei Tutorials alles alles richtig gemacht hat, der dürfte folgende Darstellung eines Windows 7 Fensters haben:

View Tutorial Demo

Auf meinem Blog habe ich eine Demo gebaut, die das Ganze auch noch etwas weiter treibt: Aero Peek, Fenster maximieren oder schließen, Taskbar und Startmenü, um nur einige Punkte zu nennen. Ich hoffe, dass ich euch einiges mit auf den Weg geben konnte, besonders über CSS3, wie nützlich es ist und wie es in Zukunft den Design-Alltag erleichtern wird.

Download

Auf Norman's Blog erhaltet ihr im übrigen auch das Endergebnis dieser kleinen Tutorial-Serie als ZIP zum Download.

Autor: Verfasst hat diesen zweiten Teil dieser kleinen Tutorial-Serie mit dem Thema "Windows 7 mit CSS3 und jQuery" der Gast-Blogger Norman Paschke, den wir über diesem Wege auf dem Webstandard-Blog herzlich willkommen heißen. Norman studiert Angewandte Informatik an der Technischen Universität Chemnitz und hat Anfang 2009 Norman's Blog ins Leben gerufen, in dem er sich inhaltlich den Themen "Web und Webdesign" verschrieben hat und hierzu neben Tutorials auch aktuelle Trends und Entwicklungen, wie bspw. auf dem Browsermarkt, aufgreift.

Werde auch du Gastautor im Webstandardblog!

Um Themengebiete wie diese, für die sich die Leser interessieren anbieten zu können, möchten wir über diesem Wege weiterhin anderen Bloggern die Möglichkeit geben, ihr Fachwissen mit unseren Lesern teilen zu können. Voraussetzung ist lediglich, dass sich diese Artikel in den vorhanden Kategorien unseres Blogs untergebracht werden können und der jeweilige Autor über entsprechendes Fachwissen verfügt.