Documentation Script.aculo.us par Hadrien L.

Voici une traduction approximative et incomplète de la documentation de Script.aculo.us en Français.
J'ai designé (du verbe to design :p) l'interface à l'aide des classes de cette même librairie pour avoir un aperçu direct des possibilités de cette bibliothèque.

Tout ouvrir Tout fermer

• Pré-Requis

  • Téléchargez

    Téléchargez Script.aculo.us sur la page de téléchargement.

  • Installez

    Placez les fichiers prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js et controls.js dans un dossier de votre site web (par exemple 'javascripts/')

  • Liez

    Liez les scripts sur votre page :

    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>

    Par défaut, Scriptaculous.js va charger tout les fichiers javascripts necessaire à l'éxécution des fonctionnalités de la bibliothèque (drag'n'drop, effets, etc.) Si vous n'avez pas besoin de toute ces fonctions, vous pouvez ne charger que certaines parties :

    <script src="scriptaculous.js?load=effects,dragdrop" type=...></script>

    Vous pouvez spécifier les scripts suivants :

    • builder
    • effects
    • dragdrop
    • controls
    • slider

  • Utilisez

    Pour appeler des fonction Script.aculo.us, utiliser les balises <script> de la façon suivante :

    						<script type="text/javascript" language="javascript">
    // <![CDATA[
    	Effect.Appear('element_id');
    // ]]>
    </script>

    Vous pouvez aussi utiliser les fonction dans les gestionnaires d'évenements :

    <div onclick="new Effect.SwitchOff(this)">
    	Click here if you've seen enough.
    </div>

    Vous pouvez aussi passer des paramètres aux effets comme 'duration' (durée), ou 'fps' (trames par minute) :

    <div onclick="new Effect.BlindUp(this, {duration: 16})">
    	Click here if you want this to go slooooow.
    </div>

  • Étape suivante

    • Regardez les démonstrations pour avoir un aperçu des possibilités de Script.aculo.us.
    • Lisez bien la documentation.
      (et apportez vos corrections si vous trouvez des erreurs en me contactant par eMail;))

