How to create desktop window with taskbar using jquery-lwd

sogata (64)in #utopian-io • 6 years ago (edited)

What Will I Learn?

You will learn how to download and install jQuery-lwd
You will learn how create default taksbar and taksbar with clock
You will learn how to create a window
You will learn how add component and icon for window

Requirements

Basic Knowledges about HTML
Basic Knowledges about JavaScript
Need to install or host jQuery, jQuery-UI and jquery-lwd

Difficulty

Basic

Tutorial Contents

To create a window with taskbar on HTML element like on desktop we can use a jQeury Plugin that was commit by mstellmacher. It's jquery-lwd, jQuery-lwd is a plugin to build desktop-engine. For more detail lets pay attention on steps bellow :

[Preparing]

Download jQuery -lwd plugin on github : https://github.com/mstellmacher/jquery-lwd
Extract scr, lib and stylesheet folder to a folder

[Creting HTML element]

Open your text editor, Create new file save it as index.html and in previou folder that extracted scr , lib and stylesheet folder
Add the HTML element as usual.

<html>
<head>
<title>Dekstop-Engine</title>
</head>
<body>
</body>
</html>

[Include the jQuery, jQuery UI and jquery-lwd plugin]

When you donwload jQuery-lwd plugin you also download jQuery and jQuery Folder that was placed in lib folder.

Since jQuery-lwd part of jQuery UI so we need to include jQuery and jQuery UI file.

 <script type="text/javascript" src="/lib/jquery-ui/jquery.min.js"></script>
 <script type="text/javascript" src="/lib/jquery-ui/jquery-ui.min.js"></script>
<link href="/lib/jquery-ui/themes/default/jquery-ui.css" rel="stylesheet" type="text/css" />

Include jQuery-lwd Plugin

  <script type="text/javascript" src="/src/jquery-lwd/jquery-lwd.js"></script>
<link href="/src/jquery-lwd/themes/windows2000/jquery-lwd.css" rel="stylesheet" type="text/css" />

[Creating the Taksbar]

To create taksbar you just mention taksbar for id.

<div id="taskbar"></div>

To add clock on taksbar you need add data-clock attribut with the value is true, like this:

<div id="taskbar" data-clock="true"></div>

Save the file and try to run

[Creating Window]

To create the window with jQuery-lwd plugin you just need add .window classs

<div class="window">Windows Example</div>

To add windows title, add the data-title attribute with the value is The title like this.

<div class="window"
    data-title="sogata">
    Windows Example</div>

To set the size of window we can use data-height and data-width attribut like this

<div class="window"
    data-title="sogata"
    data-width="600"
    data-height="400"
    >Windows Example</div>

To set window position, use data-positionY and data-positionX attribut

data-positionY="100"
 data-positionX="100"

To add minimize and maximizi button use data-maximizable and data-manimizable attribut with the value is true

<div class="window"
    data-title="sogata"
    data-width="600"
    data-height="400"
    data-positionY="100"
    data-positionX="100"
    data-maximizable="true"
    data-minimizable="true"
    >Windows Example</div>

The last is to add icon windows, use data-icon attribut and the value is the link of image. In this tutorial I use the internet image for sample. You can choose any image up to you.

<div class="window"
    data-title="sogata"
    data-width="600"
    data-height="400"
    data-positionY="100"
    data-positionX="100"
    data-maximizable="true"
    data-minimizable="true"
   data-icon="windows-icon-png-5816.png"
    >Windows Example</div>

Finish, Here the full code

<html>
<head>
    <title>Dekstop-Engine</title>
    <link href="lib/jquery-ui/themes/default/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="src/jquery-lwd/themes/windows2000/jquery-lwd.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="lib/jquery-ui/jquery.min.js"></script>
    <script type="text/javascript" src="lib/jquery-ui/jquery-ui.min.js"></script>
    <script type="text/javascript" src="src/jquery-lwd/jquery-lwd.js"></script>
</head>
<body>
<div id="taskbar" data-clock="true"></div>
<div class="window"
    data-title="sogata"
    data-width="600"
    data-height="400"
    data-positionY="100"
    data-positionX="100"
    data-maximizable="true"
    data-minimizable="true"
    data-icon="windows-icon-png-5816.png"
    >Windows Example</div>
</body>
</html>

FULL FILE ON GDRIVE

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

#tutorials #opensource #jquery #aceh

6 years ago in #utopian-io by sogata (64)

Sort:

yokunjon (62) 6 years ago

Your contribution cannot be approved because it does not follow the Utopian Rules.

Violated Rule:

Design or video editing related tutorials, gameplay, simple on-screen instructions, ubiquitous functions (Save, Open, Print, etc.) or basic programming concepts (variables, operators, loops, etc.) will not be accepted.

My Opinion:

A tutorial must be informative and explanatory, but also "tutor". This tutorial lacks "tutor"ing, and it is nothing more than an explanation of a documentation.
Too trivial.

You can contact us on Discord.

[utopian-moderator]

$0.00

STEEM 0.27

TRX 0.13

JST 0.032

BTC 63096.57

ETH 2954.05

USDT 1.00

SBD 3.55