jquery - jQuery UI Resizable - 如何加厚手柄

Question

是否可以将手柄做得更厚，以便于抓握？

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

http://jsfiddle.net/rYFEY/25/

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使用默认值：http bottom: -5px: //jsfiddle.net/thirtydot/rYFEY/378/

Answer 2

扩展三十点：如果您在同一页面上有多个可调整大小，您可能希望使用子选择器指定要作用的元素#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>

但是，如果您想为 a 执行此操作，textarea则必须改用兄弟选择器：

#resizable + .ui-resizable-s

因为在这种情况下，jQuery UI 会智能地看到它是 atextarea并将其放入包装器中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 所做的事情。