J'ai le CSS suivant:

<style type="text/css">
    #list { overflow:auto; }
    #list li { float:left; margin-right:10px; }

    div { width:500px; height:500px; border:1px solid gray; position:relative; }
    iframe { border:0 none; width:100%; height:100%; display:block; }
    span.togglebutton { position:absolute; left:0; top:0; background-color:black; padding:3px; color:white; }

    div.maximized { position:fixed; top:0; left:0; width:100%; height:100%; border:0 none; z-index:9; }
  </style>

Cela s'appelle:

$("span.togglebutton").click(function() {
        var $this = $(this);
        $this.closest("li").children("div").toggleClass("maximized");
});

Essentiellement, il maximise / minimise mon iFrame pour être en plein écran. Je veux animer le maximiser et le minimiser. Comment puis-je m'y prendre?

MISE À JOUR Voici mon code en utilisant le code d'Adeno:

$("span.togglebutton").click(function() {
        var $this = $(this);
        var currentText = $this.text();
        var theFrame = $(this).closest("li").children("div");

        if (currentText === "Maximize") {
            $this.text("Minimize");
            theFrame.animate({height: "100%", width: "100%"});
        }
        else {
            $this.text("Maximize");
            theFrame.animate({height: "50%", width: "50%"});
        }
    });

Cela fonctionne bien, sauf que j'aimerais que la fonction maximise prenne le plein écran. Comment puis-je faire ceci?

2
Sheehan Alam 26 sept. 2011 à 22:15

4 réponses

Meilleure réponse

Pour être honnête, c'est un peu délicat ... pour qu'il se comporte correctement, il reste encore beaucoup à faire.

Voici une démonstration de travail utilisant jQuery

J'espère que tu aimes. Je l'ai fait à partir de zéro pour m'assurer que cela fonctionnerait. J'ai ajouté une barre (d'outils) sur le dessus afin qu'elle puisse contenir mes contrôles, avec quelques ajustements, vous pouvez en faire une image et aligner les contrôles à droite sur la div du conteneur.

Il n'y a vraiment aucune façon «plus intelligente» de le faire, je pense. L'événement de redimensionnement bind / unbind est critique, sans quoi cela se briserait lors d'un redimensionnement.

PS .; C'est Google qui le rend un peu bancal dans l'animation (il a redimensionné ses propres événements qui sont déclenchés en permanence dans l'animation), je ne pouvais tout simplement pas penser à un meilleur site Web à utiliser qui fonctionne également dans un iframe (stackoverflow doesn 't).

Modifier:

Selon la demande dans les commentaires; voici une version pour plusieurs cadres sur une page. Pas complètement testé et pourrait utiliser une certaine optimisation mais je suis très fatigué donc ça ne va pas arriver aujourd'hui;)

http://jsfiddle.net/sg3s/BT4hU/35/

1
sg3s 26 sept. 2011 à 21:01

Il existe des moyens d'animer les transitions de classe, mais je pense que j'opterais pour autre chose.

Cela dépend de ce que signifie minimisé, mais vous pouvez regarder toggle () au lieu de toggleClass () et supprimer entièrement les classes car toogle permet l'animation, mais masque complètement l'élément.

Une autre option serait d'utiliser simplement animate () sur la hauteur et la largeur pour maximiser et minimiser votre iframe. Avec une instruction if, vous pouvez créer un effet de bascule sur les tailles que vous souhaitez animer vers et depuis.

Il y a quelques problèmes interdomaines avec les iframes, mais si cela fonctionne avec toggleClass (), cela devrait probablement aussi fonctionner avec animate (). L'exemple suppose que l'iframe a un identifiant #myiframe, et il n'est pas testé, donc il pourrait y avoir des erreurs, juste pour montrer un exemple.

#myiframe { position:fixed; top:0; left:0; width:40%; height:40%; border:0 none; z-index:9; }

-

$("span.togglebutton").click(function() {
    var elm = $(this).closest("li").children("div");
    if (elm.css("height") == "40%") {
       elm.animate({height: "100%", width: "100%"});
    }
    else {
       elm.animate({height: "40%", width: "40%"});
    }
});

Modifier: Une autre option serait de définir la taille de l'iframe en pixels et de l'animer à la taille de l'écran:

#myiframe { position:fixed; top:0; left:0; width:400px; height:400px; border:0 none; z-index:9; }

-

$("span.togglebutton").click(function() {
    var H = window.height();
    var W = window.width();
    var elm = $(this).closest("li").children("div");
    if (elm.css("height") == "400px") {
       elm.animate({height: H, width: W});
    }
    else {
       elm.animate({height: "400px", width: "400px"});
    }
});

Peut-être que vous pourriez l'utiliser pour quelque chose, car je ne sais pas pourquoi l'iframe ne s'anime pas à 100%, mais il est probablement contraint dans un autre élément ou quelque chose comme ça, donc il va à 100%, seulement il le fait à l'intérieur de l'élément dans lequel il est positionné. L'utilisation de pixels absolus obtenus à partir de la taille de l'écran devrait fonctionner, ou peut-être quelque chose entre les deux? mais malheureusement, vous ne pouvez pas mélanger les pixels et le pourcentage dans css / jQuery. L'utilisation de pixels nécessiterait également une fonction pour mettre à jour la taille lors du redimensionnement du navigateur.

3
adeneo 26 sept. 2011 à 20:34

Chaîne l'animation à votre toggleClass, http://api.jquery.com/animate/

0
albert 26 sept. 2011 à 18:22

Cela devrait être ce que vous recherchez:

Transitions de classe

Vous ne savez pas dans quelle mesure la transition se fera avec un positionnement fixe, il y aura certainement une solution de contournement.

0
Paystey 26 sept. 2011 à 18:21
7559368