In this article, we will learn to design window manager using Simone plugin which is completely based on HTML, JavaScript, and jQuery. It gives single web page applications with simple desktop-like features.
Download the pre-compiled files from the official website before the following code implementations. Please take care of proper file paths in your project directory.
Example 1: The following code demonstrates the basic taskbar with window with default options.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< script src = "../common/libs.js" ></ script >
< style >
p {
padding: 20px 20px;
}
</ style >
</ head >
< body class = "no-top-bar" >
< script class = "demo-js" >
$(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();
});
</ script >
< div class = "demo-html" >
< div class = "taskbar" ></ div >
< div class = "window" ></ div >
< div class = "demo" >
< div class = "description" >
< p style = "text-align:center" >
This demonstrates the basic
taskbar and one window,
both with default options.
</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates the window containment set to “viewport” and “visible”. Refer the output with resizing and drag of the windows.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< script src = "../common/libs.js" ></ script >
</ head >
< body class = "no-top-bar" >
< script class = "demo-js" >
$(document).ready(function () {
"use strict";
// Create first taskbar
var $taskbar = $(".taskbar").taskbar({
windowsContainment: "viewport",
buttons: {
openWindow: {
label: "Open window (viewport)"
}
},
buttonsOrder: ["openWindow"]
});
// Bind events to taskbar window opener
var $taskbarOpen = $(".taskbar")
.taskbar("option", "buttons.openWindow")
// Get jQuery object of the button created
.$element
.on("click", function () {
$("< div ></ div >")
.window({
taskbar: $taskbar,
title: "Viewport"
});
});
// Create second taskbar
var $taskbar2 = $(".taskbar2").taskbar({
windowsContainment: "visible",
horizontalStick: "top left",
buttons: {
openWindow: {
label: "Open window (visible)"
}
},
buttonsOrder: ["openWindow"]
});
// Bind events to second taskbar window opener
var $taskbarOpen = $taskbar2
.taskbar("option", "buttons.openWindow")
// Get jQuery object of the button created
.$element
.on("click", function () {
$("< div ></ div >")
.window({
taskbar: $taskbar2,
title: "Visible"
});
});
});
</ script >
< div class = "demo-html" >
< div class = "taskbar" ></ div >
< div class = "taskbar2" ></ div >
< div class = "demo" >
< div class = "description" >
Window containment describe
boundaries in which window
exists. There are
windowsContainment and
containment. Windows on the
top taskbar has "containment"
set to "viewport", and the
bottom taskbar has
"containment" set to "visible".
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 3: The following code demonstrates the window interactions like “drag” and “resize” events taking place.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< script src = "../common/libs.js" ></ script >
</ head >
< body class = "no-top-bar" >
< script class = "demo-js" >
$(document).ready(function () {
"use strict";
// Tnitialize taskbar and
$(".taskbar").taskbar();
// Initialize window
$(".window").window({
title: "Draggable or resizable",
containment: "visible",
width: 500,
height: 300,
// Logs all events
dragStart: function (event, ui) {
demo.log("dragStart");
},
drag: function (event, ui) {
// Log drag event
if (Math.random() < 0.05 ) {
demo.log("drag");
}
},
dragStop: function (event, ui) {
// Logs event when the drag is stopped
demo.log("dragStop");
},
resizeStart: function (event, ui) {
demo.log("resizeStart");
},
resize: function (event, ui) {
// Log resize event
if (Math.random() < 0.05) {
demo.log("resize");
}
},
resizeStop: function (event, ui) {
demo.log("resizeStop");
},
});
// Containment change value is saved
$(".switch-containment").on("click", function () {
var containment = $(".window")
.window("option", "containment");
// When the value is toggled
containment = containment ===
"viewport" ? "visible" : "viewport";
// Setting the new value
$(".window").window("option",
"containment", containment);
// Button click value is set
$(this).find("span.state")
.text("\"" + containment + "\"");
}).button();
});
</script>
< div class = "demo-html" >
< div class = "taskbar" ></ div >
< div class = "window" ></ div >
< div class = "demo" >
< div class = "description" >
Window drag and resize
events are triggered.
</ div >
< button class = "switch-containment" >
Switch containment (currently:
< span class = "state" >"visible"</ span >)
</ button >
< div class = "log" ></ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 4: The following code demonstrates to embed video content within “iframe” of window.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< script src = "../common/libs.js" ></ script >
</ head >
< body class = "no-top-bar" >
< script class = "demo-js" >
$(document).ready(function () {
"use strict";
// Initialize taskbar
$(".taskbar").taskbar();
// Initialize window with iframe
// with the basic one
$(".window-demo").window({
embeddedContent: true,
// Widget class is needed for
// applying styles to overlay
widgetClass: "window-demo-widget",
title: "Basic window",
minWidth: 630,
minHeight: 340
});
// Initialize window containing
// desired video
$(".window-youtube").window({
embeddedContent: true,
title: "Video",
minWidth: 410,
minHeight: 250
});
});
</ script >
< style class = "demo-css" >
/* center the iframe and remove
borders */
.simone-window-content iframe {
display: block;
margin: 0px auto;
border: none;
}
/* Apply custom styles to
overlay of window */
.window-demo-widget
.simone-window-content-overlay {
opacity: 0.3;
background: orange;
}
</ style >
< div class = "demo-html" >
< div class = "taskbar" ></ div >
< div class = "window-demo" >
<!-- Embed the very first
window in an iframe -->
< iframe src = "mybasic.html" width = "600" height = "300" >
</ iframe >
</ div >
< div class = "window-youtube" >
<!-- Embed some mp4 or
YouTube video -->
< iframe src = "sampleVideo.mp4" width = "400" height = "250" >
</ iframe >
</ div >
< div class = "demo" >
< div class = "description" >
This demo shows how windows
containing embedded content
like iframe, or videos can
be included. < br >Set
embeddedContent option to
true< br >Window containing basic
window has user custom styles
while window containing video
has the default styles.
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 5: The following code demonstrates quick window maximization and slow window minimization.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< script src = "../common/libs.js" ></ script >
</ head >
< body class = "no-top-bar" >
< script class = "demo-js" >
$(document).ready(function () {
"use strict";
// Initialize taskbar
$(".taskbar").taskbar();
// Window with default options
// initialized
$(".window-default").window({
title: "Quick maximize"
});
// Custom durations for animation
$(".window-custom").window({
title: "My custom durations",
durations: {
maximize: 1100,
minimize: 400,
restore: false,
show: "fast"
}
});
// "maximize" method with my
// custom time duration
$(".quick-maximize").on("click",
function () {
// 70 ms approx time is enough
// for user to notice
$(".window-custom")
.window("maximize", 70);
}).button();
// "minimize" method with my
// custom time duration
$(".slow-minimize").on("click",
function () {
// Slow for example like
// 3.5 seconds
$(".window-custom")
.window("minimize", 3500);
}).button();
});
</ script >
< div class = "demo-html" >
< div class = "taskbar" ></ div >
< div class = "window-default" ></ div >
< div class = "window-custom" >
< button class = "quick-maximize" >
Quick window maximization
</ button >
< button class = "slow-minimize" >
Slow window minimization
</ button >
</ div >
< div class = "demo" >
< div class = "description" >
< p >< b >
This shows window flow like
maximizing, minimizing,
restoring and showing.
</ b ></ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 6: The following code demonstrates the sortable event triggers.
<!DOCTYPE html> < html >
< head >
< meta charset = "UTF-8" >
< script src = "../common/libs.js" ></ script >
</ head >
< body class = "no-top-bar" >
< script class = "demo-js" >
$(document).ready(function () {
"use strict";
$(".taskbar").taskbar({
// Log events
sortableStart: function () {
demo.log("sortableStart");
},
sortableSort: function () {
// Log sortableSort
if (Math.random() < 0.05 ) {
demo.log("sortableSort");
}
},
sortableChange: function () {
demo.log("sortableChange");
},
sortableStop: function () {
demo.log("sortableStop");
}
});
// Initialize 3 windows and minimize them
$(".window")
.window()
.window("minimize", false);
});
</script>
< div class = "demo-html" >
< div class = "taskbar" ></ div >
< div class = "window" ></ div >
< div class = "window" ></ div >
< div class = "window" ></ div >
< div class = "demo" >
< div class = "description" >
< p >< b >This shows when sortable
events are triggered.
</ b >< br >
</ p >
</ div >
< div class = "log" ></ div >
</ div >
</ div >
</ body >
</ html >
|
Output: