css4design

Pour ajouter un semblant d’interactivité aux pages web, il fallait auparavant chercher longtemps pour dénicher le bon bout de code Javascript cross-browsers qui va bien. Aujourd’hui, c’est le choix d’une librairie¹ Javascript adaptée à nos besoins qui prend du temps. Les prétendants sont nombreux et la qualité est au rendez-vous : Prototype accompagné de script.aculo.us, Mootools et le petit Moofx, Dojo, Yahoo! UI Library, jQuery avec Interface, etc. Whoa! quel chemin parcouru depuis la fin du 2^ème millénaire…

En suivant les conseils de blogueurs influents, j’ai installé jQuery. Cette librairie récente bénéficie d’une popularité grandissante et d’une documentation tout simplement exceptionnelle qui s’enrichit d’apports francophones, avec notamment une liste de diffusion spécialisée et des tutoriels avec des morceaux d’exemples dedans.

Le fait que Dotclear2 intègre jQuery, est un gage de qualité. Par ailleurs, lorsque la version 2 de Dotclear sera mise en production, je prédis qu’on trouvera de plus en plus de ressources sur jQuery en français, comme pour l’introduction de la biblithèque dans SPIP qui a donnée naissance à jquery.info

Les bases de chez base

Introduction très rapide à jQuery et aux concepts nécessaires pour aller plus loin. Très librement inspiré de How jQuery Works de John Resig, créateur de la library.

1. Prêt, pas prêt ?

   Pour éviter de lancer du code alors que le document n’est pas prêt, la déclaration suivante est votre amie :

   $(document).ready(function(){
       // Placez votre code ici (enlevez quand même les deux slashes !)
     });
   

2. Déclencher quelque chose sur un clic

   La première chose que je vous propose est d’afficher un alert() chaque fois qu’un lien est cliqué :

   $("a").click(function(){
       alert("Merci de votre visite !");
     });
   

3. Ajouter une classe CSS

   Ajouter ou enlever une classe à un élément est une tâche très courante : $(”a”).addClass(”test”);. Utilisez removeClass() pour enlever une classe.

4. Effets spéciaux

   jQuery fournit quelques effets pratiques pour réveiller votre site :

   $("a").click(function() {
       $(this).hide("slow");
       return false;
     });
   

   Maintenant, lorsque vous cliquez sur un lien, il devrait disparaitre lentement.

5. Chaînabilité (Toute la magie de jQuery)

   jQuery utilise un concept intéressant pour un code simple et court. Chaque méthode dans jQuery retourne l’objet lui-même, vous autorisant à l’enchaîner à son tour à une autre méthode : $(”a”).addClass(”test”).show().html(”foo”);.

Mais le plus important, c’est le côté non-intrusif du code : toutes les fonctions présentées dans ce tutoriel sur jQuery sont placés dans un fichier externe.

C’est un peu court, oui je sais

Quelques liens si vous êtes pressés d’aller voir ce que l’animal a dans le ventre :

• Page principale de la documentation jQuery
• Palanquée de tutoriels sur jQuery
• Documentation visuelle sur jQuery
• 15 jours avec jQuery : tutoriels, astuces, actualités
• Tutoriels en français

Déjà revenus ? Pas encore parti ? Entrons dans le vif du sujet.

partie I Utiliser jQuery sous dotclear 1.2.5 ?

Depuis que j’ai commencé à améliorer l’ergonomie de mon blog, je cherche à régler une bonne fois pour toute le sort de cette blogroll d’un km de haut qui ne demande qu’à s’agrandir. J’ai déjà toggléClassé le calendrier et les archives, et pour cette blogroll je suis allé chercher mon pote jQuery.

Une blogroll avec jQuery

Pour commencer, je vous propose de parcourir rapidement la structure HTML de cette liste sortie du four :

<div id="links">
   <h2>blogroll</h2>
   <h3>Titre 1</h3>
   <ul>
       <li><a href="#">lien</a></li>
       <li><a href="#">lien</a></li>
       <li><a href="#">lien</a></li>
   </ul>
   <h3>Titre 2</h3>
   <ul>
        <li><a href="#">lien</a></li>
        <li><a href="#">lien</a></li>
        <li><a href="#">lien</a></li>
   </ul>
 </div>

Dans un premier temps, je veux masquer tous les éléments ul et garder les balises h2 et h3. L’objectif est que la liste ul s’affiche et disparaisse d’un clic sur la balise h3 qui la précède sans modifier le code HTML.

