CSS sans douleur avec jQuery

mardi 13 mai 2014
par  Alain BUSSER

L’utilisation de jQuery permet de facilement donner un aspect professionnel à un fichier html, en manipulant les propriétés CSS de celui-ci par programme. C’est ainsi qu’ekoarun représente les degrés des monômes par des classes CSS. L’article ci-dessous est le compte-rendu d’un exposé fait le 22 avril pour la journée académique de l’ISN, mais dans des conditions telles que la démonstration n’était pas très convaincante (vidéoprojecteur non reconnu par l’ordinateur, puis couleur rouge manquante ce qui empêche de voir certaines propriétés CSS, et manque de reconnaissance des animations jQuery par le navigateur internet utilisé)...

Note : En cliquant sur une copie d’écran d’un fichier html, on ouvre celui-ci (le fichier html, pas l’écran) dans le navigateur. Ce qui peut donner des effets inattendus sur certains navigateurs...

Une page web est en général faite de trois sortes d’objets :

  1. le contenu (rédigé en html) ;
  2. l’aspect (le rôle de CSS) ;
  3. le comportement (JavaScript).

En général, il est conseillé de séparer autant que possible ces trois catégories. Par exemple, en plaçant tout le CSS dans un fichier à part, avec l’extension .css. Idem pour le JavaScript, souvent éparpillé dans plusieurs fichiers (extension .js). L’un de ces fichiers, jquery.js, est une bibliothèque permettant de manipuler le fichier html, en listant ses éléments ayant un type donné, puis en leur adressant des messages. On va voir quelques exemples d’utilisation, sur une étude de cas : Un fichier html n’ayant que du contenu, qu’on va enrichir au fur et à mesure.

I/ CSS

Voici un fichier html racontant l’histoire d’un explorateur nommé Dalvik, qui cherche un rubis sacré en pleine jungle :

HTML - 8.4 ko

Triste non (le fichier, pas l’histoire) ? Pour améliorer ce document, on va mettre un peu de couleur dedans :

  • le titre principal (h1) [1] écrit en rouge (red) ;
  • les titres secondaires (h2) écrits en bleu (blue) ;
  • les paragraphes (p) écrits en oblique ;
  • les éléments de listes (li) écrits en vert.

Ce qui s’écrit comme ceci en CSS :

h1 {color: red; }
h2 { color: blue; }
p { font-style: oblique; }
li { color: green; }

Voici le résultat obtenu, déjà un peu plus gai :

HTML - 8.5 ko

Mais on peut avoir à mettre en exergue des éléments spécifiques du fichier html, pas seulement des éléments de type html (h1, h2, p, ul, ol, li, table, div etc.). CSS permet de personnaliser son fichier en créant ses propres classes CSS [2], comme par exemple la classe « encadré », notée avec un point initial : .encadré, et à qui on donne une bordure de 0,2 fois la taille d’un caractère [3], de couleur marron [4] et des coins arrondis (de rayon 0,4 fois la taille d’un caractère), et un peu d’ombre pour les mettre encore plus en exergue :

.encadré { border: 0.2em ridge brown;
    border-radius: 0.4 em;
    box-shadow: 0.5em 0.2em 0.1em gray;
}

Alors, pour qu’un élément soit encadré, il suffit dans la partie html, de lui donner comme attribut la classe « encadré » [5], par exemple, pour encadrer le mot « Java », on l’écrit

<span class="encadré">Java</span>

Enfin, lorsqu’on veut s’adresser à un élement unique, on ne va pas inventer une classe juste pour lui, mais lui donner un identifiant unique, avec quelque chose comme

<span id="leMot">rubis</span>

Comme il n’y a qu’un mot qui ait pour identifiant « leMot », on peut se permettre de lui mettre une couleur de fond (du vert), en précédant son identifiant du symbole # :

#leMot { background-color: green; }

Le fichier obtenu est celui-ci :

HTML - 8.6 ko
Dalvik ne peut pas encadrer les serpents
le fichier avec les mots importants encadrés

II/ jQuery

