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.
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
