Windows 7 UI & Windows Aero for jQuery
Premium visual experience of Windows 7 for Websites.
Demo: http://www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/
Project: http://www.soyos.net/Windows_7_UI_and_Windows_Aero_for_Websites.html
Window 7 UI & Windows Aero für jQuery ist ein kostenloses Plugin welches ganz einfach in jede Website eingebunden werden kann. Das Plugin bietet Fenster im Windows Aero Stil, Desktop Icons, eine Windows Taskleiste und ein Startmenü.
Die großartige User Experience von Windows 7 kann nun auch auf Websites verwendet werden, um Inhalter wie Text, Bilder, Videos usw. darzustellen.
Visuelle Elemente im Detail
Fenster im Aero Stil
Fenster in normaler Größe
Das interaktive Fenster im Aero Stil kann individuell konfiguriert werden und Inhalte wie HTML-Inhalt, Bilder, iFrames und ganze externe Websites anzeigen.
Aero Stil
Das Fenster ist halb transparent und lässt den Hintergrund durchscheinen. Dieser Aero Glas-Effekt innerhalb des Rahmens verschiebt sich entgegengesetzt beim Verschieben des gesamten Fensters und sorgt so für eine absolut erstklassige User Experience.
Fenster bedienen wie im Betriebssystem Windows
Die Aero Fenster für Websites können Sie genauso wie die Fenster des Windows Betriebssystems verschieben, verkleinern und vergrößern und Bedienen. Eine Schaltflächen-Leiste finden Sie in der oberen rechten Ecke des Fensters. Über diese Schaltflächen können Sie das Fenster je nach aktuellem Zustand minimieren, maximieren, in die originale Größe zurücksetzten oder schließen.
Versteckte Funktion: Durch klicken auf den Fenster-Rahmen können Sie das Fenster maximieren.
Genau wie den Inhalt jeden Fensters können Sie auch das jeweile Fenster-Icon und den Fenster-Titel selbst wählen.
Die Konfiguration der Fenster kann sehr individuell gestaltet werden. So können Sie z.B. einem Fenster verbieten maximiert oder minimiert zu werden. Das Fenster würde diese Schaltflächen dann nicht anbieten. Auf die gesamten Konfigurationsmöglichkeiten wird innerhalb des dafür vorgesehen Abschnitts detailliert eingegangen.
Fenster in maximierter Größe
Maximiert hat das Fenster leicht abweichende Funktionen die wir Ihnen gerne erläutern möchten.
Ein maximiertes Fenster kann nicht verschoben werden. Genau wie im Betriebssystem Windows wird das Fenster beim Verschieben direkt in die ursprüngliche originale Größe zurückgesetzt. Es wechselt den Zustand von “Maximiert” zu “Wiederhergestellt” und kann dann auch wieder verschoben werden.
Ein maximiertes Fenster kann mittels Maus am äußeren Rahmen nicht in der Größe geändert werden.
Innerhalb der Schaltflächen-Leiste (oben rechts im Fenster) befindet sich nun statt der Schaltfläche “maximieren” eine Schaltfläche zum “wiederherstellen”.
Versteckte Funktion: Durch klicken auf den Fenster-Rahmen wird das Fenster in die originale Größe zurückgesetzt.
Aktives Fenster, inaktives Fenster
Wird ein Fenster verwendet, ist dieses optisch hervorgehoben und aktiv. Ein aktives Fenster befindet sich immer im Vordergrund vor allen anderen Fenstern.
Jedes Fenster kann durch anklicken aktiviert werden. Alle anderen Fenster werden unmittelbar inaktiv. Ebenso kann jedes Fenster durch normale Verwendung aktiviert werden. Es existiert immer nur ein aktives Fenster.
Das aktive Fenster erkennen Sie durch die optische hervorheben. Die Schaltfläsche “Schließen” ist permanent rot gefärbt:
Desktop Icons
Genau wie das Betriebsystem Windows kann das Plugin auch interaktive Desktop Icons darstellen.
Der Titel und das verwendete Icon entsprecht der Konfiguration des dazugehörigen Fensters.
Ist der Titel zu lang, wird dieser automatisch abgeschnitten und mit drei Punkten versehen.
Fährt man mit der Maus über das Desktop Icon, wird ein Tooltip mit ungekürztem Titel eingeblendet.
Das Desktop-Icon hat 4 ganz subtile aber unterschiedliche visuelle Hervorhebungen, um eine bestmögliche User Experience zu gewährleisten.
Inaktive Desktop-Icons haben keinen visuellen Rahmen. Fährt man mit der Maus über ein inaktives Icon, so bekommt dieses Icon eine ganz leichte Hervorhebung (Abbildung 2). Klickt man nun dieses Icon an, wird die Hervorhebung wesentlich stärker (Abbildung 3). Verlässt man nun das angeklickte Icon, wird die Hervorhebung schwächer (Abbildung 4), jedoch nicht so schwach wie in Abbildung 2. Klickt man auf ein anderes Icon oder auf den Desktop oder auf ein anderes beliebiges Element, verschwindet die Hervorhebung ganz und das Icon ist wieder inaktiv.
Die Taskleiste
Genau wie das Betriebsystem Windows kann das Plugin auch interaktive Taskleiste darstellen.
Die Taskleiste zeigt für jedes geöffnete Fenster das entsprechende Icon an. Fährt man mit der Maus über das Icon erscheint im Tooltip der Fenster Titel
Klickt man auf das Fenster Icon in der Taskleiste, wir das entsprechende Fenster aktiviert sofern es vorher nicht aktiv war. Aktive Fenster werden minimiert. Minimiere Fenster werden aktiviert und in Originalgröße wiederhergestellt.
Der Hintergrund eines Icons von einem aktiven Fensters ist deutlicher sichtbar als die anderen und tritt optisch in den Vordergrund. Auch hier sorgen sehr subtile Effekte für eine angenehme User Experience.
Desktop anzeigen Schaltfläche
Fährt man mit der Maus über die rechte Schaltfläche “Desktop anzeigen” innerhalb der Taskleiste, so werden die Inhalte der Fenster ausgeblendet um eine bessere Übersicht aller Fenster darzustellen. So sehen Sie selbst verstecke Fenster, die sie normal nicht sehen:
Das Startmenu
Genau wie das Betriebsystem Windows kann das Plugin auch ein interaktives Startmenu
darstellen:
Die Einträge innerhalb des Startmenüs können frei gewählt werden. In unserem Code-Beispiel sind an dieser Stelle hilfreiche Zusatzfunktionen hinterlegt.
Das Startmenü öffnet sich durch klicken auf das Windows-Zeichen. Das Startmenü kann geschlossen werden, indem auf eine andere beliebige Stelle des Desktops geklickt wird, oder auf ein Fenster oder auf ein beliebiges anderes Element außerhalb des Startmenüs. Klickt man auf einen Eintrag innerhalb des Startmenüs, wird die hinterlegte Funktion aufgerufen. Das Startmenü schließt sich zeitgleich.
Konfigurationsmöglichkeiten der Fenster
- Fenster Titel
- Fenster Startposition X/Y (auch zentriert mögich)
- Fenster Standardgröße
- Fenster Mindestgröße
- Fenster Status beim öffnen (Minimiert, Maximiert, Normal)
- Fenster Animation (30 verschiedene Easing Methoden)
- Fenster Animation Geschwindigkeit
- Fenster Generierung durch Maus Events & JavaScript Funktionsaufrufe
- Fenster Button “schließen” anzeigen (ja, nein)
- Fenster Button “minimieren” anzeigen (ja, nein)
- Fenster Option “verschiebbar” (ja, nein)
- Fenster Option “Größe ändern” (ja, nein)
- DesktopIcon anzeigen (ja, nein)
- DesktopIcon Image
Konfiguration der Taskbar:
- Taskbar anzeigen (ja, nein)
Online Demo
Hier klicken um das online Demo von Windows 7 UI & Windows Aero for jQuery zu öffnen.
