Ajaxifiens - behavior.js par l'exemple
Publi� le 22 février 2006
HTML - 822 octets, http://sporkmonger.com/files/zomgcute.html
Shady Hotness

Cet article est la traduction d'un article en anglais illustrant une façon simple d'ajouter des ombres aux images par l'intermédiaire des feuilles de style. Behavior.js est une minuscule bibliothèque DHTML destinée à simplifier les développements de type AJAX.

"A List Apart" possède un article fabuleux écrit il y a quelques temps intitulé : "Ombres en peau d'onion" [1]. C'est un moyen génial de placer des ombres dans des divs pour les images ou d'autres éléments. Malheureusement il faut ajouter "du bruit" : des tags HTML (div) supplémentaires et cela m'a intrigué.

Alors, j'ai résolu le problème. J'ai utilisé behavior.js pour localiser les éléments dont la classe est “dropshadow” et ajouté des divs avec quelque javascript. Le reste est géré par le CSS fourni dans l'article de ALA.

Le JavaScript :

Mise à jour : Maintenant il fonctionne sous IE !


Behaviour
.register({
  
'.dropshadow' : function(element) {
    var
wrap1 = document.createElement("div");
    
wrap1.className = "wrap1";
    var
wrap2 = document.createElement("div");
    
wrap2.className = "wrap2";
    var
wrap3 = document.createElement("div");
    
wrap3.className = "wrap3";

    var
outerNode = element.parentNode;
    
outerNode.insertBefore(wrap1, element);
    
wrap1.appendChild(wrap2);
    
wrap2.appendChild(wrap3);
    
outerNode.removeChild(element);
    
wrap3.appendChild(element);
  }
});

Le CSS :


.wrap1, .wrap2, .wrap3 {
  
display:inline-table;
  
/* \*/display:block;/**/
}
.
wrap1 {
  
float: left;
  
background:url(/files/shadow.gif) right bottom no-repeat;
}
.
wrap2 {
  
background:url(/files/corner_bl.gif) -4px 100% no-repeat;
}
.
wrap3 {
  
padding:0 16px 16px 0;
  
background:url(/files/corner_tr.gif) 100% -4px no-repeat;
}
.
wrap3 img {
  
display:block;
  
border:1px solid #ccc;
  
border-color:#efefef #ccc #ccc #efefef;
}

Voici la demo.

L'exemple est assez simple pour le comprendre. Behavior.js permet d'associer un comportement (code javascript) à une classe CSS et ceci est valable pour tout le document.

Avant :


      
<h3>Old Way:</h3>
      <
div class="wrap1">
        <
div class="wrap2">
          <
div class="wrap3">
            <
img src="zomgcute.jpg" />
          </
div>

        </
div>
      </
div>

Après :


      
<h3>New Way:</h3>
      <
img class="dropshadow" src="zomgcute.jpg" />


[1] Je suis pas sûr de ma traduction ...