Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

A la une
Article mis en ligne le 31 janvier 2009
dernière modification le 18 août 2017

par Jean Christophe Villeneuve

Cette noisette destinée à être appelée au centre de la page d’accueil affiche 2 onglets par défaut mais on peut en rajouter facilement.

Nom du fichier inc-a_la_une.html
pages concernées page d’accueil
mots-clés aucun

On peut configurer de 1 à 5 onglets avec le choix suivant :

  • Derniers articles avec 3 présentations possibles :
  • * Derniers articles : 1 article en exergue configurable et d’autres en-dessous en 1 à 3 colonnes. Un clic sur l’un d’eux le fait remonter en exergue.
  • * Derniers articles bis : Une liste des derniers articles présentés comme l’article en exergue de la première option
  • * Derniers articles ter : une présentation identique à Derniers articles mais un clic sur un article renvoie directement à l’article
  • Plan du site
  • Article d’accueil qui affiche l’article avec le mot-clé accueil
  • Article avec mot-clé pour afficher la liste des articles avec le mot-clé de votre choix. Cette présentation aura le même aspect que Derniers articles ter
  • Article archive pour afficher un article pris au hasard dans la rubrique ayant le mot-clé archive
  • Rubrique pour afficher les articles d’une rubrique avec 5 rubriques possibles
  • Mon article pour afficher l’article avec le mot-clé mon-articleN avec 3 articles possibles
  • Sur le web pour afficher la liste des articles syndiqués

dans l’ordre souhaité par vous même.

Avec EscalV2

Présentation

Le code du fichier :

<div class="cadre-une">
 
  <ul class="onglets">
    <li><a href="#" name="contenu_1" class="tab active" title="Derniers articles">Les derniers articles ...</a></li>
    <li><a href="#" name="contenu_2" class="tab" title="Plan du site">... et les autres</a></li>
  </ul>
 
  <div class="contenu_1 content">
    <INCLURE {fond=inclusions/inc-une_derniers}>
  </div>
 
  <div class="contenu_2 content">
    <INCLURE {fond=inclusions/inc-plan}>
  </div>
 
</div>
 
</div>

Pour rajouter un onglet, il suffit de rajouter un élément de liste

    <li><a href="#" name="contenu_3" class="tab">Votre titre</a></li>

et un contenu

  <div class="contenu_3 content">
  <INCLURE {fond=inclusions/inc-autrechose}>
  </div>

le fichier "inc-autrechose" est à créer, bien sur !

Pour aller plus loin

On peut s’amuser à vouloir afficher certaines rubriques en tant qu’onglets supplémentaires. Pour cela, on va rajouter 2 boucles :
 une première qui va créer les onglets à la suite des 2 premiers

    <BOUCLE_onglets(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
      #SET{numero1, #COMPTEUR_BOUCLE|plus{2}}
      <li><a href="#" name="contenu_#GET{numero1}" class="tab">#TITRE</a></li>
    </BOUCLE_onglets>

cette boucle compte le nombre de passages, rajoute 2 à la valeur trouvée et stocke le résultat dans "numero1" afin de numéroter name="contenu_XX
 une deuxième boucle pour afficher le contenu des rubriques sur le même modèle que le premier onglet

  <BOUCLE_contenu(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
  #SET{numero2, #COMPTEUR_BOUCLE|plus{2}}
        <div class="contenu_[(#GET{numero2})] content">
        <INCLURE {fond=inclusions/inc-une_derniers}{id_rubrique}>
        </div>
</BOUCLE_contenu>

Il ne reste plus qu’à marquer les rubriques voulues avec le mot-clé RubriqueOnglet.

Le code complet du fichier devient donc

#CACHE{24*3600}
 
<div class="cadre-une">
 
  <ul class="onglets">
    <li><a href="#" name="contenu_1" class="tab active" title="<:escal:title_articles_derniers:>"><:escal:articles_derniers:> ...</a></li>
    <li><a href="#" name="contenu_2" class="tab" title="<:escal:plan_site:>">... <:escal:articles_autres:></a></li>
    <BOUCLE_onglets(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
      #SET{numero1, #COMPTEUR_BOUCLE|plus{2}}
      <li><a href="#" name="contenu_#GET{numero1}" class="tab">#TITRE</a></li>
    </BOUCLE_onglets>
  </ul>
 
  <div class="contenu_1 content">
    <INCLURE {fond=inclusions/inc-une_derniers}{env}>
  </div>
 
  <div class="contenu_2 content">
    <INCLURE {fond=inclusions/inc-plan}>
  </div>
 
  <BOUCLE_contenu(RUBRIQUES){par num titre}{titre_mot="RubriqueOnglet"}>
  #SET{numero2, #COMPTEUR_BOUCLE|plus{2}}
        <div class="contenu_[(#GET{numero2})] content">
        <INCLURE {fond=inclusions/inc-une_derniers}{id_rubrique}>
        </div>
</BOUCLE_contenu>
 
</div>

Précautions

Ce code fonctionne même si on sélectionne des sous-rubriques mais attention à 2 choses :

  • si la suite des onglets est trop longue, les onglets se mettent bien sur 2 lignes mais ce n’est pas très esthétique
  • il y a un risque que le dernier onglet d’une ligne soit coupé en 2 avec l’autre bout sur la ligne suivante si le titre de la rubrique est composé de plusieurs mots. Solution : séparer les mots par un espace insécable avec le code &nbsp;
qrcode:https://escal.edu.ac-lyon.fr/spip/spip.php?article5

Dans la même rubrique

Article archive
le 20 août 2012
par Jean Christophe Villeneuve
Article d’accueil
le 6 août 2012
par Jean Christophe Villeneuve
Annonces defilantes
le 26 juillet 2012
par Jean Christophe Villeneuve
Annonce
le 5 décembre 2011
par Jean Christophe Villeneuve
Le forum du site
le 3 octobre 2011
par Jean Christophe Villeneuve
Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2024 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.6.2