Framework JQuery pour écrire du Javascript non-intrusif

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 !’) });

*Mise en place de plugins trouvés sur jquery.info »*