Question

我使用html表成功创建了3个视图框。每个视图都可以隐藏。现在我想让每个视图的宽度和高度都可以调整大小，这与它在JSFiddle中的完成情况完全一样，每个代码编辑框都可以调整大小。我发现了一个jQuery小部件，但它只允许调整列的大小而不是框。我也发现了这个，但没有用表http://www.bootply.com/RwnUXIcLap实现。这是我到目前为止所拥有的https://jsfiddle.net/3waurzbf/。

var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');

console.log(inputs);
console.log(tds);
var changeView = function () {

  for (var i = 0; i < inputs.length; i++) {
    if (!inputs[i].checked) {
      if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
    } else {
      if(tds[i].style.display === 'none') tds[i].style.display = '';
    }
  }

  if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
  else rows[0].style.display = '';

  if (!inputs[2].checked) rows[1].style.display = 'none';
  else rows[1].style.display = '';

};

changeView();


//$("#views-table").colResizable({liveDrag:true});

html {
  height: 100%;
}

body {
  height: 100%;
}

table {
  width: 100%;
  height: 90%;
}

table td {
  text-align: center;
  border: 1px solid black;
}

#views-container {
  height: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>View 1</td>

    <td>View 2</td>
  </tr>

  <tr>
    <td colspan="2">View 3</td>
  </tr>
</table>
<div id="views-container">
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 1</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 2</label>
  <input type="checkbox" checked="checked" onclick="changeView()"><label>View 3</label>
</div>

Answer 1

您可以使用jQuery UI .resizable()，虽然表格显示有点棘手，需要一些额外的代码。

看看这个工作小提琴：https://jsfiddle.net/18k3umpp/3/

我在View 1和View 2中添加了几个id：

<tr>
    <td id="v1">View 1</td>

    <td id="v2">View 2</td>
</tr>

然后试试这个：

$(window).on("load resize", function() {

    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    var v1Width = $("#v1").width()


    $("#v1").resizable({
        minWidth: 50,
        maxWidth: windowWidth - 80,
        maxHeight: windowHeight * (.83),
        handles: "e, s"
    }).on("resize", function() {

        if (v1Width == $("#v1").width()) {
            $("#v2").height(0)
        }
        v1Width = $("#v1").width()
    });

    $("#v2").resizable({
        maxHeight: windowHeight * (.83),
        handles: "s"
    }).on("resize", function() {
        $("#v1").height(0)
    });

});

当然，您可以根据需要调整minWidth，maxWidth和maxHeight选项。

如何在JSFiddle上创建具有可调整大小的行和列的表格，如HTML，CSS，JS框？

1 个答案: