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

Answer 2

OK, hopefully my last edit. Went through a bunch of these, and ended up with jQuery UI layout.

Goldenlayout is nice, but you have to actually add the html in each pane through javascript. If you've got all your stuff in react components I guess this might be fine, but not for my use case.

jQuery UI layout seems to be pretty robust and was just updated in 2014.

Answer 3

You can use Gridstack It's easy to use and powerful.

Answer 4

I came up with the answer to this myself, although in the end it took me over a year of development! The result is a modern, responsive panel layout widget built using jQuery and jQuery UI widget factory.

http://www.silvercore.co.uk/widgets/propanellayout/

The best solution at the time the question was asked was undoubtedly jQuery UI.Layout, but over time that project has stagnated and the plugin does not work with jQuery 2. Despite the code being released on GitHub its fate is unknown, which makes using it as the foundation of a long term project questionable.

A few of the other links posted here are dead now and if you don't want or need a full application framework your choices are limited.

Answer 5

There was a few small problems that caused the behaviour that you don't like.

These were fixed in this Fiddle

The problems were:

When resizing Left, Right is also resized (which it shouldn't)

Fixed by setting a initial width (in percent)

When resizing Left towards full width, Center content is hidden under Right

Couldn't reproduce

When resizing Right the wrapper (Fuchsia-colored) is partly visible Center bottom is resized through the top of the Center top, not through it's own top

Fixed by setting left to 0 during resize.

$(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });

Center bottom is resized through the top of the Center top, not through it's own top

This is due to that JQuery UI Resizable uses relative positioning which do not work in table cells. Fixed by adding a content div that handles the resize.

<div class="top pane"> 
   <div class="top-content">Center top</div>
</div>

Answer 6

i'm usign this plugin with jquery

http://www.bramstein.com/projects/jlayout/jquery-plugin.html