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!


Gilles 
mercredi, 1 novembre 2006, 04:13 PM
Excellent blog! Merci!
nova 
mardi, 19 décembre 2006, 12:42 PM
Tout seimplement génial.
Exactement tout ce qui peut plair pour une programmation 2.0
Merci a toi :)
bee_human 
mercredi, 27 décembre 2006, 05:41 PM
Dans l'exemple, il faudrait aussi une colonne "Je ne connais pas". Pour le Parisien que je suis, y'en a que je connais pas dans ta liste de chanteuses/chanteurs.

Sinon, bonnes fêtes à toi et tes proches !
Real 
mercredi, 27 décembre 2006, 09:36 PM
>Nova: Merci pour ton commentaire!

>bee_human: Bien content d'avoir de tes nouvelles! Je te souhaite de belles fêtes également à toi et tes proches.

D'autres textes s'enviendront bientôt... soit le temps me manque soit je n'étais pas satisfait des derniers que j'ai écrit!

@+
Falkra 
samedi, 13 janvier 2007, 08:14 PM
Beau travail ce tuto !
(trouvé via tutmarks)
eMeRiKa 
mardi, 23 janvier 2007, 12:34 PM
J'ai testé l'exemple du drag and drop des 2 listes, j'ai eu du mal à le faire marcher, car il faut mettre le js "Sortable.create" des listes après le xHTML. Ce qui est très déroutant vu qu'aujourd'hui on conseille de séparer le js et le xhtml de la même manière que le xHTML/CSS. Existe -t-il un moyen de les séparer tout en gardant l'effet de drag and drop?
Plop 
vendredi, 25 mai 2007, 07:26 AM
flex ca fait pareil, plus et en mieu :)
Toutoul 
vendredi, 1 juin 2007, 02:24 PM
Et bien, j'aimerais vous remercier... C'est l'un des seul site internet qui nous explique clairement le script de scriptaculous... et surtout en français...

Mille merci...

Commentaires 

Ajouter Commentaire (désactivé)

Remplissez ce formulaire pour ajouter un commentaire.









Insertion Spéciale :








Ajout de commentaire désactivé.