jQuery-UI: ridimensionabile: come aumentare la dimensione del bordo trascinabile?

Question

Sto usando i bordi ridimensionabili di jQuery-UI per aumentare l'altezza di una tabella. Mi chiedo come creare un bordo inferiore più spesso che può essere trascinato? Aumentare il bordo attorno al tavolo non fa differenza.

Answer 1

Con la chiamata $(...).resize(), è possibile impostare qualsiasi elemento figlio come handle. Take a look at this example:

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

Esso permette di estendere per l'#resizeDiv sul bordo inferiore, assegnando l'elemento #handle come area attiva trascinamento.

Answer 2

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

Avrete bisogno di una nuova immagine per il gestore di ridimensionamento, ma heres qualcosa che si può lavorare, il suo solo CSS!

Answer 3

È possibile ottenere che cambiando un po 'di CSS:

CSS^{classi presenti sulla jQuery UI foglio di stile}

/* 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; 
} 

In questa Fiddle Example potete vederlo in azione!

Nota:

Non c'è davvero bisogno di cambiare nulla sul foglio di stile jQuery UI, basta dichiarare i valori notizie CSS dopo l'inserimento della scheda di jQuery UI Style!