jQuery UI redimensionable - Cómo espesar la manija

Question

¿Es posible hacer la manija más gruesa, para facilitar el agarre?

Por ejemplo, en el siguiente enlace, observará que tengo un control en un div en la parte inferior solamente, que es difícil de agarrar con el mouse ya que parece ser 1px de alto. ¿Es posible hacer que el asa sea de 10px de alto, por lo que se ve y se siente como si la imagen se estuviera agarrando?

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

Answer 1

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

Ver: http://jsfiddle.net/thirtydot/rYFEY/376/

+ rgba para mayor claridad: http://jsfiddle.net/thirtydot/rYFEY/377/

+ rgba - overflow: hidden con el valor por defecto bottom: -5px: http://jsfiddle.net/thirtydot/rYFEY/378/

Answer 2

Ampliando thirtydot: si tiene varias resizables en la misma página, es posible que desee especificar qué elemento para actuar en un selector niño #resizable > .ui-resizable-s:

<style> 
    #resizable > .ui-resizable-s { 
    background: black; 
    bottom: 0; 
    height: 10px; 
    } 
</style> 
<div id="resizable"></div> 
<script>$('#resizable').resizable()</script> 

Esto funciona porque resizable() añade las asas dentro de la matriz div como:

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

Si usted quiere hacer esto por un textarea sin embargo, usted tiene que utilizar el selector de hermanos en su lugar:

#resizable + .ui-resizable-s 

porque en ese caso jQuery UI inteligente ve que es un textarea y la coloca dentro de un envoltorio div:

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

La mejor manera de llegar a esas conclusiones es ejecutar inspector DOM del navegador (Ctrl + camisa + I en Firefox y Chrome) para ver qué hace jQuery UI con su HTML.