DéveloppementsReconversion de gadgets

Afficher / masquer le contenu d'un gadget


Les posts publiés avant juin 2015 sont susceptibles de contenir des informations obsolètes !
Référez-vous à la nouvelle théorie du langage XML ou/et posez vos questions sur le forum pour en savoir plus.
Description Gadget Version Template Version
Développement qui permet de déplier ou replier le contenu d'un gadget en cliquant sur son titre.
1
1
2
Déployer le contenu d'un gadget
Ce développement permet de masquer le contenu d'un gadget et de le faire apparaître à chaque fois que l'on clique sur son titre.

Présentation du développement

Démo
Mon gadget dépliable
Démo gadget dépliant
Crédit photo : National Geographic


Au chargement de la page, seul le titre du gadget est visible. Le contenu n'est pas affiché.


Gadget replié


Lorsque l'on clique sur le titre, le contenu se dépliera verticalement vers le bas.


Gadget déplié




Le fichier CSS

Pour commencer, installez la feuille de styles.

Fichier CSS
.title-extended {
  display: inline-block;
  cursor: pointer;
  padding-right: 16px !important;
  background-image: url(https://sites.google.com/site/bloggercodebc/image/abottom.png);
  background-repeat: no-repeat;
  background-position: right center;
}

.title-extended:hover {
  text-decoration: underline;
}

.widget-content-extended {
  overflow: hidden;
  overflow-y: auto;
  max-height: 0px;
  transition: max-height 0.5s;
  -webkit-transition: max-height 0.5s;
}
Où recopier ce code ?

Vous ajoutez le code CSS via l'éditeur de modèles :

  • Tableau de bord
  • Modèle
  • Personnaliser
  • Avancé
  • Ajouter fichiers CSS

Si pour une raison ou une autre le style ne vous convient pas, vous pouvez l'adapter selon vos besoins :
  • .title-extended : Class du titre.
  • .widget-content-extended : Class du contenu.


Le script

Le script permettra d'exécuter le déploiement ou le remploiement.

Script
<script type='text/javascript'>
  // <![CDATA[
  function extended(widgetId) {
    BCW_title=widgetId + "_title";
    BCW_content=widgetId + "_content";
    if(document.getElementById(BCW_content).style.maxHeight=='0px') {
      document.getElementById(BCW_content).style.maxHeight='400px';
      document.getElementById(BCW_title).style.backgroundImage='url(https://sites.google.com/site/bloggercodebc/image/atop.png)';
    }
    else {
      document.getElementById(BCW_content).style.maxHeight='0px';
      document.getElementById(BCW_title).style.backgroundImage='url(https://sites.google.com/site/bloggercodebc/image/abottom.png)';
    }
  return;
  }
  // ]]>
</script>
Où recopier ce code ?

  • Tableau de bord
  • Modèle
  • Modifier le code HTML

Vous ajoutez le script avant : </head>.

La valeur en rouge dans le script est la hauteur maximale du gadget. Si cette limite est atteinte, le contenu s'affichera avec une barre défilante verticale.
Vous pouvez modifier cette valeur en fonction de vos besoins.


Modifier les gadgets

Dés que votre modèle est équipé de la feuille de styles et du script, il vous suffit de modifier le code HTML d'un ou de plusieurs gadgets.

Afin d'en savoir plus sur le code HTML des gadgets, je vous renvoies vers la théorie : Composition standard d'un gadget.


1ère étape : Vous repérez et développez le code HTML du gadget que vous voulez modifier.
2ème étape : Vous développez l'inclusion main.


<b:includable id='main'></b:includable>


3ème étape : Dans l'inclusion main se trouve le titre et le contenu. repérez le titre

Soit
<h2 class='title'><data:title/></h2>

Soit
<h2><data:title/></h2>

A remplacer par
<h2 class='title-extended' expr:id='data:widget.instanceId + &quot;_title&quot;' expr:onclick='&quot;extended(&apos;&quot; + data:widget.instanceId + &quot;&apos;);&quot;'><data:title/></h2>


4ème étape : Toujours dans l'inclusion "main", repérez la balise d'ouverture du contenu.

<div class='widget-content'>

A remplacer par
<div class='widget-content-extended' expr:id='data:widget.instanceId + &quot;_content&quot;' style='max-height: 0px; transition: max-height 1s; -webkit-transition: max-height 1s;'>

5ème et dernière étape : Vous enregistrez.



A noter que tous les gadgets ne sont pas forcément construit de la même manière. Certains ne contiennent pas de titre, tandis que d'autres ne sont pas modifiables.

Pour connaître les caractéristiques de chaque gadget, vous pouvez consulter les fiches des codes originaux : Fiches techniques des gadgets Blogger.


A consulter aussi, le développement de Prac : Listes déroulantes.
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsMulti-versions
Facebook : Bouton J'aime [Like button]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
ThéorieRéférences XMLTypes des variables d'habillage
Variables d'habillage - Les arrière-plans [background]
Populaire