jQuery based Splitter plugin

Question

I need to create a layout as below;

Now as you can see, I want resizable cells around Cell-center ie 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...

Answer 1

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.

Answer 2

You would like something like this ?

HTML

<div class="left">left</div>
<div class="center">
    <div class="column">

  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>
    <div class="column">

  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>

</div>
</div>
<div class="right">right</div>

CSS

body, html {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
.left, .right {
    height: 100%;
    width: 170px;
    float: left;
    background: #e0e0e0;
}
.left {
    border-right: 3px solid #DDD;
    margin-right: 4px;
}
.right {
    border-left: 3px solid #DDD;
    left: 0!important;
    margin-left: 4px;
}
.center {
    height: 100%;
    float: left;
}
.column { width: 50%; float: left; padding-bottom: 100px; }
.portlet { margin: 0 1em 1em 0;}
  .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
  .portlet-header .ui-icon { float: right; }
  .portlet-content { padding: 0.4em; }
  .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
  .ui-sortable-placeholder * { visibility: hidden; }

jQuery

$(function() {
    var maxBorderCellWidth = 250;
    var minBorderCellWidth = 150;
    var resizeCenter = function () {
        var clientWidth  = $(document).innerWidth();
        var leftWidth = $( ".left" ).outerWidth(true);
        var rightWidth = $( ".right" ).outerWidth(true);
       console.log(clientWidth); $('.center').width(clientWidth-leftWidth-rightWidth);
    }

    $( ".left" ).resizable({
      maxWidth: maxBorderCellWidth,
      minWidth: minBorderCellWidth,
      handles: 'e',
      resize: function (event, ui){
          resizeCenter();
      }
    });
    $( ".right" ).resizable({
      maxWidth: maxBorderCellWidth,
      minWidth: minBorderCellWidth,
      handles: 'w',
      resize: function (event, ui){
          resizeCenter();  
      }
    });
    $( ".column" ).sortable({
      connectWith: ".column"
    });

    $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
      .find( ".portlet-header" )
        .addClass( "ui-widget-header ui-corner-all" )
        .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
        .end()
      .find( ".portlet-content" );

    $( ".portlet-header .ui-icon" ).click(function() {
      $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
      $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
    });

    $( ".column" ).disableSelection();

    resizeCenter();
    $(window).resize(function () {
        console.log("test");
        resizeCenter();
    });
});