Comment redimensionner UNIQUEMENT horizontalement ou verticalement avec jquery UI Redimensionnable?

Question

La seule solution que j'ai trouvée consiste à définir la hauteur ou la largeur maximale et minimale avec la valeur actuelle.

Exemple:

 foo.resizable({ 
  maxHeight: foo.height(), 
  minHeight: foo.height() 
});
 

Mais c'est vraiment moche, surtout si je dois modifier la hauteur de l'élément par programmation.

Merci d'avance.

Diego

Answer 1

Vous pouvez définir l' option handles redimensionnement pour qu'elle s'affiche uniquement à gauche et à droite (ou est / ouest), comme suit:

 foo.resizable({
    handles: 'e, w'
});​
 

Vous pouvez essayer ici.

Answer 2

Alors que l'affiche a été principalement demandant une horizontale-seuls les redimensionner, la question ne se poser à la verticale, trop.

L'étui vertical dispose d'un numéro spécial: Vous pourriez avoir défini une largeur relative (par exemple 50%) que vous souhaitez conserver, même lorsque la fenêtre du navigateur est redimensionnée. Cependant jQuery UI définit une largeur absolue en px une fois que vous d'abord redimensionner l'élément et la largeur relative est perdu.

Si trouvé le code suivant à travailler pour ce cas d'utilisation:

$("#resizable").resizable({
    handles: 's',
    stop: function(event, ui) {
        $(this).css("width", '');
   }
});

Voir aussi http://jsfiddle.net/cburgmer/wExtX/ et jQuery UI resizable : automatique de la hauteur lors de l'utilisation de l'orient gérer seul

Answer 3

Une solution très simple:

 $( ".selector" ).resizable({ grid: [1, 10000] }); // horizontal
$( ".selector" ).resizable({ grid: [10000, 1] }); // vertical
 

Cela fonctionne aussi pour draggable (). Exemple: http://jsfiddle.net/xCepm/

Answer 4

La solution consiste à configurer votre redimensionnable afin d’annuler les modifications de la dimension que vous ne souhaitez pas.

Voici un exemple de verticalement seulement redimensionnable:

 foo.resizable({
  resize: function(event, ui) { 
    ui.size.width = ui.originalSize.width;
  }      
}); 
 

Answer 5

Je voulais autoriser le redimensionnement de la largeur lorsque le navigateur redimensionne, mais pas lorsque l'utilisateur modifie la taille de l'élément, cela a bien fonctionné:

 foo.first().resizable({
    resize: function(event, ui) { 
    ui.element.css('width','auto');
    },
});