First steps
- Download jQuery, jQuery-UI, QDLayout
jQuery library is needed for QDLayout to work : you can find jQuery version there.
jQuery UI library is needed for QDLayout to work : you can find jQuery UI version there.
To download the last release see {f:switchDownload}download{:} page.
- Create a basic HTML file
File available here.
<!DOCTYPE html>
<html>
<head>
<!-- Needed for cross browser compatibility -->
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta charset="utf-8">
<!-- Import jquery-ui css -->
<link rel="stylesheet" href="css/[jquery css path]/jquery-ui-X.Y.Z.custom.min.css" type="text/css" media="all" />
<!-- Import your U.V.W version of jquery -->
<script type="text/javascript" src="js/jquery-U.V.W.js"></script>
<!-- Import your X.Y.Z version of jquery-ui -->
<script type="text/javascript" src="js/jquery-ui-X.Y.Z.custom.min.js"></script>
<!-- Import your A.B.C version of qdlayout -->
<script type="text/javascript" src="js/qdlayout-A-B-C-min.js"></script>
<!-- Your own style definition if no css file defined -->
<style>
...
</style>
<!-- Your application code -->
<script type="text/javascript" >
...
</script>
</head>
<body id="home">
<!-- DIV where you will insert the layout -->
<div id='base'></div>
</body>
</html>
First element insert
All elements from QDLayout can be inserted in the DOM. They inherit of function insert, so you can use it to add
an object at any point of your web page. When you try , for example to add a ContainerElement that contains a TextElement
to your page, the code looks like :
...
// Test container
var aContainer = new ContainerElement(new TextElement('Test Container'));
aContainer.insert("#base"); // This will insert the container in DOM Element with id = "base"
...
The resulting container example this the jQuery-UI definition:
Next step
The main part of this project is the layout definition, that handle the organization of the page. I let you navigate
to discover functionalities of GridLayout and LinearLayoutList !