如何在JSFiddle上创建具有可调整大小的行和列(如HTML，CSS，JS框)的表? [英] How to create table with resizable row and columns like HTML, CSS, JS boxes on JSFiddle?

问题描述

我已经使用html表成功创建了3个视图框.每个视图都可以隐藏.现在，我想让每个视图的宽度和高度都可以调整大小，这非常类似于在JSFiddle中完成的操作，可以在每个代码编辑框中调整其大小.我找到了一个jQuery小部件，但它只允许调整列的大小，而不允许调整框的大小.我也发现了这一点，但未通过表 http://www.bootply.com/RwnUXIcLap 来实现.到目前为止，这就是我 https://jsfiddle.net/3waurzbf/的内容.

I've successfully created 3 view boxes using an html table. Each view can be hidden. Now I'd like to have each views width and height to be resizable, pretty much exactly like how its done in JSFiddle where each code editing box can be resized. I found a jQuery widget but it only allow for the columns to be resized and not the boxes. I also found this but it was not implemented with a table http://www.bootply.com/RwnUXIcLap . Here's what I have so far 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>

推荐答案

您可以使用jQuery UI .resizable()，尽管它在表显示方面有些棘手，并且需要一些额外的代码.

You can use jQuery UI .resizable(), although it's a bit tricky with table display and requires a little extra code.

查看此工作提琴: https://jsfiddle.net/18k3umpp/3/

我在View 1和View 2中添加了几个ID.

I've added a couple ids to View 1 and View 2:

<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选项.

Of course you can adjust the minWidth,maxWidth, and maxHeight options to whatever your needs are.

这篇关于如何在JSFiddle上创建具有可调整大小的行和列(如HTML，CSS，JS框)的表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！