基于jQuery的Splitter插件

Question

我需要创建一个布局如下;

现在你可以看到，我想围绕小区中心即可调整大小的细胞，细胞左和细胞右

我是用在http://methvin.com/splitter/3csplitter.html 的jQuery插件来实现相同的。

但我还需要创建4个portlet（正如您可以看到的cell-center）。我使用jQuery UI的原因是相同的，由于某些原因，2不太好（3cSplitter和jQuery UI Portlets）...布局完全被破坏...不知道它是否与绝对定位有关...

但我的问题是，我可以使用jQuery UI来获得类似的分离器。我http://jqueryui.com/resizable/ 下看到了一个似乎并没有成为我想要的东西作为http://methvin.com/splitter/3csplitter.html 如果两者都jQuery UI的基础，我想整合问题将不会有太大的很好...

Answer 1

的jQuery Layout插件提供了这种功能。结合jQuery UI，您可以使用非常小的标记获取可调整大小的窗格。为了实现你在找什么，你只需要一些标记，如：

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

在默认配置下，你根本就实例化的默认样式插件：

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

而且你有窗格视图与可调整大小的窗格。该插件是相当可配置的，允许您根据自己的喜好设置窗格处理程序的样式，以及配置插件的功能方面，如窗格的最小或最大尺寸。另外，对于更复杂的视图，您可以将布局窗格与其他窗格进行嵌套并多次实例化插件。

Answer 2

你想要类似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(); 
    }); 
});