Aaron (Aaron @ ennerchi) ask me to develop a simple layout manager for a web application. First of all, I want to thanks him for accepting to release this layout manager in open source under MIT-license.

This class is inspired by RUZEE.LayoutManager but based on prototype 1.6. RUZEE version was to slow on complex layout.

It’s an unobtrusive script based on CSS classes. This picture shows what CSS class to use.

Inside a lm_container you can add:

• lm_top / lm_bottom for top/bottom rows with fixed height and resizable width, you can add as many rows as you want,

• lm_left / lm_right for left/right columns with fixed width and resizable height, you can add as many columns as you want,

• lm_center, middle content with resizable width and height, you can have only one per container.

Here is a sample HTML code to show how it works:

   1  <div class="lm_container">    
   2    <div class="lm_top"></div>
   3  
   4    <div class="lm_left"></div>
   5  
   6    <div class="lm_center"></div>  
   7  
   8    <div class="lm_right"></div>  
   9  
  10    <div class="lm_bottom"> </div> 
  11  </div>

And just included layoutmanager.js in your head section

   1  <script type="text/javascript" src="prototype.js"></script>
   2  <script type="text/javascript" src="layout_manager.js"></script>

You can see it in this simple example

Of course layout can be nested like this:

   1  <div class="lm_container">    
   2    <div class="lm_top"></div>
   3  
   4    <div class="lm_left"></div>
   5  
   6    <div class="lm_center">
   7      <div class="lm_container">    
   8        <div class="lm_top"></div>
   9        <div class="lm_left"></div>
  10        <div class="lm_center"></div>  
  11        <div class="lm_right"></div>  
  12        <div class="lm_bottom"> </div> 
  13      </div>
  14    </div>  
  15  
  16    <div class="lm_right"></div>  
  17  
  18    <div class="lm_bottom"> </div> 
  19  </div>

You can see it in this embedded example

If you work with ajax request and want to add dynamically content, you just need to call

   1  layoutManager.add('your_element_id');

because you have a global variable: layoutManager. This zip file contains a sample with an Ajax Request.

So download it and focus on your web application :)