jQuery-uiでサイズ変更可能な行を作成するには？

Question

サイズ変更可能なものについては、私は約resizable jQueryからウィジェットを知っていると私はそれを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>