La magie de Scriptaculous - Javascript dynamique  
mercredi, 23 août 2006, 07:08 PM - Javascript
Si l'un de vos clients vous demande d'ajouter des fonctionnalités basées sur du Javascript, des fonctionnalités qui affecteront en bout de ligne l'expérience de l'utilisateur (donc l'ergonomie du site de votre client), pensez à Scriptaculous. Il permet de faire aisément ce qu'un programmeur pressé par le temps n'ose imaginer...


Drag & Drop

Supposons que notre client désire effectuer un sondage auprès de ses utilisateurs. Le sondage consiste à savoir quels sont les musiciens que les utilisateurs aiment et ceux qu'ils n'aiment pas, et par la même occasion il faut inviter les utilisateurs à placer en ordre de préférence ceux qu'ils aiment. Il s'attend à obtenir le résultat de votre travail rapidement... Comment feriez-vous cela?

Je crois que sans Scriptaculous, il est peu probable que vous auriez osé développer l'exemple ci-dessous:




À la base, pour arriver à mettre en place cette fonctionnalité, nous devons d'abord insérer les librairies Prototype et Scriptaculous (en fait, Scriptaculous est un add-on de Prototype):

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


Ensuite ajoutons un peu de style, pour que nous puissions bien distinguer les boîtes et les items qui peuvent être déplacés...

<style>
    body {
      background-color: #EEEEEE;
      font-family: Arial, Helvetica;
    }
    /* Boîtes */
    .section {
      background-color: #FFFFFF;
      font-size: 12px;
      margin-left: 15px;
      height:100px; 
      width:90px; 
      float:left;
    }

    /* Titre */
    h3 {
      font-size: 12px;
      font-weight: bold;
    }

    /* 
       Pour visualiser les items qui peuvent être
       déplacés avec la souris
    */
    .lineitem {
      cursor: move;
    }
</style>


Créons nos boîtes, dont celle qui contiendra la liste des items de départ:

<div id="liste_1" class="section">
  <h3>Liste 1:</h3>
  <div id="item_1" class="lineitem">Item 1</div>
  <div id="item_2" class="lineitem">Item 2</div>
  <div id="item_3" class="lineitem">Item 3</div>
</div>

<div id="liste_2" class="section">
  <h3>Liste 2:</h3>
</div>


Enfin, ajoutons la touche Scriptaculous - pour chaque boîte, nous devons ajouter Sortable.create qui désignera la boîte affectée et les attributs qui la concernent:

<script type="text/javascript">
// <![CDATA[

  // Création de la première boîte triable
  Sortable.create(
    // nom du id de la liste 1
    "liste_1",
    {
      // type de balise affecté - pourrait être aussi par ex. "ul"
      tag:"div",

      // permet de glisser un item d'une boîte à l'autre
      dropOnEmpty: true,

      // boîtes dans lesquelles les items peuvent être glissés
      containment: ["liste_1","liste_2"],

      // Les items transférables ont comme nom de classe "lineitem"
      only:"lineitem"
    }
  );

  // Création de la seconde "boîte"
  Sortable.create(
    "liste_2",
    {
      tag:"div",
      dropOnEmpty: true,
      containment: ["liste_1","liste_2"], 
      only:"lineitem"
     }
   );

// ]]>
</script>


Le résultat du script ci-dessus:



Si la fonctionnalité drag & drop vous intéresse, jetez un coup d'oeil à cet exemple.


Effets visuels

Scriptaculous permet d'effectuer des effets visuels très simplement. Ci-dessous, quelques exemples (pour voir tous les exemples, visitez la page de démonstration des effets visuels de Scriptaculous) :



Pour y arriver:

<a href="#" onclick="new Effect.Highlight('tag', 1);">Highlight</a>
<a href="#" onclick="new Effect.BlindDown('tag', 1);">BlindDown</a>
<a href="#" onclick="new Effect.SwitchOff('tag', 1);
   window.setTimeout('Effect.Appear(\'tag\', 
   {duration:.3})',2500);">SwitchOff</a>
<a href="#" onclick="new Effect.Pulsate('tag', 1);">Pulsate</a>
<a href="#" onclick="new Effect.Shake('tag', 1);">Shake</a>

<div id="tag">ceci est un test...</div>


Avec un peu d'imagination, Scriptaculous fera de vous un magicien du Javascript. Osez!



[ 8 commentaires ] ( ( 24215 vues ) )   |  [ 1 trackbacks ]   |  permalink

Suivant