jQuery est un logiciel libre [6], qui considère le fichier html et sa strucure DOM comme un objet à manipuler. Il permet notamment

  • de faire la liste des éléments ayant un type (ou une classe CSS) donné ;
  • de modifier les propriétés CSS pour des éléments donnés (ou de type donné) ;
  • de modifier la structure du fichier html, en déplaçant certains éléments qu’il contient [7] ;
  • de donner des comportements nouveaux à certains de ces éléments.

Pour utiliser jQuery, il est nécessaire de charger le logiciel, en ajoutant dans l’entête du html quelque chose comme

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

Et d’appeler la fonction jQuery, qui est une sorte de magicien omnipotent, en écrivant le symbole $, abréviation de « jQuery ». C’est tout !

Remarque : Dans cet article, au lieu d’écrire les scripts en JavaScript, on utilise une surcouche de ce langage, CoffeeScript, qui est nettement plus concise, et a également l’avantage de ressembler à Python (langage).

Pour commencer, comme le fichier html ci-joint comprend 6 titres de niveau h2, il est aisé de les lister. On commence par essayer un

alert $("h2")

mais la boîte d’alerte n’affiche que

[object Object]

qui ne donne pas beaucoup de renseignements : la liste des « h2 » est un tableau JavaScript (ou « objet » générique)... Mais on peut avoir le nombre de h2 dans le fichier, avec

alert $("h2").length

qui, dans le cas présent, affiche le nombre 6. Ainsi, $("h2") est un tableau contenant 6 éléments. Pour avoir le premier titre, il suffit donc de faire $("h2")[0]. Mais évidemment, en affichant ce titre, on a

[object HTMLHeadingElement]

qui explique simplement que $("h2")[0] est un titre. Pour savoir ce qu’il contient, on lui demande de faire un striptease (montrer son contenu html), avec

alert $("h2")[0].innerHTML

qui, dans le cas présent, donne

1) Le temple

Pour avoir les contenus de tous les titres, on peut créer la liste de ceux-ci et afficher ladite liste [8] :

alert (x.innerHTML for x in $("h2"))

Ceci donne cet affichage dans la boîte d’alerte :

1) Le temple,2) La crypte,3) Le Python,4) La fuite,5) La salle du trésor,6) Le rubis retrouvé

III/ jQuery et CSS

On peut maintenant donner une couleur différente aux h2, mais pour cela CSS suffisait. Par contre, CSS ne permet pas de donner une couleur qui dépende de la parité du numéro du titre ! Avec jQuery, il suffit de demander, à condition que le reste du numéro modulo 2 (numéro%2) soit non nul, de mettre la valeur « magenta » dans la propriété « color » des « h2 » :

$ ->
    $("h2").each (x) ->
        $(this).css "color", "magenta" if x%2

Le fichier obtenu ressemble maintenant à ceci :

HTML - 8.7 ko
Dalvik en voit de toutes les couleurs
alternance des couleurs de titres

Note : On pouvait obtenir le même effet avec la propriété « odd » de jQuery :

$("h2:odd").css "color", "magenta"

On peut aussi colorier en rouge tous les paragraphes contenant le mot « rubis » :

$("p:contains('rubis')").css "color", "red"

On constate alors que seuls les derniers paragraphes parlent du rubis en question :

HTML - 8.7 ko
les rubis sont rouges

IV/Gestion des évènements souris

Il est temps maintenant de parler du comportement de certains éléments. Tout d’abord, faire en sorte qu’à chaque clic sur un élément encadré, son contenu s’affiche dans une boîte d’alerte :

$ ->
    $(".encadré").on "click", ->
        alert $(this).text()

Mais plutôt qu’afficher quelque chose de déjà visible, il vaut mieux afficher des informations complémentaires, comme par exemple des définitions. On peut créer un tableau associatif, liant chaque mot à sa définition, et nommé dico [9], et afficher non pas le mot, mais sa définition, avec

$ ->
    $(".encadré").on "click", ->
        alert dico[$(this).text()]

On dirait du Wordpress :

