JQuery-based Splitter Plugin

Question

I need to create a layout as shown below:

Now, as you can see, I want to resize the cell around Cell-center ie for cell-left and cell-right

I used 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 the cell center). I used jQuery UI for the same and for some reason, 2 is not very good (3cSplitter and jQuery UI portlets) ... the layout will completely break ... not sure if it has to do with absolute positioning ...

But my question is: can I use jQuery UI to get this kind of delimiters. The one I saw under http://jqueryui.com/resizable/ doesn't seem to be very good for what I want as http://methvin.com/splitter/3csplitter.html If both are jQuery based UIs, I I think that integration issues will not be much ...

Answer 1

The jQuery Layout plugin offers this feature. Combined with the jQuery user interface, you get resizable with minimal layout. To achieve what you are looking for, you just need markup, for example:

<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 setting, you can simply create an instance of the plugin with the default style:

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

And you have a resizable panel. The plugin is quite customizable, which allows you to customize the panel handlers to your liking, as well as customize the functional aspects of the plugin, such as minimum or maximum panel sizes. In addition, for more complex views, you can embed layouts with other panels and create a plugin several times.

Answer 2

Do you need 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(); }); });