Windows Desktop Feeling für Websites

Bietet Ihnen die User Experience und das Look & Feel von Windows innerhalb Ihrer Website.

Virtual Windows Desktop Feeling für Websites

Vorschau zu diesem Artikel

Keine Online Demo zu diesem Artikel verfügbar

Reguläre
Lizenz

10,00 €

Für eine Website
(Kommerziell und persönlich)

Sicher bezahlen mit PayPal

PayPal ist der Online-Zahlungsservice, mit dem Sie in Online-Shops sicher, einfach und schnell bezahlen – und das kostenlos.

Beschreibung

Windows Desktop Feeling für Websites ist ein 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 Inhalte wie Text, Bilder, Videos usw. darzustellen.

Der Unterschied zwischen dem neuen Plugin und dem alten Plugin "Aero Window for jQuery" sind zahlreiche zusätzliche GUI Elemente wie Taskbar, DesktopIcons, Startmenu. Ebenso sind zahlreiche sehr starke neue Features und zahlreiche technische Neuerungen hinzugekommen.

Features der Fenster

  • Besonderheit: Live animierter Glossy Aero Look (siehe Header beim Verschieben)
  • Gewohnte Fenster Buttons: Minimieren, Verkleinern, Maximieren und Schließen
  • Doppelklick Unterstützung wie in Windows (Maximieren, Verkleinern)
  • Aktives Fenster wird visuell hervorgehoben, wie in Windows
  • Vom Anwender stufenlos skalierbare Fenstergröße
  • Verschiebbare Fenster durch Maus dragging
  • Maus dragging bei maximierten Fenstern stellt die original Fenstergröße wieder her
  • Gewohntes Z-Order-Management wie in Windows
  • + Animierte Veränderung der Fenstergröße
  • + Vielfältige Konfigurationsmöglichkeiten

Features der Desktop Icons

  • Desktop Icons lassen sich optional für jedes Fenster automatisiert erstellen
  • Verschiebbare Desktop Icons durch Maus dragging
  • Markiertes Desktop Icon wird visuell hervorgehoben, wie in Windows
  • 4 unterschiedliche Markierungen je Desktop Icon - genau wie in Windows
  • Doppelklick Unterstützung wie in Windows (Öffnen von Fenstern, Fokussieren von Fenstern)
  • Beschriftung wird bei Bedarf automatisiert gekürzt

Features der Taskleiste

  • Besonderheit: Desktop Anzeigen Schaltfläche lässt alle Fenster transparent werden
  • Stellt Icons für geöffnete Fenster innerhalb der Taskleiste da
  • Icons in der Taskleiste sind interaktiv (Fenster minimieren, Fenster fokussieren, Fenster wiederherstellen)
  • Aktives Fenster wird innerhalb der Taskleiste optisch hervorgehoben
  • Interaktives Startmenu
  • Taskleiste lässt sich auf Wunsch verbergen

Konfigurationsmöglichkeiten der Fenster

  • Fenster Titel
  • Fenster Icon
  • Fenster Startposition X/Y (auch zentriert möglich)
  • Fenster Standardgröße
  • Fenster Mindestgröße
  • Fenster Status beim öffnen (Minimiert, Maximiert, Normal, Geschlossen)
  • Fenster Animation (30 verschiedene Easing Methoden)
  • Fenster Generierung durch Maus Events & JavaScript Funktionsaufrufe
  • Fenster Generierung durch reguläre HTML-Links
  • Spezielle Fenster zum Darstellen von Bildern und Fotos
  • Fensterinhalte: HTML, iFrames, externe Websites, Videos, Bilder, Text...

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 jeweilige 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.

Aero Window for Websites

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.

Maximized Aero Window for Websites

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äche "Schließen" ist permanent rot gefärbt:

Window with a different style

Desktop Icons

Genau wie das Betriebsystem Windows kann das Plugin auch interaktive Desktop Icons darstellen.

Der Titel und das verwendete Icon entsprechend 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.

Windows Desktop for Websites

Die Taskleiste

Genau wie das Betriebssystem 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.

Windows Taskbar for Websites

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:

Show Desktop Button for Websites

Das Startmenu

Genau wie das Betriebsystem Windows kann das Plugin auch ein interaktives Startmenu
darstellen:
Windows Startmenu for Websites
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)

jQuery Plugin in eine Website einbinden

Folgende Dateien müssen in der HEAD-Bereich der Website eingebunden werden, um das Plugin verwenden zu können:

  1.   <link href="css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css"/>  
  2.   <link href="css/AeroWindow.css" rel="stylesheet" type="text/css"/>  
  3.   <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>  
  4.   <script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js"></script>  
  5.   <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>  
  6.   <script type="text/javascript" src="js/jquery-AeroWindow.js"></script>

Fenster erstellen auf einer Website

Fenster erstellen mit normalen HTML-Links

Sie können kinderleicht vorhandene Links im Aero Fenster öffnen. Dazu müssen Sie lediglich Ihre bereits vorhandenen normalen Links mit einer CSS-Klasse erweitern.

Beispiel vorher:

  1.   <a href="about.html">Über uns</a>

Nachher:

  1.   <a href="about.html"class="AeroWindowLink">Über uns</a>


Es gibt 2 unterschiedliche Klassen:

  • AeroWindowLink
  • AeroWindowImageLink

