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

Question

关于可调整大小的东西，我从 jQuery 知道 resizable 小部件，我曾经将它用于 div。

但是，有什么方法可以用 jQuery-ui 来制作类似可调整大小的线条吗？

Answer 1

您可以看到 div 和 height: 1px 行。比简单地使用 UI 代码：

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

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

<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>