Skip to content
Related Articles

Related Articles

Improve Article

How to design desktop functionality using jQuery-lwd plugin ?

  • Last Updated : 20 Nov, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :