基於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(); 
    }); 
});