The plugins site is currently in development.
We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.
(mb)ConteinersPlus, a jQuery component for full customizable and featured container layout (DIV box model)
Here it is!
Finally I realized the DIV box model of the (mb)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.
demo and doc: http://pupunzi.wordpress.com/mb-jquery-components/mb-containerplus/
dependencies:
ui.core.js
ui.draggable.js
ui.resizable.js
optional: jQuery.metadata.js
How does it work:
here is the js call:
$(function(){
$(”.containerPlus”).buildContainers({
containment:”document”,
elementsPath:”elements/”
});
});here is the code for each container:
<div class="containerPlus draggable resizable" width="500" buttons="m,c,i" style="top:200px;left:200px" icon="chart.png" skin="default">
<div class=”no”><div class=”ne”><div class=”n”>Titolo container 1</div></div>
<div class=”o”><div class=”e”><div class=”c”>
<div class=”content”>
[your content goes here]
</div>
</div></div></div>
<div >
<div class=”so”><div class=”se”><div class=”s”></div></div></div>
</div>
</div>
</div>Using metadata (jQuery.metadata.js)
If you include the metadata plugin than all the container attributes can be set into the class attribute:
<div class="containerPlus draggable resizable {buttons: ‘m,c,i’, skin: ‘white’, width: ‘500′, icon: ‘chart.png’, skin: ‘default’, content: ‘url_of_ajax_content’ (new)}”
style= "top:200px;left:200px">...In this way the component is W3C compliant!
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. There's a new attribute "skin" to set the class to the container; it's also used to finde the path of buttons images.
You can also manage the hadles for resizing (on containers not draggable) by adding "handles" as property of the container; it axcept: w,n,e,s,se,sw,nw,ne (default "s").
You can resize container mantaining the aspect ratio by adding the property "aspectRatio"; it axcept "true" or "false" (desault "false").
