Question

以下代码用于更改面板高度。这只能通过将鼠标光标放在1px宽的分隔线或面板主体右下角的角落来完成。

如何通过按住鼠标并在面板页脚的任何位置拖动来允许更改高度？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
  .panel-resizable {
    min-height: 0;
    overflow: hidden;
    margin: 0;
  }
  .panel {
    margin-bottom: 0;
  }
</style>
<script>
  $(function() {
    $(".panel-resizable").resizable({
      minWidth: "100%",
      maxWidth: "100%",
      minHeight: 0
    });
  });
</script>
</head>

<body>

  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-info'>PageHeader</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:9.37cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupHeader str(dokumnr)+str(koopia,2)</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.66cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupHeader str(dokumnr)+str(koopia,2)</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.53cm'>
    </div>
    <div class='panel-footer panel-primary'>Detail</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupFooter</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:7.68cm'>
    </div>
    <div class='panel-footer panel-warning'>GroupFooter</div>
  </div>
  <div class='panel'>
    <div class='panel-body panel-resizable' style='height:0.00cm'>
    </div>
    <div class='panel-footer panel-default'>PageFooter</div>
  </div>

</body>

</html>

如何通过在页脚中的任何位置拖动来更改面板高度

0 个答案: