如何使用jQuery-ui制作可调整大小的行？

Question

关于可调整大小的内容，我从jQuery了解resizable小部件，我曾经将它用于div。

但是，有没有办法用jQuery-ui制作像可调整大小的行？

Answer 1

您可以使用div查看行height: 1px。而不仅仅是使用UI代码：

＆＃13;

＆＃13;

$(document).ready(function() {
  $(".line").resizable({
    minWidth: 150,
    maxWidth: 300,
    handles: 'e, w'
  });
});

＆＃13;

.line {
  min-width: 150px;
  height: 2px;
  background: red;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<div class="line"></div>

＆＃13;

＆＃13;

＆＃13;