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 :-)
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).
- 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
- 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.
- Create an HTML file
- 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
- 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
- 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): jQuery UI Layout 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 addwin 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