
Fiche N°9 - Un accordéon en sommaire
par
Objectif : Jouer avec jquery, et utiliser un accordéon afin de présenter beaucoup d’informations sur une seule page.
Charger les css et javascript de l’accordéon :
- Créer le sous-répertoire squelettes/inclure
- Éditer le fichier inclure/jquery.html :
<script type="text/javascript" src="#CHEMIN{prive/javascript/ui/jquery-ui.js}"></script>
<script type="text/javascript" src="#CHEMIN{prive/javascript/ui/jquery.ui.accordion.js}"></script>
<link rel="stylesheet" href="[(#CHEMIN{css/jquery-ui.css})]" type="text/css" media="all" />
<link rel="stylesheet" href="[(#CHEMIN{css/jquery.ui.accordion.css})]" type="text/css" media="all" />
<script type='text/javascript'>
$(function() {
$( "#accordeon" ).accordion({ heightStyle: "fill",collapsible: false });
});
</script>
- Les deux premières lignes chargent le code javascript, les deux suivantes le css correspondant. La dernière permet d’utiliser l’accordéon sur le div ayant comme id accordeon [1]. Différentes options peuvent être fixées pour modifier le comportement de notre accordéon, voir la documentation pour en savoir plus.
Modifier le fichier inclure/recents.html
- Ce fichier implémente la boucle article qui permet d’afficher les articles les plus récents. Repérez la BOUCLE_articles et modifiez-la de la manière suivante :
<div id="accordeon">
<ul>
<BOUCLE_articles(ARTICLES) {!par date} {pagination}>
<li class="hentry clearfix">
[(#LOGO_ARTICLE_RUBRIQUE{#URL_ARTICLE}|image_reduire{40,*})]
<h3 class="h2 entry-title">
<a href="#URL_ARTICLE" rel="bookmark">#TITRE<br />
<small><abbr class="published"[ title="(#DATE|date_iso)"]>
[(#DATE|affdate_jourcourt)]</abbr>[, <:par_auteur:>
(#LESAUTEURS|supprimer_tags)]</small>
</a>
</h3>
[<div class="#EDIT{intro} introduction entry-content">
(#INTRODUCTION|couper{200})<br />
<a href="#URL_ARTICLE" style="color:#990000; text-decoration:underline">
lire la suite
</a>
</div>]
</li>
</BOUCLE_articles>
</ul>
</div>
- Les modifications proposées visent à :
- Insérer la boucle dans un
div
appelé accordeon - Intégrer le tag <small> au header <h3>, en effet il faut que le <div> qui constitue le cœur de l’élément (et la partie qui bouge de l’accordéon) soit voisin du header
- Ajouter un lien ("lire la suite") car l’accordéon empêche de cliquer tranquillement sur le titre de l’article comme avant
- Ajouter un filtre pour couper les articles à 200 caractères, pour une question d’esthétique
- Insérer la boucle dans un
Modifier le fichier sommaire.html
- Vous devrez inclure le nouveau fichier à partir de sommaire.html, soit ajouter juste au-dessus de </head> :
<INCLURE{fond=inclure/jquery} />
[1] bien sûr vous pouvez changer le nom !