Related Articles

Related Articles

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :