A full page layout with resizable panes using jQuery UI

Question

I\'m trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:

Answer 1

There are more appropriate plugins, based on jQuery to obtain what you want.

OPTION 1:

I personally used in a my project UI Layout.

It is an almost old project (6 years ago), but in mid-2014 its development is re-started, even if there are no more information after september 2014.

Actually, last stable version is 1.4.3, released in sept '14. New website is:

• https://github.com/allpro/layout/

---

OPTION 2:

If you need a more complete solution, you could think about jEasy UI, that is a complete framework that

[...] helps you build your web pages easily

It is a sort of replacement of jQuery UI, with some similar widgets (dialogs, accordions, ...) and something exclusive, like Layout module, already linked in my answer.

---

OPTION 3: Analogue solution to the previous one, is Zino UI, another complete UI framework that has a specific component dedicated to "Split Layout"

---

OPTION 4: jQWidgets is another library, with similar purposes of previous ones, and specifically could be interesting jqxSplitter module.

---

Related alternative (similar):

There is also another alternative, that allows to slice panels in the browser windows but in addition allows to drag&drop single panels creating different tabs, and side-by-side sub-windows.

This is called Golden Layout. It's different from previous ones, for many reasons also more powerful but surely at the moment it has not Touch support...