This example introduces the horizontal layout. The corresponding HorizontalLayout PHP class allows grouping several boxes in a larger box, where all "sub boxes" are disposed on a single horizontal line, from left to right.
Click on the screenshot below to test this example in your web browser.
<?php
/**************************************************************************
* Copyright (C) 2006 by Pierre Hebert *
* http://things.1000wallpapers.com/diable/ *
***************************************************************************/
require "diable.php";
// create a new box linked to the div element called "first_box", that can expand horizontally and vertically
$first_box=new DivLayout("first_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create a new box linked to the div element called "second_box", that can expand horizontally and vertically
$second_box=new DivLayout("second_box", SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
// create an horizontal box grouping horizontally the two previous div boxes, that can expand horizontally and vertically
$horizontal_box=new HorizontalLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);
$horizontal_box->add($first_box);
$horizontal_box->add($second_box);
// define the page as contained in the div element "content", and composed of the box created just above
$page=new PageLayout("content", $horizontal_box);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Pierrox.net - Diable - example 02, two horizontal boxes</title>
</head>
<body onLoad="content_layout();" onResize="content_layout()" style="height: 100%; width: 100%; padding:0px; margin:0px;">
<!-- the definition of our working area : in this example the full window -->
<div id="content" style="position:absolute; top: 0px; left: 0px; width: 100%; height:100%;"></div>
<!-- our first box -->
<div id="first_box" style="border: solid 5px blue;">first box</div>
<!-- our second box -->
<div id="second_box" style="border: solid 5px red;">second box</div>
<script type="text/javascript">
<?php
// output the layout script, and in particular a function called "content_layout"
$page->printLayout();
?>
</script>
</body>
</html>
The horizontal layout is an invisible box. It is created by the line
<?php $horizontal_box=new HorizontalLayout(SZ_MIN_EXPANDING, SZ_MIN_EXPANDING);?>
. The constructor accepts two
parameter : width and height. As the div layout, the width and height can be a constant value, SZ_MIN or SZ_MIN_EXPANDING.
Once the horizontal layout is created we can fill it with boxes this way :
<?php $horizontal_box->add($first_box); ?>
. This can be repeated as many times as wanted with several different boxes, but not
with the same box twice. Boxes added to a HorizontalLayout object are disposed from left to right. The space for each box is computed according
to their size specification. In this example the two boxes "first" and "second" are both expanding, so they will be equally sized.
It is interesting to test other combinations of width and height specification, for example :
<?php $horizontal_box=new HorizontalLayout(SZ_MIN, SZ_MIN_EXPANDING); ?>
gives :
SZ_MIN).
<?php $horizontal_box=new HorizontalLayout(SZ_MIN_EXPANDING, SZ_MIN); ?>
gives :
<?php $horizontal_box=new HorizontalLayout(SZ_MIN, SZ_MIN_EXPANDING); ?>
gives :
<?php $first_box=new DivLayout("first_box", SZ_MIN, SZ_MIN_EXPANDING); ?>
gives :
<?php $first_box=new DivLayout("first_box", SZ_MIN_EXPANDING, SZ_MIN); ?>
gives :
<?php $horizontal_box=new HorizontalLayout(160, 75); ?>
gives :