/Window-Engine

Window Engine is a lightweight and touchscreen friendly javascript library for draggable and beautiful windows.

Primary LanguageJavaScriptMIT LicenseMIT

Window Engine

License: MIT Version Donate GitHub file size in bytes GitHub file size in bytes CodeFactor

Demo

Welcome to Window Engine. Window Engine is a lightweight javascript library, developed by Gauthier Staehler, for draggable and beautiful windows. Full demo here.

 

Installation

GET Window Engine :

<link rel="stylesheet" href="window-engine/window-engine.css">
<script src="window-engine/window-engine.min.js"></script> // End of your file

OR Test it first :

<link rel="stylesheet" href="https://gstaehler.github.io/cdn/window-engine.css">
<script src="https://gstaehler.github.io/cdn/window-engine.min.js"></script> // End of your file

 

Structure of a window

<div id="window!" class="window">
	<div id="window!header" class="color">
		<p class="windowTitle">Title</p>
		<b id="closeButton!">&times;</b>
	</div>
	<div class="mainWindow">Content</div>
</div>

! is the number of the window

color is the color of the window : purple, orange, brown, cyan, crimson, green

if no color, the window is black

 

Add a new window

To add a new window, copy the structure above in your html and change ! (if this is your third window, ! = 3 for example)

You can add another button to open you new window :

<button id="button!"></button>

 

windowGroup

All of the windows must be in one windowGroup :

<div class="windowGroup"> Your windows ... </div>

 

Fade effect

You can add a fade effect on the windows with the class "fade" :

<div id="window!" class="window fade">

 

Display

If you want your window to be visible without clicking on a button the first time :

<div id="window!" class="window" style="display: initial;">

Of course you can combine it with the fade effect :

<div id="window!" class="window fade" style="display: initial;">

 

Size

You can change the size of the window with "small" and "large" :

<div id="window!" class="window large">

normal : 800 x 400; small : 600 x 300; large : 1000 x 500

 

Basic Example

<div class="windowGroup">

	<!-- WINDOW 1 -->

	<div id="window1" class="window" style="display: initial;">
		<div id="window1header" class="purple">
			<p class="windowTitle">Window Engine</p>
			<b id="closeButton1">&times;</b>
		</div>
		<div class="mainWindow">
			<p>Welcome to Window Engine !</p>
		</div>
	</div>

	<!-- WINDOW 2 -->

	<div id="window2" class="window fade">
		<div id="window2header" class="cyan">
			<p class="windowTitle">Second Window</p>
			<b id="closeButton2">&times;</b>
		</div>
		<div class="mainWindow">
			<p>Cyan</p>
			<p>With fade effect !</p>
		</div>
	</div>

	<!-- WINDOW 3 -->

	<div id="window3" class="window fade small">
		<div id="window3header" class="brown">
			<p class="windowTitle">Third Window</p>
			<b id="closeButton3">&times;</b>
		</div>
		<div class="mainWindow">
			<p>Brown</p>
			<p>With fade effect !</p>
		</div>
	</div>
	
</div>

<button id="button1">1</button>
<button id="button2">2</button>
<button id="button3">3</button>

 

They talked about it

CSS Script

 

Copyright Gauthier Staehler