I recently started using jQuery because of the enhancement prospects it adds to a site. One of enhancements that jQuery offers is the ability to easily create a basic windowing environment. I have recent spent several hours working my way through learning jQuery to produce such an environment and here is, fundamentally, what I came up with.
I'll go through the code briefly so you know what components are at play. I would rate this difficulty at high-intermediate.
Create the HTML document and include jQuery 1.5 stored on Google's severs. We need to also include jQuery-ui 1.8 to use certain UserInterface effect like .draggable().
Code:
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Here is the function to dynamically create a [tt]div[/tt] element, assign it properties, and add it too the DOM and document (in this case, to DIV [tt]#desktop[/tt].
Code:
<script language="javascript">
function createWindow() {
//create div element in DOM
var element = document.createElement('div');
//use jQuery syntax to set properties
$(element).html("Hello World");
$(element).addClass("window");
$(element).draggable();
//add to desktop div
$("#desktop").append(element);
}
</script>
Include the CSS for the desktop and a window
Code:
<style type="text/css">
.desktop { position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; border:1px solid #000; background-color: #BBE; }
.window { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; border:1px solid #000; background-color: #EEE; }
</style>
Create the desktop div and make a link to create a new window
<div id="desktop" class="desktop">
<a href="javascript: createWindow();">Create Window</a>
</div>
And it all put together.
Code:
<html>
<head>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script language="javascript">
function createWindow() {
var element = document.createElement('div');
var html = "window";
$(element).html(html);
$(element).addClass("window");
$(element).draggable();
//add to desktop
$("#desktop").append(element);
}
</script>
<style type="text/css">
.desktop { position: absolute; top: 0px; left: 0px; width: 300px; height: 300px; border:1px solid #000; background-color: #BBE; }
.window { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; border:1px solid #000; background-color: #EEE; }
</style>
</head>
<body>
<div id="desktop" class="desktop">
<a href="javascript: createWindow();">Create Window</a>
</div>
</body>
</html>
Just copy the code to a new .html file and double-click. Imagine the possibilities when combined with AJAX.
-Geates