Dans les CMS, de nombreuses balises HTML sont générées par des fonctions situées souvent en amont du dossier templates. Heureusement, la plupart du temps, les appels de fonctions sont personnalisables comme le calendrier dans Dotclear 1.2.5 :

<?php dcCalendar('<table id="calendrier" summary="Calendrier">%s</table>'); ?>

Le tableau possède déjà un indentifiant et il est très facile d’ajouter la classe just-hide-it { display: none; } pour le masquer au chargement de la page. Mais tous les appels de fonction n’offrent pas cette commodité (ou alors je n’ai pas bien cherché les options disponibles). Je pense notamment à la blogroll (<?php dcBlogroll::linkList(); ?>) qui ne dispose pas de paramètres.

Pour masquer les ul de cette liste avec CSS, il suffit d’écrire #links ul {display: none } et le tour est joué. Là où CSS ne peut rien pour moi, c’est pour ajouter l’événement onclick sur la balise h3. Pour donner l’apparence d’un lien, il existe la pseudo-classe :hover. Or, Internet Explorer n’applique :hover que sur les liens a…

Définir un événement onclick

Résumons. L’idéal serait d’avoir une fonction pour atteindre les balises ul et h3, masquer la liste et définir un événement onclick sur le titre. C’est dans les cordes de l’ami jQuery. Avantage supplémentaire, le code ne nécessite pas d’explications de folie, tant la syntaxe est abordable. Mais jugez plutôt :

$(document).ready(function() {
     $('#links ul').hide();
     $('#links h3').css('cursor','pointer').click(function() {
         $(this).next('ul').slideToggle('slow')
     });
});

Cette méthode slideToggle() fait partie du package de base. Pour d’autres effets à la script.aculo.us, allez voir du côté d’Interface.

A côté de next(), il existe une palanquée d’autres méthodes pour manipuler le DOM. A ce sujet je vous conseille la lecture de jquery.info pour avoir une idée des sélecteurs et des événements.

Thanh de son côté nous offre une aide à la saisie d’information dans un formulaire sur un plateau avec une utilisation judicieuse de la méthode parent() en action.

Ca ne coûte pas plus cher de tout jQueryser !

Pour info, voici les fonctions que j’ai utilisées pour apporter un peu d’interactivité à ma sidebar. Je pense que j’aurais pu mettre l’ensemble dans une seule fonction. Mais pour un début, j’ai jugé plus prudent de séparer chaque partie. Si vous avez des idées pour optimiser l’ensemble, partagez, il en restera toujours quelque chose

$(document).ready(function() {
 	$('#links h3').hover(function() {
 		$(this).css('color','#cf3500');
 		},function() {
 		$(this).css('color','#ff7200');
 	});
 	$('#links>h3:first').css('font-size','1.5em');
 	$('#links>h3:first a').css('font-size','1.5em');
 });

