begin process at 2010 03 20 09:43:45
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Effets

 > MOOTOOLS FUNCTION

MOOTOOLS FUNCTION


 Information sur la source

Note :
Aucune note
Catégorie :Effets Classé sous :mootools, effet, toggle, hide, show Niveau :Débutant Date de création :23/01/2009 Date de mise à jour :23/01/2009 13:03:17 Vu / téléchargé :7 201 / 451

Auteur : BEDA91IT

Ecrire un message privé
Commentaire sur cette source (2)
Ajouter un commentaire et/ou une note

 Description

Bonjour, je ne suis pas un expert en JavaScript (loin de la) mais lors de la réalisation d'un site web,je me suis rendu compte que mootools n'étais pas forcément simple d'utilisation. C'est pour cela que j'ai créé cette fonction qui permet de faire les effets suivants:
-Hide
-Show
-Toggle (Horizontal)
-Toggle (Vertical)
-SlideIn
-Slide Out

Source

  • function effect(Id,state,effect)
  • {
  • window.addEvent('domready', function() {
  • var status = {
  • 'true': 'Cacher',
  • 'false': 'Afficher'
  • };
  • switch(effect)
  • {
  • case "toggle-h":
  • Slide = new Fx.Slide(Id, {mode: 'horizontal'}).toggle();
  • break;
  • case "in":
  • Slide = new Fx.Slide(Id, {mode: 'horizontal'}).slideIn();
  • break;
  • case "out":
  • Slide = new Fx.Slide(Id, {mode: 'horizontal'}).slideOut();
  • break;
  • case "toggle-v":
  • Slide=new Fx.Slide(Id).toggle();
  • break;
  • case "hide":
  • Slide=new Fx.Slide(Id).hide();
  • break;
  • case "show":
  • Slide=new Fx.Slide(Id).show();
  • break;
  • }
  • Slide.addEvent('complete', function() {
  • $(state).set('html', status[Slide.open]);
  • });
  • });
  • }
		
function effect(Id,state,effect)
		{
		window.addEvent('domready', function() {
		var status = {
		                'true': 'Cacher',
				'false': 'Afficher'
			     };
				
		switch(effect)
		{
		case "toggle-h":
		Slide = new Fx.Slide(Id, {mode: 'horizontal'}).toggle();
		break;
		case "in":
		Slide = new Fx.Slide(Id, {mode: 'horizontal'}).slideIn();
		break;
		case "out":
		Slide = new Fx.Slide(Id, {mode: 'horizontal'}).slideOut();
		break;
		case "toggle-v":
		Slide=new Fx.Slide(Id).toggle();
		break;
		case "hide":
		Slide=new Fx.Slide(Id).hide();
		break;
		case "show":
		Slide=new Fx.Slide(Id).show();
		break;
		}
				
		Slide.addEvent('complete', function() {
		$(state).set('html', status[Slide.open]);
		});
		});
		}		

 Conclusion

Utilisation:

effect('madiv','state','effet');

De tail:
-madiv : DIV sur laquelle on shouaite réaliser l'effet.
-state: Affiche l'état de madiv dnas une div ayant pour ID state.
-effet : le nom de l'effet.

Effet disponible :
-Hide : hide
-Show : shox
-Toggle (Horzontal):toggle-h
-Toggle (Vertical) : toggle-v
-SlideIn : in
-Slide Out : out

Je le redis,je suis débutant en javascript donc si vous avez des améliorations à me donner,je suis prenneur :)
Merci

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

23 janvier 2009 11:44:48 :
Ajout Detail
23 janvier 2009 11:59:08 :
Ajout Zip.
23 janvier 2009 12:00:52 :
Correction Zip
23 janvier 2009 12:04:22 :
Tout est dans le zip
23 janvier 2009 13:03:17 :
...

 Sources de la même categorie

AFFICHER OU CACHER UN COMPOSANT AVEC JAVASCRIPT V1.0 par xloadx
Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip Source avec une capture PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony
FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

 Sources en rapport avec celle ci

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip MOOTOOLTIP par Miky76
Source avec Zip MOOTABLEAU par Miky76
Source avec Zip CHANGEMENT DE COULEUR SUR CARTE DE FRANCE par librepierre
Source avec Zip FADING OBJETS HTML par Vedlen

Commentaires et avis

Commentaire de cawebeon le 12/08/2009 11:07:15

l'utilisation des fonctions de Jquery sont beaucoup plus simple d'utilisation ^^

Commentaire de ginettepichue le 05/09/2009 18:21:27

Super! Mais comment faire pour que le texte que l'on veut faire apparaitre via par exemple toggle-v ne soit pas visible dès le début. On ne peut que cacher le texte en cliquant sur un lien. Je voudrais pouvoir faire l'inverse: faire apparaitre le texte en cliquant.

Merci pour vos pistes !

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Systeme de Hide/Show ( cacher / afficher une zone ) [ par Tux1 ] Bonjour,Je suis nul en jscritptet j'aimerais savoir comment faire un truc du genre:En cliquant sur un ptit bouton, un zone en dessous s'afficherais en Hide and Show [ par shaft107 ] sltComment faire apparaitre et faire disparaitre un tableauen cliquant sur un bouton radio?shaft hide/show [ par sonialand ] salut tout le monde,je debute en jsjai un code mais j'ai du mal à gérer le hide et le showvoila une partie du code<div id="main_list"><div cl Show/hide... [ par Loser ] Bonjour !j'ai une page de ce type :Lien 1 = groupe de texte 1Lien 2 = groupe de texte 2etc...(qui sera générer par php...)et j'aimerais que quand je c Effet panoramique [ par isu_san ] Bonjour tout le monde, je suis tout nouveau dans l'obscur monde de la création de site et je suis à la recherche d'un script qui me permettrait de me différents effets sur les liens d'une meme page [ par geoffroy ] Salut, J'aimerais savoir comment fait on pour qu'un lien devienne plus gros au survolage de la souris . Mais j'aimerais que cet effet ne marche que su effet de fondu [ par seb019 ] Bonjour,Voila sur un site j'ai vu un truc qui me plait, je pense que c'est du javascript mais je suis pas sur :lorsqu'on clic sur un lien la page s'ou 2 action sur onmouseover [ par fcdconnect ] BOnjour,désolé mais j'ai très peu de connaissance en JS une petite question :quellle est la synthaxe pour 2 evenement sur un mem onmouseover ??exemple effet ouverture de page réactualisé [ par jlagabrielle ] Bonjour !J'ai mis le script suivant pour ouvrir mes pages avec un effet mais l'effet n'a lieu que lors de la première ouverture de la page, quand je r Effet de texte [ par romain2boss ] Salut,je suis pas un fan de javascript, et je cherche de puis un bon bout de temps un script de défilement de texte qui fasse un peu comme l'intro de


Nos sponsors


Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

Photothèque

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,952 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales