Как получить размер панели при изменении размера? - PullRequest
Новая
       18

Как получить размер панели при изменении размера?

0 голосов
/ 09 ноября 2018

У меня есть многопанельная компоновка 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);

Есть идеи?

1 Ответ

0 голосов
/ 11 ноября 2018

Вам следует использовать взаимодействие .resizable() пользовательского интерфейса jQuery.

Синтаксис 

$(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;
}





Resize Me


Result
Left: 50 & Right: 50
...