How to design desktop functionality using jQuery-lwd plugin ? Last Updated : 23 Jul, 2024 Comments Improve Suggest changes Like Article Like Report 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 -MovableResizableFocus on active windowRestore windows on clickMinimizable, MaximizableDownload 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. Comment More infoAdvertise with us Next Article How to design desktop functionality using jQuery-lwd plugin ? G geetanjali16 Follow Improve Article Tags : JavaScript Web Technologies HTML CSS JQuery jQuery-Misc jQuery-Plugin +3 More Similar Reads How to design login dialog using jQuery EasyUI Mobile ? EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. In this article, we will learn to design login dialog and message dialo 3 min read How to design window manager using jQuery Simone Plugin ? 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 implement 6 min read How to design tree structure for files using jQuery EasyUI Mobile ? EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and, Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. It helps in building features for interactive web and mobile applicati 2 min read How to design file upload feature for forms using jQuery EasyUI? EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers. Download all the required pre-compiled files from the official websit 2 min read How to use jQuery library and call functions from it ? In this article, we will see how we can include the jQuery library in the code & use the different call functions. We will be adding some animation effects to see its uses. jQuery is a lightweight JavaScript library that was built to simplify complex JavaScript tasks by generalizing various conc 7 min read How to Build Simple Terminal like Website using jQuery ? Terminal is one of the most common tool used by developers. Many applications, frameworks, and even programming languages have more function which can be invoked using command line interface. Most of the computers come with at least one terminal in their operating system with command prompt now most 4 min read jQuery UI Introduction jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is the perfect choice. Features: jQue 2 min read How to execute jQuery Code ? jQuery is an open-source feature-rich Javascript library that is designed for the simplification of HTML DOM Tree traversal & manipulation, event-handling & CSS animation. It is quite popular for its features like light-weight, fast, small, etc, that make it easier to use. The purpose of usi 4 min read LinkedIn Login Form Using HTML and CSS Nowadays, a professional website LinkedIn very popular. This UI has generally seen on the “LinkedIn†website. In this article, we will create a LinkedIn Login UI using HTML and CSS. Below are the two steps on how to do it. This will help the beginner to build some awesome UI using HTML and CSS by re 3 min read jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java 7 min read Like