If you’re here probably you know the , and probably you also imagine that this page describes the project of recreating those functionalities with jQuery :-)
PROJECT SUPERSEDED:
Many of you may already know Kevin and I were working on a new project joining our forces, well here you have the most powerful , all info on the official website! This page will remain for historical reasons but the software will me unmaintained (download the new project instead).
FEATURES:
- border layout engine, with 5 available regions, customizable using CSS, no predefined graphic so you’re not constrained into predefined structures
- collapsable: every panel can be collapsed clicking on a collapsing trigger, collapsing can also be animated
- resizable: evey panel can be resized dragging its border (disabled by default)
- border layouts can be nested
DEMOS:
- simple but nice layout, complete and similar to the classical GUIs.
- A bit more complex demo, making heavy use of different paddings and borders on every zone of the layout. It renders perfectly on every browsers.
- nested layouts.
USAGE:
- Create an HTML file
- Include both jQuery and FBBorderLayout javascript files in the HEAD section
- Directly inside the BODY (it means without container divs), create the 5 divs that compose the border layout (north, south, east, west and center)
- Use the jQuery onDOMReady feature to call “$(“body”).FBBorderLayout()”, this method accept a configuration object as a param, check the demos for the usage
DEFAULT CONFIGURATIONS:
- 5px spacing between regions
- 200px wide east region (if present in the HTML)
- 200px wide west region (if present in the HTML)
- all regions can be collapsed
SUPPORTED BROWSERS:
- Firefox 2.0, 3.0
- Internet Explorer 6.0, 7.0
- Safari 3.1
- Opera 9.50
- Google Chrome
- The only must-have region is the center one, all other regions are optional, you can safely remove them to create the border layout exactly as you want.
- Do not apply “margins” to the regions, they’re not supported and will break the layout.
- There are some issues with ie6/7 since 0.9.x, if you need to work with those browsers please use 0.3 or wait for a stable release
- 1.0.0 (16th Novembre 2008): is finally out! Please read the top of this page to understand what’s going on. This project is superseded by the new one so please update your bookmarks.
- 0.9.2 (12th October 2008): minHeight/maxHeight/minWidth/maxWidth options were added for resizables
- 0.9.1 (11th October 2008): animations were added and a few bugs were fixed
- 0.9 (29th September 2008): a few bugs were fixed (thanks to Matteo Ligabue), nested layouts support was added. The syntax to start the borderlayout was changed thus please check the new samples. This release has some issue with Internet Explorer, if you don’t need nested layouts or you’re not using Internet Explorer please wait for 1.0 before update.
- 0.3 (18th August 2008): XHTML strict doctype is now working (thanks to for the suggestion), border regions can now be resized
- 0.2 (18th July 2008): regions can be collapsed
- 0.1 (25th June 2008): initial release
NOTES/KNOWN ISSUES:
LICENSE:
FBBorderLayout is dual licensed under the and licenses.
DOWNLOAD:
FBBorderLayout 0.9.2
CHANGELOG:
Kevin and Fabrizio,
How do I can I start a panel, “collapsed” or “expanded” ? For example, I want the west collapsed when starting and the east expanded. Can this be done?
@Developer: in my implementation you can’t start a pane collapsed, you could run the fbborderlayout() and than try to collapse a pane using a javascript call anyway.
@Ryan: I saved your issues on our new tracker so we won’t forget about those, we’re working on a great new thing :-))
One needs the ability to start a pane collapsed or expanded.
@Developer: if so you can do it with javascript otherwise please wait a new release
I’ve found a solution for the issue I was having with “sliding” content going behind the other pane. While trying Dojo’s border layout the same thing happened. You have to change the CSS overflow to visible. However, with your layout I had to specify that option in the JS options for the north region. css: {overflow: ‘visible’} Odd that you can’t specify that in normal CSS. Do you create another container that is actually the north region and has a different class name?
Also, yet one more issue. I set the north region size to ‘auto’. However, this causes east/west issues when they are collapsed. I’m thinking you calculate the top-margin or something for the collapsed container by the size setting and since it’s auto it can’t do that. So, the collapsed container shifts all the way to the top, on top of the north region.
Thanks for your great work, this is turning out good so far.
Where do you get the “ui-1.5.2.all.packed.js” file? I can’t recreate your layout without it.
BTW, grazie per questo layout. Ho cercato l’Internet per un mese prima di aver trovato il tuo sito. Bravo per aver fato quello che gli altri non potrevano fato.
(E scuzi il mio Italiano, e stato un bel puo di tempo di quando ero in Italia… :P)
I don’t quite understand how the work is being managed. Fabrizio: are yourself, Kevin and John working together and merging code to build an authoritative plugin, or are you guys all working on your own separate forks? Which is (and where to get) the latest most feature-full version?
@Timothee: ok you ask it, I answer :-) kevin and i (actually most of the work is done by kevin, I’ve to admin that I’ve been locked down by flu and work in these weeks) are working on a new project and we’ll annouce it very very soon…
Hi Fabrizio, thanks for the clarification. I really look forward to see what you guys are coming up with. I do however have a project that require me to use a good and complete layout manager *right now*. From the posts above, I think I will use Kevin’s latest version. I hope your official update will be easy to upgrade to from that version. Thank you guys for your work!
Hi, one more thing, I would like to style the open spacing. However, when the region is not resizable nor collapsable but a open-spacing is set (to make a gutter) there isn’t a div/container to style. It must just be a region margin instead? Is there good way to style that open space? Thanks
I happened to look at this blog today, so here is some feedback…
@Ryan: The current version puts a ‘resizing div’ in the spacing between borders even when resizing is not enabled, so this provides an element to used for styling.
@Timothee: The new version will *probably* be released very soon – within days hopefully. It will be easy to update an existing layout to the new code – just by updating your options.
FYI, the new version addresses ALL the features requested in this blog and quite a few more. Most cross-browser bugs have also been fixed. So hang in a little while longer ;)
Darn, I was hopeing for some news over the weekend. Should we be watching this page for updates? Just as a new version? Thanks
new version is coming really soon! kevin and i are totally busy in these days :-(
Another one to add to your list. I’d like to style the resizer based on both region and open/closed. However, that type of CSS class is not applied to the resizer. You have resizer-west and resizer-open/closed but no resizer-west-open/closed.
Also, should I start using the jQuery support system? Or just keep posting things here? Thanks!
Hey!
Just came over this.
Fabrizios version works fine for me except resizing of panes. I really like it.
But I’d like to use Kevin’s version because it’s got more features and options. The center pane gets resized when I fire up .borderlayout({…}). After that only the other north, south,… panes are updated when I resize the window. Very strange…
I’m also hoping for a fresh release soon!
Great work Fabrizio and Kevin (and John)!!
Keep up the good work fellas, as this post has proved an excellent resource for A LOT of developers, coders, part-timers and creatives who are all using, abusing, breaking and playing but ultimately supporting the JQuery library!!
@Ryan: Yes, the new version has a complete set of classes on EVERYTHING – panes, resizers, togglers, etc. – providing unlimited styling options. For example:
ui-layout-resizer
ui-layout-resizer-west
ui-layout-resizer-open
ui-layout-resizer-west-open
OR if closed:
ui-layout-resizer-closed
ui-layout-resizer-west-closed
Just another day…
go go go the new project is out and shining :-)))
Pingback: jQuery UI Layout 1.0 | Fabrizio Balliano
Ciao Fabrizio,
al posto degli span per gli handlers perchè non usare degli <a>?
$T = $Ts[pane] = $(‘<a href=”#” rel=”nofollow”>close</a>’);
io ho provato e funziona anche da tastiera.
@max: ho girato la cosa a Kevin, aspetto un suo parere. ciao grazie!
Ciao Fabrizio,
this is a very useful plugin.Thanks a lot! You saved us from a lot of work.
Pingback:
Great Plugin ! But It doesn’t work with jQuery 1.6 & jQuery UI 1.8.16…
@manndaar: did you try the new ?
@Fabrizio Thanks for the link !
thanks for the FBBorderLayout. It worked for me.
What if anyone wants to use it in a “div” not in “body”? It wont work in that case? Whenever I am trying to “$(“div”).FBBorderLayout” instead of “$(“body”).FBBorderLayout” its not working.. any solution?
Thank you for this great plugin!