The great user experience of Windows can now be used on websites to provide content such as text, images, videos and more.

Windows Desktop Feeling for Websites is a Template based on a own jQuery plugin which can be used simply as a website or easily integrated into any website. This Template offers Layer-Window in the Windows Aero style, Desktop Icons, a interactive Taskbar and a Start Menu.

Features of Aero Windows

Special Feature: Live animated glossy Aero look (see the header Move)

Live animated glossy Aero look (see the header Move) Usual window buttons: minimize, resore, maximize and close

Double click support like in Windows (maximize, resore)

Active window is highlighted like in Windows

Scalable free the size of each window

Moving window by mouse dragging

If you drag a maximized windows it will restored to the original size, like in Windows

Usual Z-order management, as in Windows

+ Animated changing of the window size

+ Multiple configuration options

Features of Desktop Icons

Desktop icons can optionally create automated for each window

Movable desktop icons by dragging mouse

Marked desktop icon is highlighted visually, as in Windows

4 different background styles for desktop icons - just like in Windows

Double click support like in Windows (opening windows, focus of windows)

Label is automatically cut when needed

Features of the Taskbar

Feature: Show desktop button can change all windows in transparent windows

Show desktop button can change all windows in transparent windows Provides icons for open windows in the taskbar

Icons in the taskbar are interactive (minimize windows, window focus, restore window)

Active window is highlighted in the taskbar

Interactive startmenu

Taskbar can be hidden if desired

Configuration: Options of Aero Window

Window title

Window icon

Window start position X / Y (also centered possible)

Window default size

Window minimum size

Window status at the begin (minimized, maximized, normal, closed)

Window animation (30 different easing methods)

Window and mouse events generated by JavaScript function calls

Window generating by regular HTML links

Special windows for displaying images and photos

Window content: HTML, iframes, external sites, videos, pictures, text ...

Details of the Visual Elements

Windows with Aero Style

Useful Windows for Your Content

This interactive Windows with Aero Style can be individually configured and displays your content! HTML content, images, iframes and display external websites.

Aero Style

The windows are semi-transparent. You can see the background of the website through the window border. This Aero glass effect inside of the border opposite shifts as you move the entire window, thus ensuring an absolutely first-class user experience.

Use Aero Windows like in Windows Operating System

You can move, operate, minimize and maximize the window as well as the windows of an real Windows operating system. A button bar can be found in the upper right corner of each window. These buttons allow you to minimize the window depending on the current state, maximize, reset to the original size or close.



Hidden feature: By clicking on the windows header, you can maximize the window.



Just as the contents of each window you can choose the icon for each window and the window's title itself.



The configuration of the windows can be very individual. For example you can prohibit a window to be maximized or minimized. In this case the window would not offer these buttons. On the whole configuration options within the intended section is discussed in detail.

Window in Maximized Size

Maximizes the window has slightly different features.



A maximized window can not be moved. If you move the window, it reverts to its original size. It changes the status of "Maximized" to "Restored" and can be moved by dragging.



A maximized window can not be changed in size by using the mouse of the outer border.



Within the button bar (top right of the window) is now instead of the button "Maximize" "Restore" to a button.



Hidden feature: By clicking on the window border, the window size restore to the original window size.

Active Window, inactive Window

If a window is used, this is highlighted and active. An active window is always on top of all other windows.



Each window can be activated by clicking. All other windows are inactive immediately. Likewise, each window can be activated by normal use. There is always only one active window.



Recognize the active window through a different optical style. The "Close" button is permanently colored red:

Desktop Icons

Just like the Windows operating system, this Template can also represent interactive desktop icons.



The title and the icon used according to the configuration of the associated window.



If the title is too long, it will automatically cut and fitted with three points.

If you move your mouse over the desktop icon, a tooltip will appear with the full title.



The desktop icon has four very subtle but distinct visual emphasis to ensure the best possible user experience.



Inactive desktop icons do not have a visual background/border. If you move the mouse over an inactive icon, then get this icon, a very slight accentuation (Figure 2). If you now click on this icon, it will be highlighted much stronger (Figure 3). Leaving now the icon is clicked, the highlighting will be weaker (Figure 4), but not as weak as in Figure 2 If you click on another icon on the desktop or to another or any item, highlighting disappears and the icon is inactive again.

The Taskbar

Just like the Windows operating system, the Template can also represent an interactive taskbar.

The taskbar displays a icon for each open window. A tooltip with the full window title appears by moveing the mouse over the taskbar icon.



