jQuery UI 可缩放 - 如何加粗手柄

Question

是否可以将手柄加粗，以便更容易抓取？

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

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

- oshirowanen

Answer 1

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

请参考：http://jsfiddle.net/thirtydot/rYFEY/376/

为了更加清晰，可以使用rgba：http://jsfiddle.net/thirtydot/rYFEY/377/

使用rgba并去掉默认的bottom: -5px：http://jsfiddle.net/thirtydot/rYFEY/378/

- thirtydot

---

所有四个手柄都具有 .ui-resizable-handle 类。 - Ciro Santilli OurBigBook.com

我想补充一下，如果使用overflow:hidden属性，那么“暴露”的高度将会是一半（在这种情况下为5像素）。 - Alan Wagner

jsfiddle无法工作是因为jquery-ui.css的URL错误。在这里修复了它jsfiddle.net/rYFEY/375/。 - stomtech

@stomtech：谢谢您告诉我。我已经在我的答案中更新了它们。 - thirtydot

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>

如果你想为一个实现这个功能，你必须使用兄弟选择器：</br><div class="h-2"></div><pre class="guess-Ini"><code>#resizable + .ui-resizable-s </code></pre></br><div class="h-2"></div>因为在这种情况下，jQuery UI会智能地识别它是一个<textarea>元素，并将其放置在一个包装器<div>中： </p> <pre class="guess-CSS"><code><div> <textarea id="resizable"></textarea> <div class="ui-resizable-handle ui-resizable-s"></div> </div> </code></pre> <p>达成这些结论的最佳方式是运行您的浏览器的DOM检查器（在Firefox和Chrome上按Ctrl + Shirt + I），以查看jQuery UI对您的HTML所做的更改。</p>

- Ciro Santilli OurBigBook.com