Simone - Taskbar and window

Download

Demos

Shared

• Basics: The most basic functionality: one taskbar and one window with no additional options.


• Containments: Difference between window “containment” option set to “viewport” and window “containment” options set to “visible”.

Taskbar

• Taskbar “propagateWindowBlur” option: Difference between taskbar “propagateWindowBlur” option set to false and taskbar “propagateWindowBlur” options set to true.


• Taskbar autohide: Two taskbars with autohide on, one with default durations, and one with custom durations.


• Draggable taskbars: Two draggable taskbars with default options.


• Taskbar draggable between edges: Shows what it means that taskbar is draggable between edges.


• Taskbar “dropOnExisting” option: Difference between “dropOnExisting”: true and “dropOnExisting”: false.


• Taskbar “menuAutoOpenOnBrowse” option: Difference between window “menuAutoOpenOnBrowse” option set to false and window “menuAutoOpenOnBrowse” options set to true.


• Resizable taskbars: Resizable posibilities of horizontal and vertical taskbar.


• Taskbar collisions resolving: Three draggable taskbars, showing how collisions resolving works.


• Taskbar system buttons: Shows all system buttons in one taskbar.


• Taskbar “windowButtonsIconsOnly” option: Difference between “windowButtonsIconsOnly”: true and “windowButtonsIconsOnly”: false.


• Sortable window buttons: Difference between “windowButtonsSortable”: true and “windowButtonsSortable”: false.

Window

• Confirm close functionality: Window confirm close functionality with some customization options.


• Window durations: Shows how different durations are applied to window.


• Window “embeddedContent” option: Shows how windows containing embedded content, like iframe, Flash game, or QuickTime video, can be dealt with.


• Window groups: Basic usage of window groups.


• Window interactions: Demonstrates window interactions: draggable and resizable.


• Window “maximizedDraggable” option: Difference between “maximizedDraggable”: true and “maximizedDraggable”: false.

===================================================

Simone is JavaScript window manager consisting of two widgets: taskbar and window, providing a desktop-like experience. It’s especially useful for single-page applications.

Features

• Easy start for developers. API known from jQuery UI.


• jQuery UI Themes compatible with no additional setup. Works with jQuery UI ThemeRoller too.


• Customizable with options, events and methods.


• Built-in debugger.


• Comes with tests.


• Utilizies well-known patterns, present in other window managers.


• Comes with localization support nad multilingual capabilities.


• Widgets are to a point aware of each other.


• Content-agnostic windows.


• Software in active development.

Supported browsers

Only modern browsers are supported by Simone. No support for legacy browers, sorry.

Certain API’s, like fullscreen API, are missing in older browsers. Graceful degradation if provided.

===============================

1. INCLUDE JS AND CSS FILES

<!-- first, include jQuery -->
<script src="/js/jquery/jquery.js"></script>

<!-- second, jQuery UI Theme and jQuery UI itself is needed -->
<link href="/js/jquery-ui/themes/sunny/jquery-ui.css" rel="stylesheet">
<script src="js/jquery-ui/jquery-ui.js"></script>
<!-- it's also recommended to include jQuery UI Datepicker language files -->
<script src="/js/jquery-ui/i18n/jquery.ui.datepicker-all.js"></script>

<!-- now, include Simone -->
<link href="/js/simone/simone.css" rel="stylesheet">
<script src="/js/simone/simone.js"></script>
<!-- include translations after widgets has been included -->
<script src="/js/simone/i18n/simone.all.js"></script>

2. HTML

<div class="taskbar"></div>

<div class="window"></div>

<div class="demo">
	<div class="description">...</div>
</div>

3. JAVASCRIPT

$( document ).ready( function () 
	"use strict";

	// taskbar has to be created first
	$( ".taskbar" ).taskbar();

	// window is binded to taskbar widget,
	// so it has to be created second
	$( ".window" ).window();
);

 

 

 

Simone - Taskbar and window