(mb)Containers, a jQuery component for full customizable and featured container layout
January 18, 2009 - 7:19am — pupunzi
This is a useful plug in to build full featured and full skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.
dependencies:
ui.core.js
ui.draggable.js
ui.resizable.js
How does it work:
here is the js call:
$(function(){
$(".container").buildContainers();
});here is the code for each container:
<div class="container stikynote draggable resizable" style="width:400px; top:270px;left:170px" buttons="i,m,c">
<table cellpadding="0" cellspacing="0" class="containerTable">
<tr class="top">
<td class="no"> </td>
<td class="n"><a href="">Stiky note</a></td>
<td class="ne"> </td>
</tr>
<tr class="middle">
<td class="o"> </td>
<td class="c" >
[your content goes here...]
</td>
<td class="e"> </td>
</tr>
<tr class="bottom">
<td class="so"> </td>
<td class="s"></td>
<td class="se"> </td>
</tr>
</table>
</div>The container can be set to draggable and resizable by adding "draggable" and/or "resizable" to the class attribute; ther's a custom attribute called buttons that accept: i [iconize], m [minimize], c [close] as value to add buttons to the buttonbar. You can also add a left top corner icon by adding the attribute "icon" with the icon path as value.
I'm working to a div box model container with many new feature; hope soon here!
demo page: http://pupunzi.wordpress.com/2009/01/18/jquery-mbcontainers/
Releases
| Official releases | Date | Size | Links | Status | |
|---|---|---|---|---|---|
| 1.1.01 | 2009-Jan-18 | 4.26 KB | Recommended for 1.2.x |  | |
| 1.2.0 | 2009-Mar-06 | 4.68 KB | Recommended for 1.3.x | | |