jQuery based Splitter plugin

javascript, jquery, jquery-ui

Solution

The jQuery Layout plugin offers this functionality. In conjunction with jQuery UI, you get resizable panes with very minimal markup. To achieve what you are looking for, you would simply need some markup like:

<div id="container">
  <div class="ui-layout-west">Left</div>
  <div class="ui-layout-center">Center</div>
  <div class="ui-layout-east">Right</div>
</div>

With the default configuration, you simply can instantiate the plugin with the default styling:

$("#container").layout({
  applyDemoStyles: true
});

And you have a pane view with resizable panes. The plugin is fairly configurable, allowing you to style the pane handlers to your liking as well as configuring functional aspects of the plugin such as minimum or maximum sizes of panes. Additionally, for more complex views, you can nest layout panes with other panes and instantiate the plugin multiple times.

Problem

I need to create a layout as below; Now as you can see, I want resizable cells around Cell-center i.e for cell-left and cell-right I was using the jQuery plugin at http://methvin.com/splitter/3csplitter.html to achieve the same. But I also needed to create 4 portlets (as you can see for cell-center) . I used jQuery UI for the same and for some reasons, the 2 are not going very well (3cSplitter and jQuery UI Portlets)...the layout gets broken completely...not sure if it has to do with absolute positioning... But my question is, can I use jQuery UI to acheive similar kind of splitter. The one that I saw under http://jqueryui.com/resizable/ does not seem to be very good for what I want as http://methvin.com/splitter/3csplitter.html If both are jQuery UI based, I guess the integration issues would not be much...

Original source