Zend FR

gmifsud · 15-10-2010 11:29:25

Bonjour à tous,

Je suis parvenu à intégrer sur une de mes pages les effets Jquery dont une démo est disponibles sur cette page :
http://jqueryui.com/demos/effect/

Pour cela, je procède ainsi :
Dans le contrôleur :

Code:

        $this->view->headScript('script','
            $(function() {
                // run the currently selected effect
                function runEffectmozaique() {
                    // get effect type from
                    var selectedEffect = $( "#effectTypesmozaique" ).val();
                    
                    // most effect types need no options passed by default
                    var options = {};
                    // some effects have required parameters
                    if ( selectedEffect === "scale" ) {
                        options = { percent: 0 };
                    } else if ( selectedEffect === "transfer" ) {
                        options = { to: "#button", className: "ui-effects-transfer" };
                    } else if ( selectedEffect === "size" ) {
                        options = { to: { width: 200, height: 60 } };
                    }
        
                    // run the effect
                    $( "#mozaique" ).effect( selectedEffect, options, 500, callback );
                };
        
                // callback function to bring a hidden box back
                function callback() {
                    setTimeout(function() {
                        $( "#mozaique" ).removeAttr( "style" ).hide().fadeIn();
                    }, 1000 );
                };
                
                
                //set effect from select menu value
                $(".buttonmozaique").click(function() {
                //    event.preventDefault();        // ajoutée
                //    var link=$(this).attr("href");         // ajoutée
                      runEffect();
                //    window.location.href =link;         // ajoutée
                      return false;
                });
        
            });
        ');




REMARQUE :
Les lignes marquées comme "ajoutées" l'ont été pour tenter de parvenir au résultat escompté,
mais cela ne fonctionne pas et je les ai donc mises en commentaire.

Dans la vue :

Code:

<div id="mozaique" align="center" style="display: none;">
    Des trucs dedans qui vont se faire torturer graphiquement !!!  ^_^
</div>

<select name="effectsmozaique" id="effectTypesmozaique">
    <option value="blind">Blind</option>
    <option value="bounce">Bounce</option>
    <option value="clip">Clip</option>
    <option value="drop">Drop</option>
    <option value="explode">Explode</option>
    <option value="fold">Fold</option>
    <option value="highlight">Highlight</option>
    <option value="puff">Puff</option>
    <option value="pulsate">Pulsate</option>
    <option value="scale">Scale</option>
    <option value="shake">Shake</option>
    <option value="size">Size</option>
    <option value="slide">Slide</option>
</select>
<a href="#" class="buttonmozaique" class="ui-state-default ui-corner-all">Run Effect sur Mozaique</a>

L'objet possédant l'id "mozaique" subit bien les effets voulus lorsque je clique sur le bouton.

MAIS, comme je suis gourmand, je voudrais mettre un lien au lieu de # sur ce bouton !
Et j'aimerais donc que l'effet se lance, puis que l'url soit chargée ensuite.

J'ai lu la doc de AjaxLink, mais mes essais ont été infructueux, et à priori ça ne sert pas du tout à ça.

Merci pour l'aide que vous pourrez m'apporter.

Dernière modification par gmifsud (16-12-2010 10:36:02)

NewSky · 15-10-2010 13:55:36

Salut,

ton code javascript est faux.

Code:

event.preventDefault()

ne peut pas fonctionner vu que l'objet event n'existe pas. Il doit être passé par la fonction qui lance l'action :

Code:

$(".buttonmozaique").click(function(event) {
  event.preventDefault();
  ...

du coup, ton

Code:

return false;

ne sert à rien.

Ensuite, si tu veux que ton url de la page soit modifier à la fin de l'effet, il faut le mettre dans la commande de l'effet :

Code:

$( "#mozaique" ).removeAttr( "style" ).hide().fadeIn(function(){
  // code à exécuter à la fin de l'effet
  // location.href = "adresse_de_destination';
});

Bon, après ton code n'est pas au top et il faudrait que tu regardes un peu mieux la doc de jquery qui te permettrais de t'affranchir de bon nombre de lignes inutiles...

Dernière modification par NewSky (15-10-2010 15:11:09)

omega2 · 15-10-2010 14:39:35

Quand un a un onclik sur un lien, la valeur de retour de ce javascript va indiquer si le navigateur doit traiter le lien ou ne rien faire.
Retourne la valeur "false" si tu veux que le lien soit ignoré. Retourne la valeur "true" si tu veux que le lien soit traité.

Si tu veux attendre la fin de l'effet visuel pour lancer le changement de page, il faut que tu retourne faux que tu récupères la valeur du lien en javascript pour modifier le location.href.
Si tu veux que le changement de page ai lieux pendant l'effet visuel (pour ne pas avoir de temps mort après) alors retourne la valeur "true" et laisse faire le navigateur.

Dernière modification par omega2 (15-10-2010 14:43:24)

NewSky · 15-10-2010 15:16:53

De plus, la fonction

Code:

runEffect();

n'existe pas chez toi. Elle s'appelle

Code:

runEffectmozaique();

gmifsud · 18-10-2010 10:02:21

Je vous remercie pour vos remarques. Elles m'ont permis d'avoir ce que je voulais, c'est à dire lancer un effet et le lien qui est chargé ensuite.

Je ne parviens pas à régler le timing à ma façon, delay() n'est étrangement pas reconnu à l'intérieur de runEffect(), mais je sais où chercher.

Concernant le code non optimal, c'est effectivement le code de la démo de JQuery, qui je suppose met un maximum de choses par soucis d'exhaustivité.
Comme on peut dire que c'est la première fois que je mets la main sur du Javascript (qui fasse autre chose qu'un appel bête et méchant à une fonction tout prête) je suis tout à fait conscient qu'il doit y avoir beaucoup de choses à y redire.
Mais j'y travaille, et j'espère bien m'améliorer, en particulier grâce à votre aide.

Merci encore et à bientôt pour ma prochaine question !

Zend FR

#1 15-10-2010 11:29:25

[RÉSOLU] JQuery : lancer une fonction avant un chargement d'url ?

Code:

Code:

#2 15-10-2010 13:55:36

Re: [RÉSOLU] JQuery : lancer une fonction avant un chargement d'url ?

Code:

Code:

Code:

Code:

#3 15-10-2010 14:39:35

Re: [RÉSOLU] JQuery : lancer une fonction avant un chargement d'url ?

#4 15-10-2010 15:16:53

Re: [RÉSOLU] JQuery : lancer une fonction avant un chargement d'url ?

Code:

Code:

#5 18-10-2010 10:02:21

Re: [RÉSOLU] JQuery : lancer une fonction avant un chargement d'url ?

Pied de page des forums