Aquileo | How to design desktop functionality using jQuery-lwd plugin ?

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.

How to design desktop functionality using jQuery-lwd plugin ?

Explore