HTML - 9.5 ko
le fichier et son glossaire

Seulement dans Wordpress, il n’y a pas besoin de cliquer sur un mot pour voir sa définition, il suffit de le survoler [10]. Alors on va donner d’autres effets : Au survol d’un mot encadré, celui-ci se met à gonfler, gonfler, gonfler...

On peut déjà modifier la propriété CSS « font-size » au survol :

$ ->
    $(".encadré").on "mouseover", ->
        $(this).css "font-size", "300%"

Mais l’effet est un peu brutal. Alors autant faire appel aux possibilités d’animation de jQuery en demandant que la croissance dure 8000 millisecondes :

$ ->
    $(".encadré").on "mouseover", ->
        $(this).animate {fontSize: "300%"}, 3000

Encore un autre effet (toujours au survol d’un mot encadré) : Encadrer (ou décadrer, selon), le mot d’identifiant « leMot » au début :

$ ->
    $(".encadré").on "mouseover", ->
        $(this).animate {fontSize: "300%"}, 3000
        $("#leMot").toggleClass "encadré"

Alors rien qu’en regardant « le mot », on connaît la parité du nombre de survols qui ont été faits à la souris. Voici le fichier obtenu (à consulter en ligne) :

HTML - 8.7 ko
lettrines animées avec jQuery
ça commence à bouger avec tous ces serpents qui serpentent

V/ jQuery-UI

Pour rendre le fichier vraiment réactif, jQuery-UI, une extension de jQuery, possède une collection de « widgets » très utiles. Et il suffit, une fois chargé jQuery-UI, de demander aux éléments encadrés d’être mobiles (« draggable ») pour qu’ils le soient :

$(".encadré").draggable()

On peut alors parler de lecture active (ouvrir le fichier ci-dessous dans un autre navigateur) :

HTML - 8.6 ko
mots déplaçables
Dalvik a le mal de mer, ça bouge trop !

Cette technologie a permis par exemple de faire ce fichier...


