LayoutManager – JQuery Plugin

This is a plugin for JQUery, which will helps you to arrange the layout of a web page with ease. It is very easy to use and configure.

Features of this plugin are:

  1. No need to write a single line of CSS code
  2. You don’t need to write complex JavaScript to manage the layout.
  3. Easily customizable
  4. This uses un-obstructive styling; here the HTML is completely separated from the rendering logic
  5. Fluid layout – that means the layout is adjusted based on the resolution

Introduction:

A common design layout for a web application will be like this

  1. Header – with application name, logo etc…
  2. Footer – with copyright, trademark
  3. Left section – with the navigation
  4. Center section – with actual application content
  5. Right section *-  this will have some extra stuffs that cannot be fitted in other section

* Right section may not be there sometimes.

This is a general design layout, so every time when create an application similar to this you may have to write the same CSS and JavaScript again and again or more. If you haven’t written the script and CSS without thinking about extensibility in mind, then in future modifying width/height of a section will be very difficult.

To make this designing very easily, here I have used the DOCK concept, this will be familiar to those who works in Windows form based application, where every control will have Dock property (TOP,  LEFT, FILL, RIGHT, BOTTOM and NONE). So the controls position and size is decided by the Dock property relative to the parent container.

DockableItem object :

This is basic building block for the layout.

Consider, you have an HTML file like this…

<html>
  <head>
  </head>
  <body>
  <div  id="main">         <div id="top">Top</div>         <div id="left">Left</div>         <div id="fill">Fill</div>         <div id="right">Right</div>         <div id="bottom">Bottom</div>
  </div>
  </body>
  </html>

And you want change this plain HTML into a layout like below

(Background colors are added for visibility)

To do this, first you have to create a JSON object similar to this

var layoutSettings =
    {
        Name    :   "Main",
        Dock    :   $.layoutEngine.DOCK.FILL,
        EleID   :   "main",
        Children:   [
                        {
                            Name    :   "Top",
                            Dock    :   $.layoutEngine.DOCK.TOP,
                            EleID   :   "top",
                            Height  :   125
                        },
                        {
                            Name    :   "Left",
                            Dock    :   $.layoutEngine.DOCK.LEFT,
                            EleID   :   "left",
                            Width   :   300
                        },
                        {
                            Name    :   "Fill",
                            Dock    :   $.layoutEngine.DOCK.FILL,
                            EleID   :   "fill"
                        },
                        {
                            Name    :   "Right",
                            Dock    :   $.layoutEngine.DOCK.RIGHT,
                            EleID   :   "right",
                            Width   :   200
                        },
                        {
                            Name    :   "Bottom",
                            Dock    :   $.layoutEngine.DOCK.BOTTOM,
                            EleID   :   "bottom",
                            Height  :   125
                        }
                    ]

    };

This represents a DockableItem object, a DockableItem object has properties like

  1. Name - A unique logical name that is used by the plugin.
  2. EleID - ID of the HTML element.
  3. Dock – Docking mode.
  4. Height – Height of the HTML element
  5. Width – Width of the HTML element.
  6. Children - Array of DockableItems
  7. Margin – Margin from parent.
  8. MarginLeft - Left margin from the parent.
  9. MarginRight - Right margin from the parent.
  10. MarginTop – Top margin from the parent.
  11. MarginBottom - Bottom margin from the parent.

Properties except Dock are self explanatory, so I will explain more about the Dock property.

Dock property can have six different values;

$.layoutEngine.DOCK.FILL – In this mode the element will occupy entire area available in the parent container. So even if you specify the Height and Width, it is ignored.

$.layoutEngine.DOCK.TOP – In the mode the element will occupy the entire width available in the parent container and it is aligned to top; but you have explicitly specify the Height in this case.

$.layoutEngine.DOCK.LEFT – In this mode the element will occupy the entire height available in the parent container and the element will aligned to left side of the container; here you need to explicitly specify the Width.

$.layoutEngine.DOCK.RIGHT – In this mode the element will occupy the entire height available in the parent container and the element will align to right side of the container; here you need to explicitly specify the Width.

$.layoutEngine.DOCK.BOTTOM – In the mode the element will occupy the entire width available in the parent container and it is aligned to bottom; but you have explicitly specify the Height in this case.

$.layoutEngine.DOCK.NONE- Kept it for future version.

Steps for how to use:

  1. Download the JQuery .1.2.6 or above – Get it
  2. Download the LayoutManager Plugin 1.0.0
  3. Add both these JavaScript files to your web page
  4. Create your layout object and call the plugin like below 
 $(document).ready(function(){

    var layoutSettings =
    {
	...........         ...........
    };

    $.layoutEngine(layoutSettings);

});

Demos :

View the HTML source of these pages to get more idea about creating the Dockable Item object.

  1. Simple Docking
  2. Docking with margin
  3. Nested docking with margin

Please feel free to ask questions and doubts, I am happy to help you out.

If you like this post, please consider buying me a coffee.


top