FBBorderLayout: a jQuery “border layout”

If you’re here probably you know the extjs border layout, 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 jQuery UI Layout, 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:

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:

79 thoughts on “FBBorderLayout: a jQuery “border layout”

  1. Developer

    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?

  2. Fabrizio Balliano Post author

    @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 :-))

  3. Ryan

    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.

  4. Matteo

    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)

  5. Timothee

    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?

  6. Fabrizio Balliano Post author

    @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…

  7. Timothee

    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!

  8. Ryan

    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

  9. Kevin

    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 ;)

  10. Ryan

    Darn, I was hopeing for some news over the weekend. Should we be watching this page for updates? Just as a new version? Thanks

  11. Ryan

    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? http://plugins.jquery.com/project/fbborderlayout Or just keep posting things here? Thanks!

  12. buzz

    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!

  13. AJ

    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!!

  14. Kevin

    @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…

  15. Pingback: jQuery UI Layout 1.0 | Fabrizio Balliano

  16. max

    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.

  17. Pingback: UI.Layout – The Ultimate Page Layout Manager « dengzhizhong

  18. UsabilityStudio India

    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?

Leave a Reply

Your email address will not be published. Required fields are marked *