Verwenden Sie beim Verlinkungen auf Bilder die Klasse "AeroWindowImageLink" für ein optimales Ergebnis. Bilder können mit dieser Klasse stufenlos skaliert werden durch ändern der Fenstergröße. Bei der Verwendung der Klasse "AeroWindowLink" ist die Skalierung nicht möglich.

Fenster erstellen mit JavaScript

Sie möchten ein DIV-Element mit der ID "Window1" in einem Fenster darstellen. Verwenden Sie folgenden Code:

  1.   <script type="text/javascript">  
  2.     $('#Window1').AeroWindow({  
  3.         WindowTitle:    'Mein erstes Beispiel Fenster',  
  4.     });  
  5.   </script>

Sie können jedes Fenster nach individuell konfigurieren. Für nicht angegebene Konfigurationsparameter werden später die default-Werte verwendet:

 

  1.   <script type="text/javascript">  
  2.     $('#Window1').AeroWindow({  
  3.         WindowTitle:                    'Windows for jQuery',  
  4.         WindowDesktopIconFile:          'images/icons/default.png',  
  5.         WindowStatus:                   'window',   /* 'window', 'maximized', 'minimized', 'closed' */  
  6.         WindowPositionTop:              200,        /* Posible are pixels or 'center' */  
  7.         WindowPositionLeft:             100,        /* Posible are pixels or 'center' */  
  8.         WindowOuterWidth:               300,        /* Only pixels */  
  9.         WindowOuterHeight:              300,        /* Only pixels */  
  10.         WindowMinWidth:                 100,        /* Only pixels */  
  11.         WindowMinHeight:                100,        /* Only pixels */  
  12.         WindowDesktopIcon:              true,       /* true, false */  
  13.         WindowResizable:                true,       /* true, false */  
  14.         WindowMaximize:                 true,       /* true, false */  
  15.         WindowMinimize:                 true,       /* true, false */  
  16.         WindowClosable:                 true,       /* true, false */  
  17.         WindowDraggable:                true,       /* true, false */  
  18.         WindowAnimationSpeed:           500,  
  19.         WindowAnimation:                'easeOutCubic',  
  20.     });  
  21.   </script>

Fenster erstellen aus einem Fenster heraus

Verwenden Sie zum Erstellen von Fenstern aus Fenstern innerhalb Ihrer Verlinkung einfach die entsprechenden CSS-KLASSEN

Steuerung der Fenster

Fenster von außen steuern

Dank objektorientierter Programmierung lassen sich nun alle Fenster auch von außen steuern.

Sie möchten zB ihr Fenster mit der ID "Window1" von außen steuern. Verwenden Sie zB folgende Links dafür:

  1.   <a href="#" onclick="$('#Window1').data('AeroWindow').ResizeWindow('minimize');">Minimieren</a>  
  2.   <a href="#" onclick="$('#Window1').data('AeroWindow').ResizeWindow('close');">Schließen</a>

Folgende Funktionen stehen Ihnen beispielsweise zur Verfügung:

  1.   ResizeWindow('restore');  
  2.   ResizeWindow('minimize');  
  3.   ResizeWindow('maximize');  
  4.   ResizeWindow('close');  
  5.   FocusWindow();


Erfahrenere Programmiere können auch Eigenschaften abrufen und setzen.

Fenster von innen steuern

Sie können das Fenster entweder über die Schaltflächen steuern oder wie im Abschnitt "Fenster von außen Steuern" auch über den angezeigten Content Ihres Fensters steuern. Somit können Sie beispiesweise einen Link innerhalb des Fensters anbieten mit der Caption "Fenster jetzt schließen".

Hilfreiche Zusatzfunktionen

Im Startmenü finden Sie ein paar hilfreiche Zusatzfunktionen, mit denen Sie zB die Fenster übersichtlich sortieren können, alle Fenster auf einmal minimizeren, alle Fenster auf einmal maximieren, oder auch alle Fenster Step by Step minimizieren oder maximieren.

Die JavaScript-Funktionen können je nach Interesse modifiziert werden.

Die 3 wichtigsten Zusatzfunktionen:

Alle offenen Fenster im Gitter anordnen:

Die Funktion SortGrid(); sortiert alle geöffneten Fenster sehr übersichtlich im Gitter. Der Bildschirmplatz wird dabei bestmöglich ausgenutzt:

Windows sort as Grid

Alle offenen Fenster überlappend sortieren:

Die Funktion SortOverlapping(); sortiert alle geöffneten Fenster im Fächer wie man es aus dem Betriebssystem Windows kennt:

Windows sort overlapping

Alle Fenster minimieren:

Die Funktion minall(); minimiert alle geöffneten Fenster gleichzeitig.
Die Funktion minallDelay(); minimiert alle geöffneten Fenster animiert Schritt für Schritt.

History und Bugs

Version 2.5 (10.01.2011)

NEW: Ajax loading

  • + Improved Animations
  • + Improved Look & Feel

Version 2.0 (05.12.2010)

NEW: Aero Lightbox

New version included Aero Lightbox!

  • + Improved user interface
  • + Preloading
  • + Intelligent window orientation
  • + Improved Look & Feel

Online Demo - Aero Lightbox:
www.soyos.net/tl_files/demos/Windows-7-UI-and-Windows-Aero-for-Websites/lightbox.html