jQuery, librairie javascript

jQuery est une librairie javascript et un langage objet. Elle permet d'utiliser les navigateurs internet comme des logiciels offline et propose des effets à partir des événements créés par l'utilisateur ou à partir des caractéristiques

Mais l'essentiel, les actions des scripts sont séparées de la structure html comme les feuilles de styles css pour la mise en forme.

Quels navigateurs compatibles ?

Les navigateurs internet supportés sont Firefox 1.5 et +, Internet Explorer 6 et +, Safari 2 et +, Opera 9 et + ainsi que Konqueror.

Bien commencer, s'amuser dans le bac à sable

Un tutoriel est toujours indispensable pour bien débuter, d'autant plus en français pour les allergiques à l'anglais comme moi. Danse avec jQuery est découpée en 4 parties pour approcher jQuery et connaître toutes ses possibilités.
Il est indispensable de télécharger le kit de démarrage puis de s'amuser avec les exemples du tutoriel. Et se laisser guider par ces petites envies… Un peu de massacre, un peu de sublime, ce n'est qu'un bac à sable !

Après, il devient nécessaire de connaître les différentes fonctions que comprend jQuery. Un petit tout sur le site et sa documentation s'impose.

Liens utiles pour jQuery

  • Le site jQuery et le lien vers la documentation (tutoriel, référence des fonctions, …)
  • Le site de support en français déjà présenté
  • Des exemples d’usage de jQuery avec explication, mise en œuvre et démonstration
  • Un site bibliothèque qui propose des effets supplémentaires
  • Des scripts sympathiques qui peuvent être utilisés pour Dotclear : Thickbox, un effet Lightbox, Tabs, effets sur les onglets comme chez Pep, Splitter, modifier la largeur des colonnes, Round Corner, faire des coins ronds et plein d’autres sans toucher le code HTML.
  • Une liste non exhaustive de scripts supplémentaires sur jQuery.

Un peu de pratique, afficher/masquer des éléments de la barre des menus

Pour ce premier exemple, la structure d’affichage standard des différentes pages de Dotclear 2 n’évoluera pas, seule _head.html sera modifiée. Deux choix sont possibles soit le fichier _head.html du thème default est modifié et alors tous les thèmes sans ce fichier le sont également, soit créer ou modifier _head.html pour un thème particulier.

Les fichiers complets et à télécharger sont en fin du billet. Le code est compatible avec la version Dotclear 2 beta 5.2 et la version 1.1 de jQuery, toujours moins d'effort pour la suite.

Activer le support de jQuery

Le thème par défaut de Dotclear 2 contient la librairie jQuery. Il suffit alors de la charger. Il faut ajouter le code suivant au fichier _head.html.

<script type="text/javascript" src="tpl:BlogThemeURL/../default/js/jquery.js"></script>

Afficher/masquer des éléments

Plus particulièrement, ce script s’applique aux thèmes à deux colonnes. Le but est de masquer/afficher les listes pour les mots clefs ainsi que pour les liens. Généralement, ce sont ces éléments qui peuvent être ou devenir très longs.

Pour expliquer le fonctionnement, le code et le commentaire portent uniquement sur les mots clefs. Après avoir déclaré un script javascript et inséré la récupération du script, il faut afficher le signe de masquage des listes, ici un triangle.

$(".tags h2").addClass("hideul");

$('.tags').find('ul').hide().end();

Le code permet une recherche dans les éléments de la classe .tags ayant une balise ul et masque cette balise.

$('.tags').find('h2').click(function() {
var answer = $(this).next();
        if (answer.is(':visible')) {
            answer.slideUp("fast");
			$(this).removeClass("showul");
			$(this).addClass("hideul");
		} else {
	        answer.slideDown("slow");
			$(this).removeClass("hideul");
			$(this).addClass("showul");
        }
    });

Le code permet une recherche dans les éléments de la classe .tags ayant une balise h2, niveau de titre. Lors d’un clic sur le niveau de titre h2, il est vérifié si la liste est masquée ou affichée puis est appliqué l’effet slide – rapide au masquage et lent à l’affichage – ainsi que la modification du signe d’affichage/masquage par suppression/ajout de classes à la balise h2, représentée par ''this'.

Dans le code de Dotclear, les listes ul de la barre de menu, en dehors des liens avec des catégories précédés par la balise h3, sont précédées de la balise h2. C'est la fonction next() qui sélectionne la balise ul.

Pour cette raison, l'affichage/masquage des liens demande deux scripts différents : un pour le couple h2/ul et un autre pour h3/ul. Le code est le même seule les balises changent.

Ajouter une feuille de style

Il est nécessaire de définir les classes .hideul et .showul mais également laisser un espace entre les niveaux de titres et le signe d'affichage/masquage.

.links h2, .tags h2 { padding-left: 20px; } pour les liens sans catégorie
.links h3, .tags h2 { padding-left: 20px; } pour les liens avec catégorie
.hideul { background: transparent url(img/hide.gif) no-repeat top left; }
.showul { background: transparent url(img/show.gif) no-repeat top left; }

Le code pour déclarer la feuille de style s'insére après la déclaration de la feuille de style style.css. Les régles de customjquery.css doivent primer.

<style type="text/css" media="screen">
@import url(tpl:BlogThemeURL/customjquery.css);
/style>

Voir la démonstration

Choisissez le thème soberblack ou cliquez là.

Télécharger les éléments

Le fichier contient deux dossiers : liens avec catégorie et liens sans catégorie. Chaque dossier contient un fichier _head.html, customjsquery.css et un dossier avec 2 fichiers gif pour l'affichage/masquage.

Télécharger l'archive.