JQuery UI Resizable - Как сгустить ручку

Можно ли сделать ручку толще, чтобы легче захватить?

Например, в приведенной ниже ссылке вы заметите, что у меня есть дескриптор на div только внизу, который трудно получить с помощью мыши, поскольку он кажется 1px высоким. Можно ли сделать ручку 10px высотой, так что она выглядит и чувствует, что изображение захватывается?

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

Ответ 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/

Ответ 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>

Если вы хотите сделать это для textarea, однако, вместо этого вы должны использовать селектор sibling:

#resizable + .ui-resizable-s

потому что в этом случае пользовательский интерфейс jQuery разумно видит, что он является textarea и помещает его в обертку div:

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

Лучший способ достичь этих выводов - запустить ваш инспектор DOM браузера (Ctrl + Shirt + я на Firefox и Chrome), чтобы увидеть, что пользовательский интерфейс jQuery делает с вашим HTML.