script.aculo.us - Effets visuels
Les effets script.aculo.us sont divisés en deux groupes -
Effets de base
Les six effets principaux suivants constituent la base de la bibliothèque JavaScript des effets visuels script.aculo.us.
Effect.Opacity
Effect.Scale
Effect.Morph
Effect.Move
Effect.Highlight
Effect.Parallel
Tous les effets principaux prennent en charge divers paramètres communs ainsi que des paramètres spécifiques à l'effet et ces noms d'effet sont sensibles à la casse.
Tous les paramètres communs spécifiques aux effets ont été décrits dans ce didacticiel avec les effets.
Effets combinés
Tous les effets combinés sont basés sur les cinq effets principaux et sont considérés comme des exemples pour vous permettre d'écrire vos propres effets.
Habituellement, ces effets reposent sur l'exécution parallèle et synchronisée d'autres effets. Une telle exécution est facilement disponible, il est donc très facile de créer vos propres effets combinés. Voici une liste d'effets combinés -
Effect.Appear
Effect.Fade
Effect.Puff
Effect.DropOut
Effect.Shake
Effect.SwitchOff
Effect.BlindDown
Effect.BlindUp
Effect.SlideDown
Effect.SlideUp
Effect.Pulsate
Effect.Squish
Effect.Fold
Effect.Grow
Effect.Shrink
De plus, il y a le Effect.toggle méthode utilitaire pour les éléments que vous souhaitez afficher temporairement avec une animation Apparition / Fondu, Diapositive ou Aveugle
Effect.toggle
Fichiers de bibliothèque requis pour les effets
Pour utiliser les capacités d'effets de script.aculo.us, vous devrez charger le module d'effets. Ainsi, votre chargement minimum pour script.aculo.us ressemblera à ceci:
<html>
<head>
<title>script.aculo.us effects</title>
<script type = "text/javascript" src = "/javascript/prototype.js"></script>
<script type = "text/javascript" src = "/javascript/"effects.j"></script>
</head>
<body>
...
</body>
</html>
Fonctions d'effet d'appel
La bonne façon de démarrer un effet de base est généralement avec le newopérateur. Selon vos préférences, vous pouvez utiliser l'une des deux syntaxes -
Syntaxe
new Effect.EffectName(element [, requiredArgs ] [ , options ] )
OR
element.visualEffect('EffectName' [, requiredArgs ] [,options])
Ces deux syntaxes sont techniquement équivalentes. Le choix entre les deux concerne principalement votre sens personnel de l'esthétique du code.
Exemple
Voici deux appels équivalents, vous pouvez donc voir comment les syntaxes sont liées, qui sont très interchangeables -
new Effect.Scale('title', 200, { scaleY: false, scaleContent: false });
OR
$('title' ).visualEffect('Scale', 200, { scaleY:false, scaleContent:false });