Cette fonction utilise la méthode hover() pour simuler la pseudo-classe CSS :hover sur les éléments passés en argument à la fonction, en l’occurence $(’#links h3′). Ensuite, j’ai voulu que le premier titre h3 contenu dans #links s’affiche dans un corps plus important grâce au sélecteur :first (:last existe aussi). On retrouve la méthode css() qui applique directement les valeurs spécifiées. Il existe également une fonction addclass() qui permet d’attribuer… une classe.

Le calendrier et les archives

Je veux aussi que le calendrier et les archives subissent le même sort :

$(document).ready(function() {
 	$('#links ul, #calendar table, #archives ul').hide();
 	$('#links h3, #calendar h2, #archives h2, #categories h2').css('cursor','pointer').click(function() {
 	    $(this).next().slideToggle('slow');
 	});
});

Cela implique que les titres h2 sont également de la partie ! Voyez comme il est facile de tout grouper. Ensuite, à la place du next(’ul’) que j’ai évoqué plus haut, j’ai utilise next() tout seul : en l’absence de précision, l’effet slideToggle() s’applique ainsi directement à l’élément suivant.

Ajouter un effet hover aux titres principaux

Reste à styler les balises h2 :

$(document).ready(function() {
 	$('#calendar h2, #archives h2, #categories h2').hover(function() {
 		$(this).css('border-bottom','1px dotted #065f00').css('color','#065f00');
        },function() {
 		$(this).css('color','#9E0050');
 	});
});

Ajouter les gestionnaires dans le code HTML…

Non, trop pas ! Avec un framework comme jQuery il est inutile de polluer le code HTML, puisque $(document).ready(function() mettra sa puissance de feu à votre service dès le chargement du DOM, sans attendre que le document soit totalement chargé. “Au revoir” donc, les body onload=”javascript:alert(’Bonjour !’)”. Dites désormais “bonjour” à $(document).ready(function() { alert(’Au revoir !’) });

partie II Mise en place de plugins trouvés sur jquery.info

En me balladant sur le site, je n’ai pas résisté à l’envie de tester les deux scripts suivants :

resizehandle : une poignée pour agrandir un textarea

Après les commentaires concernant la hauteur du textarea pour améliorer la saisie des textes longs, j’ai mis jQuery à contribution avec resizehandle.

Il suffit de suivre les indications et d’afficher le code source de l’exemple, mais comme vous êtes là, je vous donne le code Javascript à placer idéalement dans un fichier externe. Le bonheur est dans le pre : commençons par installer la bibliothèque :

<script type="text/javascript" src="/blog/ecrire/js/jquery-latest.pack.js"></script>

Vous avez remarqué le terme pack ? Et oui, jQuery existe en deux versions : une pour comprendre comment ça marche (env. 55 ko), et une version compressée (environ 20 ko), à placer sur votre serveur de production… C’est donc vraiment léger.

Ensuite, voici le code à placer également dans un autre fichier dans lequel vous mettrez idéalement toutes les fonctions jQuery que vous trouverez :

/*  * resizehandle.js (c) Fil 2007, plugin pour jQuery ecrit  * a partir du fichier resize.js du projet DotClear  * (c) 2005 Nicolas Martin & Olivier Meunier and contributors  */
jQuery.fn.resizehandle = function() {
   return this.each(function() {
     var me = jQuery(this);
     me.after(
       jQuery('<div class="resizehandle"></div>')
       .bind('mousedown', function(e) {
         var h = me.height();
         var y = e.clientY;
         var moveHandler = function(e) {
           me.height(Math.max(20, e.clientY + h - y));
         };
         var upHandler = function(e) {
           jQuery('html')
           .unbind('mousemove',moveHandler)
           .unbind('mouseup',upHandler);
         };
         jQuery('html')
         .bind('mousemove', moveHandler)
         .bind('mouseup', upHandler);
       })
     );
   });
 }

$(document).ready(function() {
   $("#c_content")
   .resizehandle();
 });

Reste à ajouter une déclaration CSS à placer dans votre feuille de style :

.resizehandle {
     background: transparent url("http://www.jquery.info/images/resizer.png") no-repeat scroll 45%;
     cursor: s-resize;
     font-size: 0.1em;
     height: 16px;
     width: 100%;
}

Comme vous le voyez, j’ai gardé l’icône resizer.png d’origine, mais rien ne vous empêche de la changer. Ce que je vais faire également sous peu.

Equilibrer les colonnes

Pendant que j’y étais, j’en ai profité pour mettre en place les quelques lignes nécessaires pour équilibrer une ou plusieurs colonnes filles en fonction de la hauteur du bloc qui les contient, et auquel on a appliqué la classe CSS qui va bien.

En l’occurence, je voulais que la hauteur de la sidebar s’allonge en fonction de la colonne contenant les billets afin que mon zebra background web 2.0 suive le mouvement

Pour cela, il faut qu’une balise div englobe les éléments que l’on désire équilibrer. J’ai donc ajouté une <div class=”equilibre”> qui sert de container pour div id=”content”> et div id=”sidebar”>.

$(document).ready(function() {
  $(".equilibre").each(function() {
    var h=0;
    $(">*", this)
      .each(function() { h=Math.max(h,this.offsetHeight);
 })
      .css({'height': h+'px'});
  });
});

Rien qu’avec ces quelques lignes, vous rentabilisez vos 20 ko et pouvez débarrasser la table Enfin… il y a des comportements indésirables qui ne sautent pas aux yeux sur le moment. Par exemple, sur Firefox, l’équilibrage des colonnes s’effectue correctement lors du premier chargement de la page, mais la hauteur ne s’adapte pas ensuite lorsque la liste des billets est réduite…

Ce comportement vient peut-être de l’image de fond de la sidebar et au fait que le DOM est considéré comme chargé même si toutes les images ne le sont pas. En même temps comme c’est tout l’intérêt de spécifier $(document).ready(function()… J’ai essayé le plugin vjustify qui me semblait une bonne alternative, mais le problème reste entier. Je suis revenu au bon vieux background en largeur qui se répète… Et ça le fait bien Si vous avez une idée sur la question, n’hésitez pas !

partie III Sur la page plugin de jquery.com

jQuery Corner : des coins arrondis, mais pas seulement

En sortant de chez jquery.info, je me suis souvenu que l’homme qui valait 3 milliards m’a montré un jour des coins arrondis réalisés grâce à jQuery. Alors je suis allé voir du côté de chez Dave Methvin.

Ce dernier déclare que La mode des coins arrondis fait rage ces derniers temps dans le monde du webdesign : les angles droits font trop pas web 2.0. Parmi les solutions pour s’affranchir des blocs à angles droits, la plupart des webdesigner utilise un surcroit de balises HTML contraire à la séparation entre la forme et le contenu. Aujourd’hui, nous ne voulons plus de ces pratiques web 1.0. D’autres encore, utilisent des images, ou des gros blocs de Javascript, ce qui semble un prix assez élevé pour la seule beauté de la chose.

L’auteur de cette sage conclusion s’est donc attelé à la tâche et a créé le plugin jQuery Corner qui permet de styler vos coins de plus de 17 manières différentes. Heu.. dans la pratique… Enfin, jugez vous-même car une URL vaut mieux qu’un long discours…

Pour tester le plugin, je me suis amusé à habiller ma div#pagination qui se trouve en bas de la page. Pour ce faire, j’ai ajouté le script jQuery Corner dans mon template. Parmi les options disponibles, j’ai opté pour ces quelques lignes :

$(document).ready(function() {
   $("#pagination").corner("dog tr 10px").corner("round tl br bl 10px");
});

Interface à face

Outre jQuery Corner, de nombreux plugins sous forme de scripts à ajouter dans votre head vont vite devenir indispensables. Je pense notamment à Interface qui ajoute une bibliothèque d’effets et de composants à jQuery : glissé-déposé de bloc, tri, effets visuels, slideshow, imagebox, etc.

Le tout en un fichier compressé qui comprend l’ensemble des effets, ou bien en intégrant les effets à la demande ; la majorité nécessitant 2 ou 3 scripts pour un poids ne dépassant pas un quinzaine de ko. L’auteur a eu par ailleurs l’excellente idée de fournir une liste des dépendances entre les fichiers.

Du coup, j’en ai profité pour remplacer le mini-script toggleClass par les effets slides d’Interface

Quoique (couac ?) : ça marchait très bien sous Firefox, mais sous IE6 à chaque clic ma sidebar disparaissait une fraction de seconde, peut-être à cause de la lenteur légendaire de mon PC. Mais bon, dans le doute j’ai remplacé les effets slides d’Interface par ceux inclus dans le package jQuery, ce qui a réglé le problème d’affichage.

Thickbox

Cette Thickbox affiche des contenus variés (fichier HTML via Ajah, image simple, gallerie d’images, contenu en ligne, iframe) en les mettant au premier-plan tout en ajoutant une légère opacité sur le fond comme la lightbox Splash Box de Xuxu.

La feuille de style qui accompagne le script repose sur la remise à zéro du padding et du margin, ce qui peut entrainer des effets indésirables si votre site est conçu autrement. Pour ma part, j’ai tout simplement supprimé la déclaration * { margin: 0; padding: 0; }, sans problème apparent pour le moment. J’imagine que selon les navigateurs, le contenu ne sera peut-être plus exactement au centre de la fenêtre, mais il ne s’agit que de quelques pixels de décalage…

Thickbox ou Splash ?

Splash est spécialisé dans l’affichage des images et le fait bien : une fonction diaporama permet même de visionner un ensemble de photo en un seul clic sans effort !

Outre la fonction diaporama que je trouve très élégante, j’aprécie que Splash ne redimensionne pas les images qui dépassent de la fenêtre. Mais j’apprécie également que la Thickbox le fasse… tout dépend des besoins en somme. Je garde les deux trois, en comptant l’imagebox d’Interface qui reste très intéressante. A moins que vous ne préféreriez une bonne vieille fenêtre popup ?

Pour conclure

Désormais, il est tout à fait envisageable de séparer les trois ingrédients pour monter un site web : le contenu avec XHTML, la présentation avec CSS et l’interactivité avec Javascript. Le tout avec une utilisation de bande passante réduite et une syntaxe très abordable pour des designer web ou intégrateur HTML à qui on délègue de plus en plus la partie dynamique côté client. Par ailleurs, la progressivité de la courbe d’apprentissage plaide en sa faveur !

J’évoquerais les possibilités Ajaxiennes de jQuery lorsque je les aurais un peu testées
Stay tuned and mind the gap!

(1) La guerre fait rage entre les tenants du français bibliothèque contre l’anglicisme librairie. Pour moi, l’une et l’autre contiennent des livres… D’autres encore utilisent l’anglais framework ou le québecois cadriciel. Back to top ?