Question

是否可以使手柄更厚，更容易抓住？

例如，在下面的链接中，您会注意到我只在底部的div上有一个句柄，这很难控制使用鼠标，因为它似乎是1px高。是否有可能使手柄高度为10px，所以它看起来和感觉就像图像被抓住一样？

Answer 1

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

Answer 2

在thirtydot上展开：如果您在同一页面上有多个可调整大小，您可能希望使用子选择器#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检查器（在Firefox和Chrome上使用Ctrl + Shirt + I），以查看jQuery UI对HTML的影响。

jQuery UI可调整大小 - 如何加厚句柄

2 个答案: