Windows Desktop Feeling for Websites

Offers the User Experience and the Look & Feel of Windows Operating System within Your Website.

Virtual Windows Desktop for 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.

Description

Click here to read the article in German!

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.

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

  • Website Template: Use your website as a Windows Desktop!
  • Aero Lightbox: This plugin can be easily integrated into any website and can be also used simple as Aero Lightbox!

Features of Aero Windows

  • Special Feature: 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
  • 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.

Aero Window for Websites

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.

 

Maximized Aero Window for Websites

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:

Window with a different style

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.

 

Windows Desktop for Websites

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.

 

Windows Taskbar for Websites

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.

Show Desktop Button for Websites

The Start Menu

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

Windows Startmenu for Websites

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:

 

  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>

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:

 

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

After:

  1. <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:

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

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

  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>

Generate a New Window out of a Window

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

  1. <a href="#" onclick="$('#Window1').data('AeroWindow').ResizeWindow('minimize');">Minimieren</a>
  2. <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:

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

The following functions are available:

  1. ResizeWindow('restore');
  2. ResizeWindow('minimize');
  3. ResizeWindow('maximize');
  4. ResizeWindow('close');
  5. 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:

 

Windows sort as Grid

Sort All Open Windows by Overlaping:

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

Windows sort overlapping

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