Matteo Bicocchi's Blog

A major update of mb.containerPlus is Out!

2.4.7 minor and major issue and bugfix:
1. added minWidth and minHeight to be setted as metadata of the container.
2. modified onClose callback to be executed after the transition effect.
3. added onBeforeClose callback to be executed before the close transition effect.
4. now the resize event of a container into a dom element take care of the containment.
5. added alwaysOnTop metadata param to mantain the container always on top.
6. added mb_setFixedPosition() method to set fixed position on the fly.
7. fixed a bug in mb_setCookie() with expire date.
8. Added a dockedIconDim param to set the dimension of docked icons.
9. Fixed a bug that if the container hasn’t a height set, once restored from minimized, it still expand its contenet without showing scrollbars.

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

version 2.4 , The mb.containerPlus with memory!

Finally out the mb.containerPlus with cookies manager; this issue was one of the most voted for this component, it allows to remember the state, the position and the dimensions of your container once the page is reloaded. Just add a”rememberMe” metadata on the specific container and the game is done! (the container must have an ID setted)

Get the last version!

I found a bug on IE7 due to the unsupported “display:inline-block”…

I’ll fix it in the next release; for the moment you all can fix it changing the line 59 as below:

$(this.elements).css({marginRight:this.options.elementMargin, width:this.singleElDim, display:”inline-block”,float:”left” });

I just update mb.containerPlus to version 2.3.5 solving several bugs on state control:

1. if fullScreen once iconized and restored the height wasn't reset correctly;
2. if iconized and mb_resizeTo generate a bug;
   now you simply can't mb_resizeTo if iconized;
3. better controll of each state of container;

Get the latest

This update adds a “closed” state once the container is initialized; this state lets the container be drawn in the page but not visible; it can be opened by an external link with this method:

$("#yourConainerID").mb_open();

To get the latest version go to the component page.

New upgrade to fix a refactor bug I genrated on last release… I’m sorry…
the default method: $.fn.mb_open() and $.fn.mb_close() were broken.

You can download the mb.containerPlus 2.3.1 release I published where this problem has been solved.

http://pupunzi.wordpress.com/mb-jquery-components/mb-containerplus/

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:

here is the code for each container:

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!