Open In App
Related Articles

How to design desktop functionality using jQuery-lwd plugin ?

Improve Article
Save Article
Like Article

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


<!DOCTYPE html>
    <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=
        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" 
    <script type="text/javascript"
    <!--jQuery-lwd JS library -->
    <script type="text/javascript"
    <div id="taskbar">
        <div id="lwd-taskbar-left" 
            <button id="addWindowbuttonID" 
                class="ui-button lwd-taskbar-button 
                ui-state-default ui-corner-all">
                Add new window
            <div class="taskbar-spacer"></div>
    $(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);
                    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'
        $('#theme').change(function () {
            $("head link#themecss").attr("href", $(this).val());

Output: The user can try different options or features using the plugin.

Last Updated : 20 Nov, 2020
Like Article
Save Article
Similar Reads
Related Tutorials