• Classes Prototype

  • Général

    • $('chaîne')

      Retourne l'élément d'id chaîne.

      Syntaxe :

      $('monDiv')  // Retourne une référence vers l'élément d'id 'monDiv'

      Voir DollarFunction

    • $F('chaîne')

      Retourne la valeur de l'élément d'ID chaîne.

      Syntaxe :

      $F('monChamp')  // Retourne la valeur du champ d'id 'monChamp'

      Voir Dollar F Function

    • Try.these(fonction1, fonction2, ..., fonctionN)

      Tente chacune des fonctions jusqu'à ce que l'une d'elle fonctionne.

      Syntaxe :

      Try.these( fonction1, fonction2, [...], fonctionN );

      Voir Try.these

  • Object

    • Object.extend(obj1, obj2)

      Remplace les propriétés de l'objet obj1 par celles de l'objet obj2.

      Syntaxe :

      Object.extend(obj1, obj2);

      Voir Object.extend

  • Classe

    • Class.create()

      Crée une nouvelle classe et exécute la méthode initialize().

      Syntaxe :

      MyClass = function() {}
      	MyClass.prototype.initialize = function(a, b) {
      		this.a = a;
      		this.b = b;
      	}
      	
      	var mc = new MyClass();
      	mc.initialize("foo", "bar");

      Voir Object.extend

  • Prototype

    • Prototype.version

      Retourne la version de Prototype.

      Syntaxe :

      alert(Prototype.Version); // "1.4.0"

      Voir Prototype.Version

    • Prototype.emptyFunction

      Retourne une référence vers une fonction anonyme javascript qui ne fait rien.

      Syntaxe :

      function example() {
      	  var callback = arguments[1] || Prototype.emptyFunction;
      	  callback();
      	}

      Voir Prototype.emptyFunction

  • Number

    • Number.prototype.toColorPart

      Retourne la valeur hexadécimale d'un nombre décimal.

      Syntaxe :

      num.toColorPart();

      Voir Number.prototype.toColorPart

  • Array

    • Array.prototype.push

      Ajoutes la méthode push à tout les tableaux pour les navigateurs qui ne respectent pas ECMAScript 3 (IE 5).

      Syntaxe :

      arr = [47, 11];
      	arr.push(8, 15); // Retourne 4, la nouvelle taille du tableau

      Voir Array.prototype.push

  • Instanciation de fonctions

    • function.prototype.apply

      Appele une fonction sur un objet en utilisant eval().
      Cette méthode n'est présente que pour pallier aux navigateurs qui ne le supportent pas nativement.

      Syntaxe :

      Function.apply( object, parameters );

      Voir Function.prototype.apply

    • function.prototype.bind

      Cette méthode est utilisée pour permettre aux références des fonctions d'etre totalement orientées objet.
      Si quelqu'un peut m'expliquer plus clairement de quoi il s'agit, je serais tout ouïe ;)

      Syntaxe :

      Function.bind( object );

      Voir Function.prototype.bind

    • function.prototype.bind as event listener

      Cette méthode retourne une instance de la fonction avec l'objet propriétaire en paramètre. La fonction retournée aura l'evenement courant en argument.
      Si quelqu'un peut m'expliquer plus clairement de quoi il s'agit, je serais tout ouïe ;)

      Syntaxe :

      Function.bindAsEventListener(object);

      Voir Function.prototype.bindAsEventListener

  • Instanciation de chaînes

    • string.prototype.strip tags

      Retourne une copie de la chaîne sans les tags HTML grâce à l'expression régulière (/<\/?[^>]+>/gi).
      Interressant quand on doit afficher le contenu d'un élément dans un alert() par exemple.

      Syntaxe :

      string.stripTags();

      Voir String.prototype.stripTags

    • string.prototype.escape html

      Retourne une chaîne dont les caractères spéciaux sont échappés. Les caractères tels que ’<’, ’>’, ’&’ sont remplacés par ’&lt;’, ’&gt;’, ’&amp;’...

      Syntaxe :

      string.escapeHTML();

      Voir String.prototype.escapeHTML

    • string.prototype.unescape html

      C'est l'inverse de string.prototype.escape html. Il réencode les caractère échappés en caractère spéciaux : ’&lt;’, ’&gt;’, ’&amp;’ deviennent ’<’, ’>’, ’&’...

      Syntaxe :

      string.unescapeHTML();

      Voir String.prototype.unescapeHTML

  • Document

    • document.get elements by class name

      Retourne un tableau d'éléments possédant la classe en paramètre.

      Syntaxe :

      var elementList = document.getElementsByClassName("classname");

      Voir Document.getElementsByClassName

  • Element

    • element.visible

      Retourne vrai si l'element est visible, faux s'il est masqué.

      Syntaxe :

      Element.visible( element );

      Voir Element.visible

    • element.toggle

      Bascule l'état de visibilité de l'element. Permet de masquer/afficher cet element.

      Syntaxe :

      Element.toggle( element );

      Voir Element.toggle

    • element.hide

      Masque un element.

      Syntaxe :

      Element.hide( element );

      Voir Element.hide

    • element.show

      Affiche un element.

      Syntaxe :

      Element.show( element );

      Voir Element.show

    • element.remove

      Enlève l'element de l'arbre DOM.

      Syntaxe :

      Element.remove( element );

      Voir Element.remove

    • element.update

      Remplace le contenu de l'element par le contenu html.

      Syntaxe :

      Element.update(element, html);

      Voir Element.update

    • element.class names

      Retourne le nom de la classe de l'element. Retourne une chaîne vide si l'element n'a pas de classe.

      Syntaxe :

      Element.classNames(element);

      Voir Element.classNames

    • element.has class name

      Retourne vrai si l'element possède la classe nomDeClasse.

      Syntaxe :

      Element.hasClassName(element, nomDeClasse);

      Voir Element.hasClassName

    • element.add class name

      Ajoute la classe nomDeClasse à l'element.

      Syntaxe :

      Element.addClassName(element, nomDeClasse);
      	ou
      	$(element).addClassName(nomDeClasse);

      Voir Element.addClassName

    • element.remove class name

      Enlève la classe nomDeClasse à l'element.

      Syntaxe :

      Element.removeClassName(element, nomDeClasse);

      Voir Element.removeClassName

    • element.clean whitespace

      Enlève tout les textes vides (espaces, tabulations...) des nœuds enfants de l'element.

      Syntaxe :

      Element.cleanWhitespace(element);

      Voir Element.cleanWhitespace

    • element.empty

      Retourne vrai si l'element.innerHTML (le contenu HTML de l'élément) ne contient rien hormis des espaces.

      Syntaxe :

      Element.empty(element);

      Voir Element.empty

    • element.scroll to

      Déplace la barre de défilement jusqu'à la cible.
      (Équivaut à une ancre)

      Syntaxe :

      Element.scrollTo('cible');

      Voir Element.scrollTo

    • element.get style

      Retourne la valeur du style associé à l'element.

      Syntaxe :

      Element.getStyle(element, style);

      Voir Element.getStyle

    • element.set style

      Applique des propriétés CSS à l'element.

      Syntaxe :

      Element.setStyle(element, {ProprieteCSS: valeur [, ...]});

      Voir Element.setStyle

    • element.get dimensions

      Applique des propriétés CSS à l'element.

      Syntaxe :

      var dimensions = Element.getDimensions( element );
      	var width = dimensions.width;
      	var height = dimensions.height;

      Voir Element.getDimensions

  • Event

    • event.observe

      Event.observe est une fonction compatible avec tout les navigateurs qui permet de définir des gestionnaires d'évenements.
      Il nettoie également les gestionnaires d'évenements au déchargement de la page, ce qui évite les fuites de mémoire sur les navigateurs basés sur Gecko.

      La fonction observateur reçoit l'objet event en argument, ce qui évite l'utilisation de 'window.event' sous IE.

      Pour arreter l'écoute, utilisez Event.stopObserving.

      Syntaxe :

      Event.observe(element, nom, observateur, [useCapture]);

      Voir Event.observe

    • event.stop observing

      Event.stopObserving enlève un gestionnaire d'évenement définit par Event.observe.

      Syntaxe :

      Event.stopObserving(element, nom, observateur, [useCapture]);

      Voir Event.stopObserving

    • event.element

      Retourne l'élément qui a actionné l'évenement.

      Syntaxe :

      Event.element(event);

      Voir Event.element

    • event.pointer x

      Retourne la position horizontale de la souris par rapport à la fenetre du navigateur.

      Syntaxe :

      var xPos = Event.pointerX(event);

      Voir Event.pointerX

    • event.pointer y

      Retourne la position verticale de la souris par rapport à la fenetre du navigateur.

      Syntaxe :

      var yPos = Event.pointerY(event);

      Voir Event.pointerY

    • event.stop

      Arrete tout les évenements.
      Ne fonctionne pas sous Safari 2.0.4.

      Syntaxe :

      Event.stop(e);

      Voir Event.stop

    • event.find element

      Retourne le premier nœud correspondant au nomDuTag en partant du nœud qui a déclenché l'évenement.

      Syntaxe :

      Event.findElement(event, nomDuTag);

      Voir Event.findElement

    • event.unload cache

      ???

      Syntaxe :

      ???

      Voir Event.unloadCache

  • Ajax

    • Ajax.request

      Crée une requête Ajax.
      La requête peut être synchrone ou asynchrone, même si en pratique, il vaut largement mieux utiliser de l'asynchrone pour ne pas bloquer le navigateur à chaque requête.

      Syntaxe :

      new Ajax.Request(url, {options}); // Crée une requête HTTP vers l'url spécifiée.

      Options :

      asynchronous:true | false

      Définit si la requête doit être gérée de manière synchrone ou asynchrone. De façon synchrone, le script va rester bloqué jusqu'à ce que la réponse arrive. Tandis qu'en asynchrone, le sccript suit son cours et la fonction onSuccess sera appelée une fois la requête reçue.

      method:'get' | 'post'

      Type de méthode d'envoi.

      parameters:'var1=val1&val2=var2'

      Valeurs à envoyer en argument de la requête via la méthode get.

      postBody:'var1=val1&val2=var2'

      Valeurs à envoyer en argument de la requête via la méthode post.

      onSuccess:function(t)

      Fonction à effectuer après réponse positive de la requête. t est l'objet XMLHttpRequest.

      on404:function(t)

      Fonction à effectuer en cas d'erreur 404 (page introuvable).

      onFailure:function(t)

      Fonction à effectuer en cas d'échec de la requête.

      Voir Ajax.request

    • Ajax.updater

      Crée une requête Ajax et met à jour un conteneur (élément du DOM) avec sa réponse.

      Syntaxe :

      new Ajax.Updater(conteneur, url, options);

      Options : Voir Ajax.Request

      evalScripts:false | true

      Évalue les scripts qui pourraient être inclus dans la réponse.

      Voir Ajax.updater

    • Ajax.periodical updater

      Crée un Ajax.Updater à intervalles réguliers.

      Syntaxe :

      new Ajax.PeriodicalUpdater(conteneur, url, options); // make a HTTP request to the specified URL and update the 'container' element.

      Options : Voir Ajax.Request

      frequency:entier

      Temps en secondes entre chaque intervalles.

      Voir Ajax.PeriodicalUpdater

  • Insertion

    • Insertion.Top

      Insère le contenu en tant que premier enfant de l'element.

      Syntaxe :

      new Insertion.Top(element, contenu);

      Voir Insertion.Top

    • Insertion.Bottom

      Insère le contenu en tant que dernier enfant de l'element.

      Syntaxe :

      new Insertion.Bottom(element, contenu);

      Voir Insertion.Bottom

    • Insertion.Before

      Insère le contenu avant l'element.

      Syntaxe :

      new Insertion.Before(element, contenu);

      Voir Insertion.Before

    • Insertion.After

      Insère le contenu après l'element.

      Syntaxe :

      new Insertion.After(element, contenu);

      Voir Insertion.After

  • Form

    • Form.disable

      Désactive tout les éléments du formulaire.

      Syntaxe :

      Form.disable(document.forms['test']);

      Voir Form.disable

    • Form.serialize

      Crée une chaîne conportant la valeur de chaque champs séparés par une '&'. On peut ensuite facilement l'intégrer dans une requête GET ou POST.

      Syntaxe :

      Form.serialize(element);

      Voir Form.serialize

    • Form.get elements

      Retourne un tableau de tout les champs d'un formulaire.

      Syntaxe :

      var elementList = Form.getElements("formulaire");

      Voir Form.getElements

    • Form.focusFirstElement

      Donne le focus au premier champ du formulaire.

      Syntaxe :

      Form.focusFirstElement('formulaire')

      Voir Form.focusFirstElement

    • Form.reset

      Efface le contenu de tout les champs du formulaire.

      Syntaxe :

      Form.reset('formulaire')

      Voir Form.reset

