jQuery UI可調大小 - 如何加厚手柄

例如，在下面的鏈接中，您會注意到我只在底部有一個div的句柄，這很難使用鼠標，因爲它看起來高1px。是否有可能使手柄10px高，所以看起來和感覺像圖像被抓住？

2011-06-23 oshirowanen

.ui-resizable-s { 
    bottom: 0; 
    height: 10px; 
}

參見：http://jsfiddle.net/thirtydot/rYFEY/376/

+ rgba爲清楚：http://jsfiddle.net/thirtydot/rYFEY/377/

+ rgba - overflow: hidden使用默認bottom: -5px：http://jsfiddle.net/thirtydot/rYFEY/378/

來源

2011-06-23 08:33:52 thirtydot

所有4個句柄都有'.ui-resizable-handle'類。 –

謝謝！我只是補充說，在隱藏溢出的情況下，'暴露'的高度將是一半（在這種情況下是5px） –

由於jquery-ui.css的URL錯誤，jsfiddle不工作。修正它在這裏[jsfiddle.net/rYFEY/375/](http://jsfiddle.net/rYFEY/375/） – stomtech

擴展在thirtydot：如果你必須在同一頁上的多個resizables，你可能要指定一個孩子選擇#resizable > .ui-resizable-s作用於哪一個元素：

<style> 
    #resizable > .ui-resizable-s { 
    background: black; 
    bottom: 0; 
    height: 10px; 
    } 
</style> 
<div id="resizable"></div> 
<script>$('#resizable').resizable()</script>

這工作，因爲resizable()添加父div喜歡裏面的把手：

<div id="resizable"> 
    <div class="ui-resizable-handle ui-resizable-s"></div>  
</div>

如果你想然而，對於textarea做到這一點，你必須改用兄弟選擇：

#resizable + .ui-resizable-s

因爲在這種情況下，jQuery UI的智能認爲，這是一個textarea，並把它的包裝div內：

<div> 
    <textarea id="resizable"></textarea> 
    <div class="ui-resizable-handle ui-resizable-s"></div>  
</div>

達到這些結論，最好的辦法是在運行瀏覽器的DOM Inspector（按Ctrl + T恤+ I Firefox和Chrome）來查看jQuery UI對您的HTML所做的事情。

來源

2014-08-28 08:18:44

jQuery UI可調大小 - 如何加厚手柄

回答

相關問題