On dispose d’un ensemble important d’articles (qu’on va supposer appartenir à une même rubrique pour simplifier),
et on veut en afficher la liste en présentant dans un onglet la première lettre de leur titre comme ceci :
Evidemment chacun adaptera la présentation à son gout en modifiant les styles CSS, y compris en simulant de véritables onglets
(voir par exemple la contrib Menu « portes coulissantes »).
Le but de cette contrib n’est pas de parler de styles mais de boucles.
Le code
1)- Les styles
On construit une liste en affichage « inline » puis les styles des onglets dans des balises <a>
, le style « a:hover » étant le même que celui du « a » de la page courante.
Voici le shéma (voir le document joint pour un choix plus précis) :
#onglets {
...
}
#onglets li {
display: inline;
list-style: none;
margin: 0;
}
a.onglets_off {
text-decoration: none;
color: #FFFFCC;
background-color: #005731;
padding: 4px 6px 4px 6px;
border: 1px solid white;
}
a.onglets_off:hover, a.onglets_on {
text-decoration: none;
color: #005731;
background-color: #FFFFCC;
padding: 4px 6px 5px 6px;
border: 1px solid white;
}
2)- Les boucles
a)- La boucle qui affiche les onglets :
<BOUCLE_onglets(ARTICLES){id_rubrique}{par titre}{titre==^[A-ZÀÉÈ]}>
Le dernier critère peut être ajusté (voire supprimé), le but étant de ne retenir que les articles dont le titre commence pas une majuscule
(sinon l’article ne sera pas listé).
Pour chaque article, mais une seule fois pour chaque lettre différente :
- Récupérer la première lettre du titre dans une variable à l’aide de #SET et d’une expression régulière :
#SET{initiale,#TITRE|match{\w{1}}}
À ce propos, le filtre « match » ne semble pas prendre de classe du genre [A-Z], sans doute à cause des crochets.
- Replacer à l’aide de #GET 3 fois cette lettre dans le lien de l’onglet ; c’est là qu’on utilise le filtre « unique ».
Il faut choisir un des #GET (ici le texte cliquable du lien) et placer les autres dans ses parties alternatives comme ceci (sinon ça ne marche pas) :
[<a [class="(#ENV{lettre,A}|=={#GET{initiale}}|?{'onglets_on','onglets_off'})"] href="spip.php?rubrique#ID_RUBRIQUE&lettre=#GET{initiale}"> (#GET{initiale}|unique) </a>]
b)- La boucle qui affiche les articles (boucle classique avec pagination) :
<BOUCLE_tous_articles(ARTICLES){id_rubrique}{par titre}{titre==^#ENV{lettre,A}}{pagination}>
La valeur par défaut de #ENV
active l’onglet de la lettre A s’il n’y a pas de paramètre dans l’URL.
3)- Page de code complète à télécharger :
Charger la page onglets.html dans votre dossier squelettes après avoir indiqué à la ligne 3 un numéro de rubrique (où il y a des articles à lister).
Appeler ensuite mon_site_spip/spip.php?page=onglets
pour tester le code.
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |