jQuery (mb)Containers 1.2

containers

This is a useful plug in to build full featured and fully skinnable containers.
The container can be set to draggable, resizable, collapsable and minimizable.

This plugin has been deprecated. If you are looking for a container plugin get this one: mb.containerPlus

Releases:

1.2.0 (New!)
Major issue released:

  • added “iconized” or “minimized” at  start up.
    Just add  the attribute “iconized=’true'” or “minimized=’true'” to the container.
  • added a pram: elementsPath: [path to images].
    used to define where to finde images like buttons and icons.

dependencies:

ui.core.js
ui.draggable.js
ui.resizable.js

How does it work:

here is the js call:

1
2
3
 $(function(){
$(".container").buildContainers();
});

here is the code for each container:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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!

http://pupunzi.open-lab.com/mb-jquery-components/mb-containerplus/