How to design desktop functionality using jQuery-lwd plugin ?

0 0 1 minute read

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, zambiatek 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!