This article will help you to design a basic desktop engine using the jQuery-UI lwd plugin. This plugin is very light weighted and totally based on JavaScript and CSS.
The desktop engine provides some following features for web developers –
- Movable
- Resizable
- Focus on active window
- Restore windows on click
- Minimizable, Maximizable
Download all the required pre-compiled files from the official Github and save it in your working folder. Please take care of file paths during code implementation
HTML
<!DOCTYPE html> < html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
<!--jQuery UI CSS library -->
< link href = "jquery-ui.structure.min.css"
rel = "stylesheet" type = "text/css" />
<!--jQuery-lwd CSS libraries -->
< link id = "themecss" href =
"jquery-lwd/themes/windows2000/jquery-ui.theme.css" rel = "stylesheet" type = "text/css" />
< link href = "jquery-lwd/jquery-lwd.structure.css"
rel = "stylesheet" type = "text/css" />
<!--jQuery UI and jQuery library -->
< script type = "text/javascript" src = "jquery.min.js" >
</ script >
< script type = "text/javascript"
src = "jquery-ui.min.js" >
</ script >
<!--jQuery-lwd JS library -->
< script type = "text/javascript"
src = "jquery-lwd/jquery-lwd.js" >
</ script >
</ head >
< body >
< div id = "taskbar" >
< div id = "lwd-taskbar-left" style = "display:inline-block" >
< button id = "addWindowbuttonID" class="ui-button lwd-taskbar-button
ui-state-default ui-corner-all">
Add new window
</ button >
< div class = "taskbar-spacer" ></ div >
</ div >
</ div >
</ body >
< script >
$(document).ready(function () {
var intCounter = 1;
/* On click event of button,
new window is added */
$('#addWindowbuttonID').click(function () {
var $objWindow = $('< div class = "window" >Window '
+ intCounter + '</ div >');
var intRandom = Math.floor(
(Math.random() * 12) + 1);
$($objWindow).appendTo('body');
$objWindow.window({
title: 'My window ' + intCounter,
width: 480,
height: 320,
position: {
my: 'left+' + 200 + ', top+' + 200,
at: 'left top',
of: window
},
maximizable: true,
minimizable: true,
icon: 'src/jquery-lwd/themes/windows2000/'
+ 'images/icons/' + intRandom + '.png'
});
intCounter++;
});
$('#taskbar').taskbar();
$('#theme').change(function () {
$("head link#themecss").attr("href", $(this).val());
});
});
</ script >
</ html >
|
Output: The user can try different options or features using the plugin.