Question

我有一个多面板jQuery布局，并且想知道内部居中面板在调整大小时的大小。 document.ready函数如下所示：

$(document).ready(function () { 

    outerLayout = $('body').layout({ 
        spacing_open:           8
    ,   south__spacing_open:    4 
    ,   north__minSize:         40
    ,   north__maxSize:         200
    ,   center__onresize:       resizeInnerLayout
    ,   resizeWhileDragging:    true
    ,   triggerEventsWhileDragging: true
    });

这是resizeInnerLayout函数：

function resizeInnerLayout() {
    var width=$('#content-middle').width();
    var height = $('#content-middle').height();
    console.log("content-middle size = ("+width +"," +height +")");
};

这是html：

<div id="content-middle" class="inner-center">
    <svg></svg>
</div>

Javascript将d3图表放入svg中。我需要知道div的大小，因为当用户滑动分隔栏时它会重新调整大小，因此我可以相应地调整图表的大小。当前，console.log没有任何输出。

我还尝试过将函数绑定到layoutpaneresize事件，如下所示：

$('.inner-center').bind('layoutpaneresize', function(paneName, $pane, paneState, paneOptions) {
        console.log("content-middle size = ("+paneState.width +"," +paneState.height +")");     
    });

但是它也什么也不输出。也没有：

$('.inner_center').resize(function() {
    console.log("content-middle is being resized");
});

此方法有效，但仅在调整浏览器窗口的大小时有效，而在窗口内部的拆分器被调整大小时则无效。即使这样，它也会在您开始调整大小时报告大小，但不会随着大小的变化而更新。

window.addEventListener("resize", drawChart);

有什么想法吗？

Answer 1

您应该使用jQuery UI的.resizable()交互。

语法

$(element).resizeable({
    handles: 'n|s|e|w|nw|ne|sw|se',
    minWidth: Int,
    minHeight: Int,
    maxWidth: Int,
    maxHeight: Int,
    resize: function(event, ui) {
        // Statements
    }
});

示例

$("div#1").resizable({
  handles: 'e',
  minWidth: 0,
  minHeight: $("body").height(),
  maxWidth: $("body").width(),
  maxHeight: $("body").height(),
  resize: function(event, ui) {
  var left = Math.round(((ui.size.width / $("body").width()) * 100));
  var right = Math.round((100 - ((ui.size.width / $("body").width()) * 100)));
  $("div#2").width(right);
    $("pre").text("Left: " + left + " & Right: " + right);
  }
});

.ui-resizable-e {
  background-color: black;
}
.ui-resizable-e:hover {
  cursor: grab;
}
body {
  margin: 0;
}
div {
  width:50vw;
  height:100vh;
  display: inline-block;
}
div#1 {
  background-image: url("https://images.pexels.com/photos/132037/pexels-photo-132037.jpeg?cs=srgb&dl=beach-blur-boardwalk-132037.jpg&fm=jpg");
  background-attachment: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div id="1">
Resize Me
<br>
Result
<pre>Left: 50 & Right: 50</pre>
</div>
<div id="2"></div>

如何在调整大小期间获得面板的大小？

1 个答案: