web-dev-qa-db-fra.com

Comment redimensionner UNIQUEMENT horizontalement ou verticalement avec jQuery UI Redimensionnable?

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.

jqueryjquery-uijquery-ui-resizable
79
Diego

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

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

Vous pouvez essayer ici.

138
Nick Craver

Alors que l'affiche demandait principalement un redimensionnement horizontal uniquement, la question demande également la verticale.

Le cas vertical présente un problème particulier: vous avez peut-être défini une largeur relative (par exemple 50%) que vous souhaitez conserver même lorsque la fenêtre du navigateur est redimensionnée. Cependant, l'interface utilisateur de jQuery définit une largeur absolue en px une fois que vous redimensionnez pour la première fois l'élément et que la largeur relative est perdue.

Si le code suivant fonctionne pour ce cas d'utilisation, s'il est trouvé:

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

Voir aussi http://jsfiddle.net/cburgmer/wExtX/ et Interface utilisateur jQuery redimensionnable: hauteur automatique lors de l'utilisation de la poignée est seule

25
cburgmer

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/

16
Jan

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;
  }      
});
9
Lambder

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');
    },
});
0
Farhad Malekpour

Pour moi, les solutions comportant à la fois des poignées et le gestionnaire resize fonctionnaient bien. Ainsi, les utilisateurs voient les poignées mais ne peuvent redimensionner que horizontalement. Une solution similaire devrait fonctionner pour les solutions verticales. Sans le gestionnaire en bas à droite l'utilisateur peut ne pas savoir qu'il peut redimensionner l'élément.

Lors de l'utilisation de ui.size.height = ui.originalSize.height;, il sera ne fonctionnera pas correctement si l'élément a changé de taille par rapport à son état initial.

foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        $(this).css("height", '');
    }
});

Pour de meilleures performances, $(this) pourrait être supprimé:

var foo = jQuery('#foo');
foo.resizable({
    // Handles left right and bottom right corner
    handles: 'e, w, se',
    // Remove height style
    resize: function(event, ui) {
        foo.css("height", '');
    }
});
0
user133408
Successfully working div position Vertically and horizontally
-------------------------------------------------------------

<head>

    <style>
    .resizable {
        height: 100px;
        width: 500px;
        background: #09C;
    }
    .resizable-x {
        height: 100px;
        width: 500px;
        background: #F60;
    }
    </style>

    <script>
     $(function() {

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

        $( ".resizable-x " ).resizable({
            grid: [1, 10000]
        });


        $( ".resizable" ).draggable();
        });

      });
        </script>`enter code here`
    </head>

    <body>
    <div class="resizable"></div>
    <div class="resizable-x"></div>
    </body>
0
Vinod Kumar