Можно ли сделать ручку толще, чтобы легче захватить?
Например, в приведенной ниже ссылке вы заметите, что у меня есть дескриптор на div только внизу, который трудно получить с помощью мыши, поскольку он кажется 1px высоким. Можно ли сделать ручку 10px высотой, так что она выглядит и чувствует, что изображение захватывается?
.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/
Расширение на тридцать: если на одной странице есть несколько изменяемых размеров, вы можете указать, с каким элементом будет действовать дочерний селектор #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.