If you click on the icon in the taskbar, the corresponding window will be activated if it was not previously active. Active window will be minimized. Minimize window to be activated and restored to its original size.



The background of an icon from an active window is more visible than the others. Also here care very subtle effects for a pleasant user experience.

Show Desktop Button

If you move the mouse over the "Show Desktop" button in the taskbar, the contents of all windows disappears for a better overview. You see also hidden windows in back.

The Start Menu

Just like the Windows operating system this Template can also represent an interactive start menu.

The entries in the Start menu can be chosen freely (HTML). In our example are useful additional functions.



The Start menu opens by clicking the round Start menu icon. The Start menu can be closed by clicking anywhere on your desktop, or on a window or on any other item outside of the Start menu. If you click on an item within the Start menu, the stored function is invoked. The Start menu closes simultaneously.

Configuration Options of the Window

Window Title

Window Start Position X / Y (also centered)

Default window size

Minimum window size

Windows status at the begin (minimized, maximized, regular)

Window animation (30 different easing methods)

Window animation speed

Window button "close" show (yes, no)

Window button "minimize" show (yes, no)

Window option "movable" (yes, no)

Window option "resizable" (yes, no)

DesktopIcon show (yes, no)

DesktopIcon Image



Configuring the Taskbar:

Show Taskbar (yes, no)

Use this Template - Integrate the jQuery Plugin into Your Site

The following files must be included in the HEAD section of the website in order to use this template:

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

Generate Windows with regular HTML links

You can easily present the content of your links in aero windows. You only need to expand your existing regular links with a CSS class.



Example before:

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

After:

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

There are two different CSS classes:

AeroWindowLink

AeroWindowImageLink

Use for links with pictures the CSS class "AeroWindowImageLink". Images can be scaled with this class to each window size. By using the class "AeroWindowLink" is not possible to scale a image to each window size.





Generate Windows with JavaScript

To render a DIV element with the id "Window1" in an aero window. Use the following code:

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

You can configure each window on an individual basis. The default values will be used for non-specified configuration parameters:

< script type = "text/javascript" > $ ( '#Window1' ) . AeroWindow ( { WindowTitle : 'Windows for jQuery' , WindowDesktopIconFile : 'images/icons/default.png' , WindowStatus : 'window' , /* 'window', 'maximized', 'minimized', 'closed' */ WindowPositionTop : 200 , /* Posible are pixels or 'center' */ WindowPositionLeft : 100 , /* Posible are pixels or 'center' */ WindowOuterWidth : 300 , /* Only pixels */ WindowOuterHeight : 300 , /* Only pixels */ WindowMinWidth : 100 , /* Only pixels */ WindowMinHeight : 100 , /* Only pixels */ WindowDesktopIcon : true , /* true, false */ WindowResizable : true , /* true, false */ WindowMaximize : true , /* true, false */ WindowMinimize : true , /* true, false */ WindowClosable : true , /* true, false */ WindowDraggable : true , /* true, false */ WindowAnimationSpeed : 500 , WindowAnimation : 'easeOutCubic' , } ) ; </script>

Generate a New Window out of a Window

To create a window from inside of your windows simply linking the corresponding CSS CLASSES:

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

Control Aero Window from the Outside

Thanks to object-oriented programming can now also control all the windows from outside. You want control the window with the ID "Window1" from the outside. For example, use the following links for:

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

The following functions are available:

ResizeWindow ( 'restore' ) ; ResizeWindow ( 'minimize' ) ; ResizeWindow ( 'maximize' ) ; ResizeWindow ( 'close' ) ; FocusWindow ( ) ;

More experienced programmers can also retrieve and set properties.

Control Aero Windows from the inside

You can control the window using either the buttons or control as described also with content-links of your window. For example you can provide a link within your window, with the caption "Close this Window Now".

Useful Additional Functions

In the Start menu, you will find some useful additional features that allow you to sort the windows, minimize all windows at once or maximize all windows at once, or step by step.



The JavaScript functions can be modified if you want.



The three most significant additional functions:

Arrange All Open Windows In The Grid:

The function SortGrid(); sorts all open windows very clearly in the Grid. The screen space is utilized here as possible:

Sort All Open Windows by Overlaping:

The function SortOverlapping(); sorts all open windows one after the other as in the Windows operating system:

Minimize All Aero Windows:

The function minall(); minimizes all open windows simultaneously.

The function minallDelay(); animated minimizes all open windows step by step.

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