[1« h » comme « header »

[2c’est d’ailleurs comme cela que les exemples CSS sont syntaxiquement colorés dans cet article, en leur donnant la classe « css »...

[3le choix de cette unité permet de conserver les proposrtions à chaque zoom par Control+ et Control-.

[4normal pour un cadre non ?

[5il n’est pas nécessaire qu’une classe CSS ait un aspect spécial, on peut donc se servir des classes CSS comme éléments réactifs dans le fichier, à l’aide de jQuery. Dans ekoarun, des classes CSS sont utilisées pour spécifier dans quel membre se trouve un terme, et pour le degré de celui-ci. Or un monôme de degré 1 et un monôme de degré 0 ont le même aspect, ce qui signifie que leurs propriétés CSS ne sont pas utilisées

[6techniquement, une bibliothèque écrite en JavaScript

[7Le DOM est une structure arborescente, et « modifier » la structure, revient à effectuer des tailles et des greffes dans l’arbre en question.

[8ici c’est du CoffeeScript, avec ses listes en compréhension

[9parce que c’est dans les faits, un dictionnaire

[10en fait il s’agit juste de la propriété « title » de CSS, le « titre » étant ce qui s’affiche au survol. On n’a donc pas besoin de jQuery pour mettre un glossaire dans du html.


Commentaires

Logo de Seb
mercredi 14 mai 2014 à 07h18 - par  Seb

Que CSS ne permette pas la mise en forme de certains éléments par un sur deux ou que le premier etc. n’est pas exact. Prenons l’exemple de la mise en forme d’un titre h2 sur 2... il y a au moins de solutions :

La première un peu fastidieuse certes, consiste à mettre une classe « pair » sur les h2 à traiter (c’est à dire 1 h2 sur 2)
La seconde utilise le pseudo-format :nth-child(n) qui permet de sélectionner le nieme enfant d’un élément. n est un entier ou alors les mots-clés odd ou even. Voir http://www.w3schools.com/cssref/sel... pour plus de détails.

Navigation

Articles de la rubrique

  • CSS sans douleur avec jQuery

Annonces

Prochains rendez-vous de l’IREM

Séminaire EDIM-IREM

- Mercredi 8 février 2017, 14h-18h, campus du Tampon, amphi 120 B
- Mercredi 8 mars 2017, 14h-18h, PTU, Saint-Denis, salle S23.6
- Mercredi 12 avril 2017, 14h-18h, campus du Tampon
- Mercredi 3 mai 2017, 14h-18h, PTU, Saint-Denis, salle S23.6
- Mardi 13 juin 2017, 14h-18h, campus du Tampon
- Mercredi 14 juin 2017, 14h-18h, PTU, Saint-Denis, salle S23.6

Semaine des mathématiques

Du 23 mars au 4 avril 2017 dans l’académie de la Réunion.


Brèves

Travailler à plusieurs

lundi 19 décembre 2016

Les enseignements d’exploration au lycée imposent aux enseignants de travailler ensemble. Chantal Tuffery-Rochdi a analysé dans sa thèse les pratiques des enseignants de MPS (méthodes et pratiques scientifiques). Elle répond aux questions des Cahiers pédagogiques.

Un document sur Eduscol

mardi 19 mai 2015

Un document clarifiant bien la façon dont les mêmes concepts vivent en mathématiques et dans les sciences « exactes » les utilisant, publié par Eduscol en octobre 2014. Citons-les :
« Le document proposé ci-dessous s’adresse aux professeurs de mathématiques, physique-chimie et sciences de l’ingénieur intervenant dans le segment [Bac-3 ; Bac+3]. Il vise à les informer des différences de présentation et d’interprétation qui sont faites de certains concepts mathématiques dans les autres disciplines. Ces éclaircissements peuvent contribuer à harmoniser et à clarifier l’utilisation de ces notions auprès des élèves. »

Les métiers des mathématiques et de l’informatique

dimanche 22 mars 2015

Une brochure de l’ONISEP réalisée à l’initiative des cinq sociétés savantes, Femmes & Mathématiques, Société informatique de France, Société française de statistique, Société de mathématiques appliquées et industrielles, Société mathématique de France, représentant l’ensemble de la communauté française d’informatique et de mathématiques.

Histoire de la comptabilité

vendredi 28 décembre 2012

Sur ce site (en anglais) dédié à la comptabilité, on trouve des informations intéressantes sur l’histoire et les pratiques de ce domaine, qui peuvent être utiles aux professeurs enseignant des mathématiques financières (et aussi aux autres...).

La CGE et la réforme des lycées

lundi 16 janvier 2012

La Conférence des Grandes Écoles publie 19 préconisations pour la réforme du lycée.

Sur le Web : Les 19 préconisations

Pratique des mathématiques en série STD2A

lundi 16 janvier 2012

Le site de l’IGEN offre des recommandations et des ressources pour enseigner les mathématiques en série STD2A. Les thèmes abordés (couleurs et nuances de gris, arcs et architecture, jeux vidéos, photo et tableur, perspectives parallèles...) sont de nature à donner aussi des idées d’activités aux enseignants des autres séries !

En cheminant avec Kakeya

lundi 16 janvier 2012

Un livre (à télécharger) de Vincent Borelli et Jean-Luc Rullière qui présente le calcul intégral et la dérivation en s’appuyant sur la question de Kakeya. Pour les lycéens, les étudiants et tous les esprits curieux qui souhaitent voir les mathématiques sous un jour différent.

Sur le Web : Livre à télécharger

Bicentenaire Galois

lundi 12 septembre 2011

À l’occasion du bicentenaire de la naissance d’Évariste Galois (1811-2011), l’Institut Henri Poincaré et la Société mathématique de France organisent un ensemble de manifestations et proposent un site contenant diverses ressources documentaires susceptibles d’intéresser les enseignants.

Statistiques

Dernière mise à jour

jeudi 23 février 2017

Publication

732 Articles
Aucun album photo
125 Brèves
11 Sites Web
126 Auteurs

Visites

900 aujourd'hui
1162 hier
1929005 depuis le début
36 visiteurs actuellement connectés