如何使用jQuery-ui製作可調整大小的行？

關於可調整大小的東西，我知道關於jQuery的resizable小部件，我曾用它來爲div。如何使用jQuery-ui製作可調整大小的行？

但是，有沒有什麼辦法讓jQuery-ui變成可調整大小的行？

2016-07-29 Yusril Maulidan Raji

你可以看到一行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>

來源

2016-07-29 10:53:34 Justinas

感謝@justinas，但爲什麼它有像當我試圖調整它的最大長度是多少？ –

@YusrilMaulidanRaji如果我的答案解決了您的問題，請將其接受爲答案 – Justinas

好的，我會的。但還有一個問題。根據你的實例，當我調整它的大小時，它爲什麼會有最大長度？有沒有什麼辦法讓它可以調整大小而沒有任何限制？ –

如何使用jQuery-ui製作可調整大小的行？

回答

相關問題