jQuery-UI: redimensionable: ¿cómo aumentar el tamaño del borde arrastrable?

Question

Estoy usando los bordes redimensionables de jQuery-UI para aumentar la altura de una tabla. Me pregunto cómo crear un borde inferior más grueso que se puede arrastrar? Aumentar el borde alrededor de la mesa no hace la diferencia.

Answer 1

Con la llamada $(...).resize(), puede establecer cualquier elemento hijo como manejador. Take a look at this example:

$("#resizeDiv").resizable({handles: {'s': '#handle'}}); 

Se permite el cambio de tamaño para el #resizeDiv en el borde inferior, asignando el elemento #handle como la zona de arrastre activo.

Answer 2

http://jsfiddle.net/89v9U/1/

Usted necesitará una nueva imagen para el controlador de cambio de tamaño, pero aquí está algo que se puede trabajar con él, es sólo CSS!

Answer 3

Puede lograr que cambiando un poco de CSS:

CSS^{clases presentes en la hoja de estilo jQuery UI}

/* handle on the bottom */ 
.ui-resizable-s { 
    height: 15px; 
} 

/* handle on the right */ 
.ui-resizable-e { 
    width: 15px; 
} 
/* handle icon (corner) */ 
.ui-resizable-se { 
    width: 15px; 
    height: 15px; 
} 

En esta Fiddle Example se puede ver en acción!

Nota:

Usted realmente no necesita cambiar nada en la Hoja de jQuery UI estilo, simplemente declarar los valores de noticias css después de la inclusión de la hoja de jQuery UI Style!