JS98 is a plain TypeScript/JavaScript + CSS library for making interactive Windows 98 like environments in the browser.
- Desktop Icons which can by default moved and activated in a Windows like fashion.
- Windows which can by default be maximized, minimized, closed, dragged and resized.
- Clone or download this repository.
- Create a index.html of your liking.
- Paste 98.js, style.css and the /res folder from the repository in the same folder al your index.html file.
- Make a link to the style.css file.
- Add a tag element to your index.html file and set the src to the 98.js file.
- After that create a new script element in which you can use the classes provided.
If you use TypeScript you can use the 98.ts file in the /source folder
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>JS98 example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script src="98.js"></script>
<script>
//your code here
</script>
</body>
</html>
- First create a new desktop to which you can later add icons & windows.
var desktop = new JS98.Desktop()
- Create a new desktop icon and add it to the desktop.
var icon = new JS98.Icon()
icon.title = "Insert title here"
desktop.Add(icon)
- Make it so it opens a new window
icon.action = function ()
{
var window = new JS98.Window()
window.size = new JS98.Vector2(40, 40)
window.position = new JS98.Vector2(100, 100)
let content = document.createElement("div")
content.innerHTML = "Insert HTML here"
window.content = content
window.title = "Insert window title here"
window.icon = "Insert img src here"
desktop.Add(window)
}
See the documentation for all other parameters.
- Custom context menu's
- A taskbar
- Start button
Type |
Name |
HTMLElement |
element |
IconLayer |
iconLayer |
WindowLayer |
windowLayer |
Return type |
Name |
void |
Add(Icon icon / Window window) |
void |
Remove(Icon icon / Window window) |
Type |
Name |
HTMLElement |
parent |
HTMLElement |
element |
HTMLCanvasElement |
canvas |
CanvasRenderingContext2D |
ctx |
Icon[] |
icons |
Icon |
clicked |
{start:Vector2,state:mouseStates} |
mouse |
Return type |
Name |
void |
Add(Icon icon) |
void |
Remove(Icon icon) |
Type |
Name |
HTMLElement |
parent |
HTMLElement |
element |
Window[] |
windows |
Return type |
Name |
void |
Add(Window window) |
void |
Remove(Window window) |
Type |
Name |
HTMLElement |
parent |
HTMLElement |
element |
HTMLElement |
titleSpan |
function |
action |
Vector2 |
position |
Vector2 |
size |
string |
title |
boolean |
selected |
Return type |
Name |
void |
Execute() |
void |
Select() |
void |
Deselect() |
void |
Move(Vector2 position) |
Type |
Name |
HTMLElement |
parent |
HTMLElement |
element |
HTMLElement |
body |
Vector2 |
minSize |
boolean |
fullscreen |
boolean |
resizeAble |
boolean |
minimizeAble |
boolean |
maximizeAble |
boolean |
closeAble |
Vector2 |
position |
Vector2 |
size |
string |
title |
string |
icon |
HTMLElement |
content |
boolean |
active |
Return type |
Name |
void |
SetPosition(Vector2 position) |
void |
SetSize(Vector2 size) |
void |
SetTitle(string title) |
void |
SetContent(any HTMLElement) |
void |
SetActive(boolean active) |