• Classes Script.aculo.us Effect

  • Core Effect

    • Syntaxe

      new Effect.NomDelEffet(element, parametres, {options});

      Exemple :

      new Effect.Grow($('bloc'), {duration:0.3});

      Options :

      duration:decimal

      Spécifie la durée de l'effet en secondes. Attention, la virgule décimale est un point (0.3).

      fps:entier

      Spécifie le nombre de trames par secondes. La valeur par défaut est 25.

      transition:fonction

      Spécifie une fonction qui modifie le point courant de l'animation qui est entre 0 et 1.
      Les transitions suivantes sont disponibles :

      • Effect.Transitions.sinoidal (par défaut)
      • Effect.Transitions.linear
      • Effect.Transitions.reverse
      • Effect.Transitions.wobble
      • Effect.Transitions.flicker

      from:decimal

      Spécifie le point de départ de la transition, un décimal entre 0.0 et 1.0. 0.0 étant la valeur par défaut.

      to:decimal

      Spécifie le point d'arrivée de la transition, un décimal entre 0.0 et 1.0. 0.0 étant la valeur par défaut.

      sync:false | true

      Définit si l'effet doit créer de nouvelles trames automatiquement (comportement par défaut).
      Si vrai, vous pouvez créer des trames manuellement en appelant la méthode render() d'un effet.

      queue:'chaîne'

      Définie l'emplacement de l'effet dans la file d'attente globale. Chaîne peut prendre comme valeur 'front' ou 'end', ou un objet de paramètre de queue. (Voir Effect.Queue).

      direction:'chaîne';

      Spécifie la direction de l'animation.
      Les valeurs possibles sont les suivantes :

      • ‘top-left’
      • ‘top-right’
      • ‘bottom-left’
      • ‘bottom-right’
      • ‘center’ (par défaut)

      et ne peuvent être appliquées qu'au effets d'aggrandissement et de rétrécissement (Effect.Grow, Effect.Shrink).

      Callback

      Les callbacks permettent d'effectuer des opérations pendant le déroulement d'une animation.
      L'objet Effect est attribué en paramètre du callback.

      beforeStart(obj)

      Appelée avant que l'animation principale ne commence.

      beforeUpdate(obj)

      Appelée à chaque itération de la boucle de rendu de l'effet, juste avant qu'il ne soit redessiné.

      afterUpdate(obj)

      Appelée à chaque itération de la boucle de rendu de l'effet, juste après qu'il eut été redessiné.

      afterFinish(obj)

      Appelée à la fin de l'animation.

      Variables

      effect.element

      L'élement sur lequel l'effet est appliqué.

      effect.options

      Les options appliquées à l'effet.

      effect.currentFrame

      Le numéro de la trame courante.

      effect.startOn,
      effect.finishOn

      Len temps en millisecondes où l'effet commence, et fini.

      effect.effects[]

      Dans le cas d'un Effect.Parallel, cette variable contient un tableau de tout les effets individuels dont il est composé.

      Voir CoreEffects

    • Effect.Opacity

      Modifie l'opacité d'un élément.

      Syntaxe :

      new Effect.Opacity(element|'idDunElement', [options]);

      Voir Effect.Opacity

    • Effect.Scale

      Modifie l'échelle d'un élément.

      Syntaxe :

      new Effect.Scale(element|'idDunElement', pourcentage, [options]);

      Options :

      scaleX:true|false

      Spécifie si l'élément doit être mis à l'échelle horizontalement.

      scaleY:true|false

      Spécifie si l'élément doit être mis à l'échelle verticalement.

      scaleContent:true|false

      Spécifie si le contenu doit aussi être mis à l'échelle.

      scaleFromCenter:true|false

      Si vrai, le centre de l'élement resteras toujours à la même position de l'écran.

      scaleFrom:decimal

      Spécifie le pourcentage de départ de l'animation.
      La valeur par défaut est de 100.0.

      Voir Effect.Scale

    • Effect.Move by

      Déplace l'élément en un point définie par les coordonnées x et y.

      Syntaxe :

      new Effect.MoveBy(element|'idDunElement', y, x, [options]);

      Voir Effect.MoveBy

    • Effect.Highlight

      Fais flasher un élément. Peut être interressant par exemple pour attirer l'attention d'un visiteur sur un élément qui a été mis à jour par Ajax.

      Syntaxe :

      new Effect.Highlight(element|'idDunElement', [options]);

      Options :

      startcolor:hexadecimal

      Spécifie la couleur de départ de l'animation.
      La valeur par défaut est '#ffff99' (jaune clair).

      endcolor:hexadecimal

      Spécifie la couleur de fin de l'animation.
      La valeur par défaut est '#ffffff' (blanc).

      restorecolor:hexadecimal

      Spécifie la couleur de l'élément après l'animation.
      La valeur par défaut est la couleur d'origine de l'élément.

      Voir Effect.Highlight

    • Effect.Parallel

      Permet de combiner plusieurs effets. Il prends en paramètre un tableau d'effets.

      Syntaxe :

      new Effect.Parallel([tableau d'effets], [options]);

      Exemple :

      new Effect.Parallel(
      		[ new Effect.MoveBy(element, 100, 0,
      			{ sync: true }), 
      		  new Effect.Opacity(element, 
      			{ sync: true, to: 0.0, from: 1.0 } ) ],
      		{ duration: 0.5, 
      		  afterFinish: function(effect)
      			{ Element.hide(effect.effects[0].this.parentNode); } 
      		}
      	  );

      Voir Effect.Parallel

  • Effets de combinaisons

    • Effect.Appear

      Fait apparaitre un élément.

      Syntaxe :

      Effect.Appear(element|'idDunElement', {options});

      Tester

      Voir Effect.Appear

    • Effect.Fade

      Fait disparaitre un élément.

      Syntaxe :

      Effect.Fade(element|'idDunElement', {options});

      Tester

      Voir Effect.Fade

    • Effect.Puff

      Fait disparaitre un élément avec une animation de fondu grossissant.

      Syntaxe :

      Effect.Puff(element|'idDunElement', {options});

      Tester

      Voir Effect.Puff

    • Effect.DropOut

      L'élément disparait en fondant et en tombant.

      Syntaxe :

      Effect.DropOut(element|'idDunElement', {options});

      Tester

      Voir Effect.DropOut

    • Effect.Shake

      Secoue l'élément.

      Syntaxe :

      Effect.Shake(element|'idDunElement', {options});

      Tester

      Voir Effect.Shake

    • Effect.SwitchOff

      Applique un effet d'extinction de téléviseur sur l'élément.

      Syntaxe :

      Effect.SwitchOff(element|'idDunElement', {options});

      Tester

      Voir Effect.SwitchOff

    • Effect.BlindDown, Effect.BlindUp

      Ouvre ou ferme un élément avec un effet de store.

      Syntaxe :

      Effect.BlindDown|BlindUp(element|'idDunElement', {options});

      Tester

      Options :

      scaleX:true|false

      Modifie l'échelle de largeur.

      scaleY:true|false

      Modifie l'échelle de hauteur.

      scaleContent:true|false

      Modifie l'échelle du contenu.

      scaleFromCenter:true|false

      Modifie l'échelle en partant du centre.

      scaleMode:'box'|'contents'

      Mode de mise à l'échelle.

      scaleFrom:100.0 (0.0-100.0)

      Taille de départ.

      scaleTo:0.0 (0.0-100.0)

      Taille d'arrivée.

      duration:1 (entier)

      Durée de l'animation en secondes.

      Voir Effect.BlindDown

    • Effect.SlideDown, Effect.SlideUp

      Ouvre ou ferme un élément en le faisant glisser.
      Il faut mettre un <div> entre le bloc sur lequel l'effet est appliqué et le contenu pour que ça fonctionne.

      Syntaxe :

      Effect.SlideDown|SlideUp(element|'idDunElement', {options});

      Tester

      Options :

      scaleX:true|false

      Modifie l'échelle de largeur.

      scaleY:true|false

      Modifie l'échelle de hauteur.

      scaleContent:true|false

      Modifie l'échelle du contenu.

      scaleFromCenter:true|false

      Modifie l'échelle en partant du centre.

      scaleMode:'box'|'contents'

      Mode de mise à l'échelle.

      scaleFrom:100.0 (0.0-100.0)

      Taille de départ.

      scaleTo:0.0 (0.0-100.0)

      Taille d'arrivée.

      duration:1 (entier)

      Durée de l'animation en secondes.

      Voir Effect.SlideDown

    • Effect.Pulsate

      Fais clignoter l'élément.

      Syntaxe :

      Effect.Pulsate(element|'idDunElement', {options});

      Tester

      Voir Effect.Pulsate

    • Effect.Squish

      Rétrécie l'élément dans un coin.

      Syntaxe :

      Effect.Squish(element|'idDunElement', {options});

      Tester

      Voir Effect.Squish

    • Effect.Fold

      Ferme l'élémént en le rétrécissant verticalement, puis horizontalement.

      Syntaxe :

      Effect.Fold(element|'idDunElement', {options});

      Tester

      Voir Effect.Fold

    • Effect.Grow

      Affiche l'élémént Avec un effet de grossissement.

      Syntaxe :

      Effect.Grow(element|'idDunElement', {options});

      Tester

      Voir Effect.Grow

    • Effect.Shrink

      Affiche l'élémént avec un effet de rétrecissement.

      Syntaxe :

      Effect.Shrink(element|'idDunElement', {options});

      Tester

      Voir Effect.Shrink

  • Interrupteurs

    • Effect.Toggle

      Affiche et ferme l'élémént avec un effet.

      Syntaxe :

      Effect.toggle(element, ['appear' | 'slide' | 'blind'], [options] );

      Voir Effect.Toggle

• Classes Script.aculo.us Controls

  • Drag'n'Drop

    • Draggable

      Crée un objet déplaçable.

      Syntaxe :

      new Draggable(element,{options});

      Options

      handle:element|'id_de_l_element'

      Spécifie une poignée de déplacement à l'élément.

      revert:true|false|fonction

      Spécifie si l'élément soit revenir à sa place après le déplacement.

      snap:false|[x,y]

      Spécifie une grille de x pixels sur y sur laquelle se colleras l'élément lors d'un déplacement.

      zindex:1000 (entier)

      Spécifie la position sur l'axe Z.

      constraint:'horizontal|vertical

      Restreint le déplacement de l'élément à l'axe X ou Y.

      ghosting:false|true

      Déplace un clone l'élément lors du déplacement afin de laisser l'original à sa place.

      starteffect:fonction(element)

      Spécifie la fonction à effectuer lors du début du déplacement.

      reverteffect:fonction(element)

      Spécifie la fonction à effectuer lors du retour de l'élément.

      endeffect:fonction(element)

      Spécifie la fonction à effectuer à la fin du déplacement.

      Callback :

      change:fonction(Draggable)

      Fonction appelée lors du déplacement du Draggable.

      Voir Draggable

    • Droppables.add

      Ajoutes un élément à la liste des Droppables. C'est à dire qu'il devient réactif aux Draggables.

      Syntaxe :

      Droppable.add('id_de_l_element',{options};

      Options

      accept:'nom_de_classe'|['classe1',…,'classen']

      Définit quels Draggables sont acceptés par ce Droppable. Seuls les éléments ayant la/les classes spécifiés feront réagir le Droppable.

      containment:element|'id_de_l_element'|[element1,…,elementn]

      N'accepte que les Droppables contenu dans l'/les element/s.

      hoverclass:'nom_de_classe'

      Ajouteras cette classe au Droppable si un Draggable acceptable passe au dessus de lui.

      overlap:'horizontal'|'vertical'

      Le Droppable ne réagira que si le Droppable le recouvre à plus de 50% dans la direction spécifiée.

      greedy:true|false

      Si un draggable se trouve en même temps au dessus d'autres droppables, les autres droppables ne réagiront pas.
      Le droppable greedy (radin) est donc prioritaire. (Merci à Clément Hallet pour son aide)

      Callback :

      onHover:fonction(Draggable, Droppable, Pourcentage_recouvrement)

      Fonction appelée lorsque un Draggable recouvre le Droppable.

      onDrop:fonction(Draggable, Droppable)

      Fonction appelée lorsqu'un Draggable est laché sur le Droppable.

      Voir Droppables.add

    • Droppables.remove

      Retire un élément de la liste des Droppables.

      Syntaxe :

      Droppable.remove(element,{options});

      Voir Droppables.remove

    • Sortable.create

      Crée une liste dont les éléments peuvent être déplacés.

      Syntaxe :

      Sortable.create('id_du_conteneur',{options};

      Options :

      tag:'li'|n'importe quel tag XHTML

      Définit quels éléments enfant du conteneur rendre "sortables" par leur tag.
      Pour une liste (ul), tout les items (li) seront transformés.

      only:'nom_de_classe'

      Restreint la sélection des éléments "sortables" par un nom de classe.

      overlap:'vertical'|horizontal

      Définie l'orientation de la liste.

      constraint:'vertical'|horizontal

      Restreint le déplacement des items sur l'axe X ou Y.

      containment:[element1,…,elementn]|['id_element_1','…','id_element_2']

      Autorise le déplacement d'items entre plusieurs conteneurs.

      handle:element|'id_de_l_element'

      Ajoutes l'option handle aux Draggables créés.

      hoverclass:'nom_de_la_classe'

      Ajoute l'option hoverclass aux Draggables créés.

      ghosting:true|false

      Déplace un clone l'élément lors du déplacement afin de laisser l'original à sa place.

      dropOnEmpty:true|false

      Déplace un clone l'élément lors du déplacement afin de laisser l'original à sa place.

      scroll:entier

      Permet de faire défiler le contenu en un point précis. Ne fonctionne que si le contenant possède la propriété overflow:scroll.
      Placez donc ce code avant afin que tout fonctionne normalement :

      Position.includeScrollOffsets = true

      scrollSensitivity:20 (entier)

      Sensitivité du défilement.

      scrollSpeed:15 (entier)

      Vitesse du défilement.

      tree:true|false/dt>

      Si vrai, donne les fonctionnalités de Sortable aux éléments listés dans treeTag.

      treeTag:'ul'('tag')

      Le type d'élément dans lequel sont contenus les éléments à lister.

      Callback :

      onChange:fonction(element)

      Appelée quand l'ordre des éléments est changé pendant un déplacement.

      onUpdate:fonction(conteneur)

      Appelée à la fin du déplacement d'un élément.

      Voir Sortable.create

    • Sortable.destroy

      Détruit un Sortable.

      Syntaxe :

      Sortable.destroy(element);

      Voir Sortable.destroy

    • Sortable.serialize

      Retourne une chaîne contenant les id des éléments dans l'ordre définit.

      Syntaxe :

      Sortable.serialize('id_de_l_element', {options});

      Options :

      tag:'tag_xhtml'

      Définit le tag des éléments à sérializer. Par défaut, il s'agit de l'option tag de Sortable.create (li).

      name:'chaîne'

      Définit le nom de la variable qui sera écrite dans la serialization au format HTTP GET/POST (

      cle[]=valeur1&cle[]=valeur2&cle[]=valeurn

      ).

      Voir Sortable.serialize

    • Slider

      Crée un curseur de défilement.

      Syntaxe :

      new Control.Slider('id_de_la_poignee_du_curseur','id_de_la_piste_de_defilement', {options});

      Options :

      axis:'horizontal'|'vertical'

      Définit l'axe du défilement.

      increment:1 (decimal)

      Valeur d'un pixel de déplacement.

      maximum:decimal

      Valeur maximale de la barre de défilement.

      minimum:decimal

      Valeur minimale de la barre de défilement.

      alignX:0 (decimal)

      Position du curseur sur l'axe X.

      alignY:0 (decimal)

      Position du curseur sur l'axe Y.

      sliderValue:0 (decimal)

      Valeur initiale du curseur.

      disabled:true|false

      Désactive le curseur.

      handleImage:'id_element'

      Définit une image pour représenter le curseur. Pratique pour changer l'apparence du curseur quand il est désactivé.

      handleDisabled:'id_element'

      Définit une image pour représenter le curseur quand il est désactivé.

      values:[tableau d'entier]

      Définit les valeurs que peut prendre le curseur.

      Méthodes :

      setValue(entier)

      Modifie la valeur (et donc la position) du curseur.

      setDisabled(true|false)

      Désactive le curseur.

      setEnabled(true|false)

      Active le curseur.

      Callback :

      onSlide:fonction(Slider)

      Fonction appelée lors d'un glissement du curseur.

      onChange:fonction(Slider)

      Fonction appelée lorsque le curseur a fini son déplacement.

      Voir Sortable.serialize

  • Autocomplétion

    • Ajax.Autocompleter

      Permet l'autocomplétion de champs via une requête Ajax.

      Syntaxe :

      new Ajax.Autocompleter(id_du_champ, id_de_l_element_a_remplir, url, {options});

      Options

      paramName:'chaîne'

      Nom de la variable envoyée dans la requête. Par défaut, il s'agit de l'attribut 'name' du champ.

      frequency:décimal

      Fréquence de raffraichissement.

      minChars:1 (entier)

      Nombre de caractères minimum avant de lancer la requête.

      indicator:element

      Affiche l'element dès que la requête est lancée. Il sera masqué une fois que sa réponse reçue.
      Ça permet d'afficher une animation de chargement.

      udpateElement:fonction(item)

      Fonction appelée lors d'un clic sur un élément de la liste. La fonction prend en paramètre l'élément cliqué (<li>)

      afterUpdateElement:'chaîne'

      Fonction appelée après un clic sur un élément de la liste, une fois que l'élément est ajouté dans le champ.

      Voir Ajax.Autocompleter

    • Autocompleter.Local

      Permet l'autocomplétion de champs à partir d'une liste de chaînes.

      Syntaxe :

      new Autocompleter.Local('id_du_champ', 'id_de_l_element_a_remplir', ['chaîne1', …,'chaînen'], {options});

      Options

      choices:entier

      Nombre de choix proposé dans la liste.

      partialSearch:true|false

      Si faux, la recherche sera effectuée par rapport au début de chaque chaîne du tableau d'autocomplétion, tandi que si vrai, elle sera effectuée au début de chaque mot de chaque chaîne.

      fullSearch:true|false

      Cherche dans tout le tableau de chaîne d'autocomplétion.

      partialChars:2 (entier)

      Nombre de caractères minimum avant de lancer une recherche dans le tableau d'autocomplétion.

      ignoreCase:true|false

      Ignore la casse lors de la recherche dans le tableau d'autocomplétion.

      Voir Autocompleter.Local

  • Edition sur place

    • Ajax.InPlaceEditor

      Permet d'éditer le contenu d'un élément en le transformant en zone éditable. Il renvoit ensuite les modifications via une requête Ajax.

      Syntaxe :

      new Ajax.InPlaceEditor(element, url, {options});

      Options :

      okButton:true|false

      Affiche ou non le bouton de submission en mode édition.

      okText:'ok' (chaîne)

      Valeur du bouton de submission.

      cancelLink:true|false

      Affiche ou non un lien d'annulation en mode édition.

      cancelText:'cencel' (chaîne)

      Texte accompagnant le lien d'annulation.

      savingText:'Saving...' (chaîne)

      Texte affiché pendant l'envoie de la requête.

      clickToEditText:'Click to edit text...' (chaîne)

      Texte affiché quand le souris passe au dessus du texte éditable.

      formId:'id_de_l_element_editableInPlaceForm' (chaîne)

      L'id donné au formulaire d'édition.

      externalControl:null (chaîne)

      Id d'un élément qui servira à entrer en mode édition. Il sera masqué en mode édition, puis affiché en mode visualisation.

      rows:1 (entier)

      Le nombre de lignes du champ. Si elle est supérieure à 1, un textarea sera utilisé à la place d'un input de type texte.

      onComplete:fonction(transport, element)

      Fonction appelée une fois que la requête à répondu avec succès.

      onFailure:fonction(transport)

      Fonction appelée si la requête a retourné une erreur.

      cols:entier

      Le nombre de colonnes du champ.

      size:entier

      Identique à cols mais pour les champs d'une seule ligne (input).

      highlightcolor:hexadecimal

      Couleur du flash.

      highlightendcolor:#ffffffhexadecimal

      Couleur de fin du flash.

      savingClassName:'inplaceeditor-saving' (chaîne)

      Ajouter une classe au texte savingText.

      formClassName:'inplaceeditor-form' (chaîne)

      Ajouter une classe au formulaire d'édition.

      loadTextUrl:url

      Charge le texte du formulaire à partir d'une url.

      loadingText:'Loading...' (chaîne)

      S'affiche pendant la récupération du texte via loadTextUrl.

      callback:fonction(formulaire)

      Fonction appelée juste avant d'envoyer le résultat du formulaire par la requête Ajax.

      ajaxOptions:{options}

      Spécifie des options communes à toute les requêtes Ajax utilisées dans ce formulaire.

      Voir Ajax.InPlaceEditor

    • Ajax.InPlaceCollectionEditor

      Lapin Compris

      Syntaxe :

      new Ajax.InPlaceCollectionEditor( element, url, { collection: [array], [moreOptions] } );

      Voir Ajax.InPlaceCollectionEditor

• Classes Script.aculo.us Utils

  • Constructeur DOM

    • Builder.node

      Permet de construire facilement et dynamiquement des éléments du DOM.
      L'objet ainsi créé peut ensuite être facilement intégré dans la page grâce à la fonction appendChild.

      Syntaxe :

      Builder.node('nom_de_l_element');
      	Builder.node('nom_de_l_element', {attributs});
      	Builder.node('nom_de_l_element', [nœuds_enfants]);
      	Builder.node('nom_de_l_element', {attributs}, [nœuds_enfants]);
      	

      nom_de_l_element

      Nom de la balise de l'élément à créer (h1, p, div, etc.)

      attributs

      Attributs de l'élément ({id:'id',class:'class',style:'color:red'})

      nœuds_enfants

      Tableau d'éléments qui seront insérés en tant qu'enfant de l'élément. Peuvent être des objets ou du texte.

      Exemple :

      var titre = Buidler.node('h1', 'Titre de l'exemple');
      	var para = Builder.node('p', {class:'para'}, 'Contenu de l'exemple');
      	var div = Builder.node('div', {style:'background:green'}, [titre, para]);
      	$('page').appendChild(div);

      Voir Ajax.InPlaceCollectionEditor

• Classes Script.aculo.us Javascript Testing

  • Aidez moi !!!

• Intégration avec des frameworks de développement

  • Aidez moi !!!

Tout ouvrir Tout fermer

Cette documentation est distribuée sous licence Creative Commons By-NC. Vous pouvez donc la redistribuer et la modifier tant que vous citez les sources d'origine et que vous n'en faîtes pas une utilisation commerciale.
Hadrien Lanneau
Alt-I, des informations alternatives (mon podcast/blog)