Suy nghĩ đầu tiên của tôi là: trước tiên bạn chọn tất cả các hộp trừ hộp cuối cùng. Những người có được một splitter bên phải của họ. Sau đó, khi bộ chia được di chuyển, chỉ có hai ô chạm vào bộ tách được thay đổi kích cỡ.
Đây là ví dụ bạn có thể sao chép dán; nó hoạt động như vậy. Điều này có thể được sử dụng cho bất kỳ số lượng cột nào; chỉ cần chắc chắn rằng bạn cũng thích ứng với css.
Tôi đã thêm một số nút để mở rộng 1 hộp; cũng là một nút reset.
<!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>
Nguồn
2014-10-14 14:17:21
nó cung cấp thay đổi kích thước. bạn có thể thực hiện bộ chia bằng cách sử dụng. Ngoài ra, hãy kiểm tra [this out] (http://stackoverflow.com/questions/5199368/resizable-split-screen-divs-using-jquery-ui) – Dogoku
Tôi cần một bộ chia tương tự như http://methvin.com/splitter/ 3csplitter.html – testndtv