possible de contraindre jQuery redimensionner à l'axe x ou y, comme le glisser-contraindre?

Cette jQuery vous permet de contraindre faites glisser le mouvement de sorte qu'il ne se produit que sur l'axe spécifié:

$("#draggable2").draggable({ axis: 'x' });

Voir: http://jqueryui.com/demos/draggable/#constrain-movement

Ce n'est pas légal de jQuery, mais je souhaite qu':

$("#Container").resizable({ minHeight: 150, containment: {axis:'y' } });

Est-il possible d'empêcher l'utilisateur de faire des #Récipient plus large tout en lui permettant de le faire plus grand?

Grâce

OriginalL'auteur Tim | 2010-05-12

  1. 26

    Oui, c'est possible en utilisant les événements de l'UI. Le long de l'axe des x:

    $("#Container").resizable({
    resize: function(event, ui) {
        ui.size.width = ui.originalSize.width;
    }
});

    ou le long de l'axe des y:

    $("#Container").resizable({
    resize: function(event, ui) {
        ui.size.height = ui.originalSize.height;
    }
});
    fonctionne comme un charme... merci...
    Cela peut ne pas fonctionne plus. J'ai essayé dur de codage de l'interface utilisateur.taille.la largeur de l'événement resize et trouvé que c'était ignoré. Peut-être que certains changement de jquery a cassé cette solution.
    s'avère que cela fonctionne dans l'interface utilisateur de jquery 1.9, mais pas 1.10; je l'ai soumis un bug
    Cela a fonctionné pour moi dans v1.11.4.. Merci!

    OriginalL'auteur dtretyakov

  2. 27

    Ces deux réponses de travail, mais ils ont la fâcheuse conséquence de l'affichage d'un <-> curseur sur la frontière orientale, l'utilisateur pense qu'ils pourraient être en mesure de redimensionner la largeur. Ce que je pense est un meilleur match pour appeler ce sur l'objet jQuery:

    .redimensionnable({poignées:'s'})

    puisque ce sera tout simplement de supprimer la possibilité de changer la largeur, et le curseur.

    L'amour de cette réponse. INTERFACE utilisateur conviviale, ce qui est un peu le point. Si jamais vous avez décidé de l'utilisation d'un fantôme ou d'un accompagnateur, les autres méthodes seraient de nature à tromper et, éventuellement, de frustrer vos utilisateurs. C'est simple, élégant, et pas intensive du processeur. Notez également que vous pouvez utiliser {handles: 's, n'} ou {handles: 'n'} si vous le souhaitez, vous n'êtes pas limité à seulement capable de redimensionner sur le bord inférieur
    Lien vers la documentation
    Merci pour cette réponse thumbs up!
    Cela fonctionne aussi avec bootstrap, la accepté de répondre à cause du redimensionnement de la zone de devenir un peu plus petit à chaque fois que vous redimensionnez.

    OriginalL'auteur daveagp

  3. 3

    J'ai trouvé que la juste compensation de la hauteur ou la largeur de style en ligne sur l'objet à redimensionner fonctionne également. Il a aussi l'avantage de ne pas être lié à l'objet d'origine dimensions (puisque ceux-ci pourraient changer en fonction du contenu)

    $("#Container").resizable({
    resize: function(event, ui) {
        $(this).css('height','');
    }
});
    C'est une excellente solution. J'ai un très grand redimensionnable, donc je ne montrons que la poignée de la se coin, sinon ce serait manquer. Réglage de la max et min de la hauteur n'a pas l'air de fonctionner vu le contenu se repositionne comme le redimensionnement se passe.
    La seule solution de travail ici, vu que vous êtes à l'aide de la dernière version de jQuery UI. Je vous remercie.

    OriginalL'auteur Andy Yang

  4. 2

    Je vois deux façons pour vous de le faire, l'un mieux que l'autre. Le meilleur premier:

    1) Définir minWidth et maxWidth à la même valeur (à savoir la valeur que vous souhaitez que la largeur reste).

    $('#theThing').resizable({ minWidth = 200, maxWidth = 200 });

    2) Créer un élément parent avec une largeur fixe, et que l'enceinte de confinement. Je ne sais pas comment cela va fonctionner sur la hauteur, mais par défaut, un div sans hauteur spécifiée augmente si son contenu n', de sorte qu'il peut fonctionner.

    Merci pour la suggestion, de la Tomas. Malheureusement, lors de la #theThing est contenue à l'intérieur de #Container et #Conteneur n'a pas explicite hauteur: $("#theThing").redimensionnable({ minHeight: 150, le confinement: '#Container' }) alors theThing ne peut pas être redimensionnée à la verticale. #Conteneur ne peut tout simplement pas se développer au-delà de la hauteur qu'il doit rendre #theThing en premier lieu.
    avez-vous essayez dans l'autre sens - réglage min et max de la largeur à la même valeur? C'est ce que je fais, plutôt que d'avoir un conteneur.

    OriginalL'auteur Tomas Aschan