Interfaccia utente jQuery ridimensionabile: altezza automatica quando si utilizza solo la maniglia est

Question

Ho un div ridimensionabile jqueryui. Voglio solo ridimensionare la larghezza e mantenere l'altezza automatica, in modo che il div cresca o si ritiri con il contenuto. Se lo imposto per visualizzare solo la maniglia orientale e utilizzare css height:auto, dopo il ridimensionamento l'altezza viene impostata anche se solo la larghezza è cambiata. Devo impostare l'altezza automaticamente all'evento di ridimensionamento ogni volta in questo modo:

resize: function(event, ui) { 
    $(this).css('height', 'auto'); 
} 

per impedire l'impostazione dell'altezza. C'è un modo migliore per evitare che l'altezza venga impostata quando viene utilizzata solo la maniglia est?

Answer 1

Prova a impostare un rapporto di aspetto e la proprietà maniglie:

$("#resizable").resizable({ 
     aspectRatio: 16/9, 
        handles: 'e' 
    }); 

È possibile che questo creerà un contenitore che si ri-size automaticamente a un rapporto di 16/9, solo con una maniglia sul lato est di Il container.

Ecco la descrizione dal sito della documentazione in http://jqueryui.com/demos/resizable/#option-containment:

Se specificato come una stringa, dovrebbe essere un elenco separato da spaccato di uno dei seguenti: 'n, e, s, w, NE, SE , sw, nw, all '. I manici necessari verranno generati automaticamente dal plugin.

Se specificato come oggetto, sono supportati i seguenti tasti: {n, e, s, w, ne, se, sw, nw}. Il valore di qualsiasi specificato dovrebbe essere un selettore jQuery che corrisponde all'elemento figlio del ridimensionabile da utilizzare come handle. Se l'handle non è un bambino ridimensionabile, è possibile passare direttamente a DOMElement oa un oggetto jQuery valido.

Esempi di codice

inizializzare un ridimensionabile con l'opzione maniglie specificata.

$(".selector").resizable({ handles: 'n, e, s, w' }); 

Ottenere o impostare l'opzione di maniglie, dopo l'init.

//getter 
var handles = $(".selector").resizable("option", "handles"); 
//setter 
$(".selector").resizable("option", "handles", 'n, e, s, w');