jQuery UI Resizable - 如何加厚手柄答案

【问题标题】：jQuery UI Resizable - How to thicken handlejQuery UI Resizable - 如何加厚手柄
【发布时间】：2017-11-14 09:48:43
【问题描述】：

是否可以将手柄加厚，以便于抓握？

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

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

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-resizable jquery-ui-theme

【解决方案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/

【讨论】：

所有 4 个句柄都有 .ui-resizable-handle 类。
谢谢！我只是补充一点，如果溢出隐藏，“暴露”高度将是一半（在这种情况下为 5px）
jsfiddle 不起作用，因为 jquery-ui.css 的 url 错误。在这里修复它jsfiddle.net/rYFEY/375/
@stomtech：感谢您告诉我。我也在我的回答中更新了它们。

【解决方案2】：

在 30 点上展开：如果您在同一页面上有多个可调整大小，您可能希望使用子选择器 #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 所做的操作。

【讨论】：