Posts Tagged ‘(mb)Containers’
jQuery (mb)ContainersPlus 2.2 (iconize where you want!)
Let your contents look great!
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.
for the latest release go to the compoment page:
http://pupunzi.wordpress.com/mb-jquery-components/mb-containerplus/
dependencies:
ui.core.js
ui.draggable.js
ui.resizable.js
optional: jquery.metadata.js
Releases:
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" style= " top:200px; left:200px"width="500" buttons="m,c,i" icon="chart.png" skin="default" content="url_of_ajax_content"> class="containerPlus draggable resizable {buttons: 'm,c,i', skin: 'white', width: '500', icon: 'chart.png', skin: 'default', content: 'url_of_ajax_content' (new)}" <div class="no"> <div class="ne"> <div class="n"> [your title goes here] </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>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 [collapse], 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.
If you are not using metadata than dimentions of your container must be set by with and height attribute and not with the style attribute!
(New) The container can start as collapsed or iconized, just add “collapsed:’true’” (or collapsed=’true’ as attribute) or “iconized:’true’” (or iconized=’true’ as attribute).
(New) Now it’s possible to load content via ajax by adding a “content” attribut either as attribute of your container div or writing it in the class attribute in Json sntax.
(New) you can interact with any containers with these functions:
- jQuery.fn.mb_iconize(); to toggle between iconized and not iconized.
- jQuery.fn.mb_resizeTo(h,w); to change the width and/or the height.
- jQuery.fn.mb_toggle(); to collapse / expand the container.
- jQuery.fn.mb_open(url,data); to open a closed container. URL and DATA are optional and let you change the container content getting it from a page (url) called via ajax and passing params (data).
- jQuery.fn.mb_close(); to close a container.
- jQuery.fn.mb_getState(attr); to get the specified state of the container; the states (attr) are: closed, collapsed, iconized.
(New) Now you can mange the handles for resizing by adding the property: “handles” that axcept : w,n,e,s,se,sw,nw,ne (default “s”).
(New) You can resize container mantaining the aspect ratio by adding the property “aspectRatio“; it axcept “true” or “false” (desault “false”).
(New) You can iconize containers where you want, just specify the id of your dock element with the new dock attribute:
ex: class=”containerPlus draggable resizable {buttons:’m,c,i’, icon:’chart.png’, skin:’black’, collapsed:’true’,width:’500′,iconized:’true’,dock:’dock’}”.
Download the surce files to test yourself all the functionalities!
jQuery (mb)Containers 1.2
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
