- GitHub
- fusker
- coffee-script
- qunit
- Underscore.php
- Inspiration
- Silk
- Particles
- 3D Viewer
- Madmanimation
The jQBoxModel plugin is a plugin for jQuery that allows you to quickly prototype complex layouts.
Just add the script to the head of your HTML file after your jQuery script.
There are no required parameters so the script is initialized automatically when you add the script to the head of your HTML file. If you want to get a better look at the layout, you can append your url with ?debug=1:
There are divs with special id's that when defined will help transform your website layout.
To learn more about how to use the plugin, read the documentation on this page. Visit the github project page to download the plugin.
Sponsored Ad
This plugin was developed to streamline the page layout process by using % widths to have your main content width take up a percentage of the parent width then have sibling widths automatically calculated to take up the remaining space among themselves. Please see the Plugin Usage Guide for an example.
Plugin accepts no parameters
1. jQuery >= version 1.3.2 called prior to the plugin in head like:
<head><script type="text/javascript" src="<path-to-script>/jquery-1.3.2.js" /><script type="text/javascript" src="<path-to-script>/jQBoxModel.v2.js" /></head>
2. The group of divs that will be affected by the plugin must be wrapped in a div with a class of "layout-helper". Next, give one of the divs an id beginning with either "w_" or "ew_". For example <div id="w_declared-div">All my siblings</div>. Once this div has been given a width in CSS, the plugin will automatically apply a width to each sibling based on the remainder of width that is left when the width of the declared div is subtracted from the width of its parent (layout-helper).
Note: The difference between the "w_" and "ew_" is that the "w_" div will have it's siblings widths be divided equally amongst themselves based on the remaining width not occupied by the declared div. With "ew_", the children widths will be exactly the same as the width for the declared div. The "ew_" style was introduced to make it easier to have each div fill a certain space (say 50% of the parent div) then have the remaining divs break to the next line when space ran out. With "w_", the divs would just keep getting smaller on the same line.
Back to beginning of Documentation
Some HTML elements are injected into the HTML (only applies to divs declared as in preconditions) to help with the layout. The first added elememt is clearfix p element that simply breaks the float from the last floated element in the "layout-helper" div. This is required because the plugin automatically floats every first level child div that is inside the "layout-helper" div. The second element added is a wrapper div ("layout-group") that surrounds the first level child divs of the "layout-helper" div. This is done so that elements inside a child div can have access to everything it needs like margin, padding, and border, without breaking the layout.
Back to beginning of Documentation
The operations in the plugin don't have side effects and don't effect other elements that are not given a class special classes as described in section 2 previously.
Back to beginning of Documentation
<div id="container" class="layout-helper"> <div> Extra Box 1 (width is 20% of "layout-helper" parent div) </div> <div id="w_demo1"> Declared Box (width is 60% of "layout-helper" parent div) </div> <div> Extra Box2 (width is 20% of "layout-helper" parent div) </div> </div>
When the div with id="w_demo1" is given a width of 60% in the CSS file, the result follows: