使用jQuery UI，我如何使用Splitter類功能，如 http://methvin.com/splitter/3csplitter.html？jQuery UI和Splitter
我在問這個問題，因爲我需要2個東西在我的頁面上實現; 的Portlet（可拖動）:: http://jqueryui.com/sortable/#portlets 和垂直分割:: http://methvin.com/splitter/3csplitter.html
我不知道它是如何編碼很好的做法，如果我包括2個獨立的庫（即使兩者都基於jQuery的）; 像http://host.sonspring.com/portlets/ Portlet的 和http://methvin.com/splitter/3csplitter.html的分配器
下面是關於如何創建使用jQuery UI分離器的例子：
HTML：
<div class="wrap">
<div class="resizable resizable1"></div>
<div class="resizable resizable2"></div>
</div>
腳本：
$(function()
{
$(".resizable1").resizable(
{
autoHide: true,
handles: 'e',
resize: function(e, ui)
{
var parent = ui.element.parent();
var remainingSpace = parent.width() - ui.element.outerWidth(),
divTwo = ui.element.next(),
divTwoWidth = (remainingSpace - (divTwo.outerWidth() - divTwo.width()))/parent.width()*100+"%";
divTwo.width(divTwoWidth);
},
stop: function(e, ui)
{
var parent = ui.element.parent();
ui.element.css(
{
width: ui.element.width()/parent.width()*100+"%",
});
}
});
});
這是一個流行的腳本。我已經爲流體佈局添加了一些修改。
哈哈。我一直在尋找這個腳本！謝謝。 – CIA 2013-10-12 21:18:10
使用Firefox 32.0.1時，藍色框在調整大小時會換行到下一行。爲了防止這種情況發生，用'var remainingSpace = ...'' – Loathing 2014-11-26 01:43:21
開始，用'var'聲明替換逗號。另外，我發現需要以下兩行代碼才能使其工作：'.ui-resizable {position： relative;}'和'.ui-resizable-handle {position：absolute; font-size：0.1px;顯示：塊; }' – Loathing 2014-11-26 01:47:31
我用德米特里的答案，因爲我實現的基礎。請注意，當滑塊向右拖動時，沒有什麼能夠阻止該特定實現將邊界框加倍。
我需要一個簡單的非移動的分流現在（與以便使窗格在未來調整大小），和我的應用程序已經在使用jQuery，所以我通過如下改變他的代碼部分實現了這個：
$(function()
{
$(".resizable1").resizable(
{
autoHide: false,
containment: "#wrap",
...
我也改變了CSS光標樣式（除其他事項外），以防止調整大小光標被顯示如下：
.ui-resizable-e {
cursor: default;
...
感謝德米特里！
我的第一個想法是：首先選擇除最後一個以外的所有框。那些得到一個分離器在他們的右側。 然後，當分離器移動時，只有兩個接觸分離器的盒子被調整大小。
這是一個可以複製粘貼的例子;它按原樣工作。 這可以用於任何數量的列;只要確保你也適應CSS。
我添加了一些按鈕來展開1個框;還有一個重置按鈕。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI 4-Column Splitter</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<style>
body {
padding: 0;
margin: 0;
}
.wrap {
width: 100%;
white-space: nowrap;
background-color: #c0c0c0;
}
.resizable {
width: 25%;
height: 120px;
display: inline-block;
overflow: hidden;
}
.ui-resizable-e {
cursor: e-resize;
width: 10px;
top: 0;
bottom: 0;
background-color: gray;
z-index: 10;
}
</style>
</head>
<body>
<div class="wrap">
<div class="resizable"> HELLO </div>
<div class="resizable"> WORLD </div>
<div class="resizable"> FOO </div>
<div class="resizable"> BAR </div>
</div>
<div id="controls">
<input type="button" value="expand 0" data-index="0" class="expand">
<input type="button" value="expand 1" data-index="1" class="expand">
<input type="button" value="expand 2" data-index="2" class="expand">
<input type="button" value="expand 3" data-index="3" class="expand">
<input type="button" value="reset" class="reset">
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<style type="text/css" media="all">
</style>
<script type="text/javascript">
$(function() {
// settings
var minWidth = 15;
var splitterWidth = 10; // this sh ould match the css value
var splitter = $('.ui-resizable-e');
var container = $('.wrap');
var boxes = $('.resizable');
var subBoxWidth = 0;
$(".resizable:not(:last)").resizable({
autoHide: false,
handles: 'e',
minWidth: minWidth,
start: function(event, ui) {
// We will take/give width from/to the next element; leaving all other divs alone.
subBoxWidth = ui.element.width() + ui.element.next().width();
// set maximum width
ui.element.resizable({
maxWidth: subBoxWidth - splitterWidth - minWidth
});
},
resize: function(e, ui) {
var index = $('.wrap').index(ui.element);
ui.element.next().width(
subBoxWidth - ui.element.width()
);
},
});
// collapses all the other boxes to the minimum width; expands the chosen box to what ever width is left
$('.expand').click(function() {
var index = $(this).data('index');
var boxesToCollapse = boxes.length - 1;
var widthLeft = container.width() - boxesToCollapse * (minWidth + splitterWidth);
for (var i=0; i<boxes.length; i++) {
boxes.eq(i).width(i==index ? widthLeft : minWidth);
}
});
$('.reset').click(function() {
boxes.removeAttr('style');
});
});
</script>
</body>
</html>
Shield UI框架的Splitter component部分允許您使用水平和垂直分離器的混合。
它提供可調整大小。你可以使用它來實現分離器。另外檢查[this out]（http://stackoverflow.com/questions/5199368/resizable-split-screen-divs-using-jquery-ui） – Dogoku 2013-03-09 09:38:49
我需要一個類似於http://methvin.com/splitter/的分離器3csplitter.html – testndtv 2013-03-09 10:13:36