jQuery UI redimensionnable: hauteur automatique lors de l'utilisation seule poignée est

Question

J'ai une div divisible jqueryui. Je veux seulement que la largeur soit re-dimensionnable et que la hauteur reste auto, de sorte que le div croisse ou se rétrécisse avec le contenu. Si je l'ai configuré pour n'afficher que la poignée est et utiliser css height:auto, après le redimensionnement, la hauteur est également définie même si seule la largeur a changé. Je dois définir la hauteur à auto sur l'événement de redimensionnement à chaque fois comme suit:

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

pour empêcher la hauteur d'être définie. Y a-t-il une meilleure façon d'éviter que la hauteur ne soit réglée lorsque seule la poignée est est utilisée?

Answer 1

Essayez de régler un rapport d'aspect et la propriété poignées:

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

Le ci-dessus va créer un conteneur qui réinvestit automatiquement la taille à un rapport d'aspect 16/9, avec seulement une poignée sur le côté est de le conteneur.

Voici la description du site de documentation à http://jqueryui.com/demos/resizable/#option-containment:

Si cela est spécifié comme une chaîne, devrait être une liste par des virgules scission de l'un des éléments suivants: « n, e, s, w, ne, se , sw, nw, tous '. Les poignées nécessaires seront générées automatiquement par le plugin.

Si spécifié comme objet, les clés suivantes sont supportées: {n, e, s, w, ne, se, sw, nw}. La valeur de tout spécifié doit être un sélecteur jQuery correspondant à l'élément enfant de la redimensionnable à utiliser comme ce handle. Si le handle n'est pas un enfant de la redimensionnable, vous pouvez passer le DOMElement ou un objet jQuery valide directement.

exemples de code

Initialiser une option redimensionnable avec les poignées spécifié.

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

Récupère ou définit l'option des poignées, après init.

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