1. Accueil
  2. Javascript
  3. Sources Javascript
  4. Sources Effets
  5. Loader une page en ajax avec un petit effet

Loader une page en ajax avec un petit effet

Soyez le premier à donner votre avis sur cette source.

Vue 12 575 fois - Téléchargée 1 271 fois

Télécharger le projet
Commenter

Description

Bonjour,

alors, après avoir recu de l'aide sur le forum pour savoir comment créer une fonction avec les "Effect",
j'ai poussé un tout tout petit peu plus loin, et je me suis dis que cela peut intéresser qqn.

C'est une fonction permettant de charger une page externe dans une div (ou autre) avec un effect Fade (modifiable).
A noter qu'il y a besoin de prototype.js et scriptaculous.js

Source / Exemple : 


<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type"text/javascript" src="effect.js"></script>
<script type="text/javascript">
function davePageLoader(divTarget,divUrl)
{ 
new Effect.Fade(divTarget, 
{
duration    : 0.4,
afterFinish : function()
{ 
new Ajax.Updater(divTarget, divUrl, 
{
onComplete : function() 
{
new Effect.Appear(divTarget);
}
});
}
});
}
</script>
</head>

<body>
<p>Ceci est un petit cript permettant de loader une page dans une div en remplacant son contenu premier, avec un petit effet ajax.</p>
<div><a href="#" onClick="davePageLoader('laDiv','lapage.html')">Essayer</a></div>
<div id="laDiv"><p>ceci est le tete premier</p></div>

</body>
</html>

Conclusion :


Bon, comme c'est ma première source, merci pour les futurs commentaires.
Télécharger le projet

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Signaler
Messages postés
19
Date d'inscription
lundi 2 avril 2007
Statut
Membre
Dernière intervention
1 juin 2010
J'ai un petit problème. Quand dans la page charger il y a du javascript il n'est pas interpréter. comment faire pour qu'il marche ?

Merci d'avance pour tous ceux qui vont m'aidai.
Signaler
Messages postés
111
Date d'inscription
dimanche 23 mars 2003
Statut
Membre
Dernière intervention
1 août 2008
Salut!

Bon si c'est ta première source alors je vais être gentil ;-)

Voici les petites choses que j'ai remarqué :
- manque le fichier effects.js dans ton zip
- quand on utilise prototype faut pas le faire à moitié :
- $(divTarget) équivalent à document.getElementById(divTarget)
- c'est quoi cet appel ajax ? -> Ajax.Updater ou Ajax.Request

Voilà à quoi ressemble ton code après modification :

function davePageLoader(divTarget,divUrl)
{
new Effect.Fade(divTarget,
{
duration : 0.4,
afterFinish : function()
{
new Ajax.Updater(divTarget, divUrl,
{
onComplete : function()
{
new Effect.Appear(divTarget);
}
});
}
});
}

Du coup ya plus grand chose d'original dans cette source, désolé...

Mais c'est bien d'essayer d'utiliser prototype, c'est un très bon framework JS.
Il faut juste que tu passes un peu plus de temps pour voir toutes ses fonctionnalités.
S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Annadrill)