Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Guide de création du composant Expanding HTML5

Contrôler le repli de la création

Pour replier une création, créez un objet permettant de contrôler le repli en cas d'interaction d'un internaute. Vous pouvez configurer la création pour qu'elle se replie lors d'un clic ou du passage du curseur. L'exemple présenté dans cet article vous montre comment procéder pour qu'elle se replie lorsqu'un internaute clique sur un bouton personnalisé.

Créer un objet

Créez un objet dans le fichier HTML en utilisant le tag <div>, puis attribuez-lui un ID.

Extrait de code

<body>
  <div id="main-panel">
    <div id="collapsed-panel">
      <!-- Add collapsed content here. -->
      <div id="expand-button"></div>
    </div>
    <div id="expanded-panel">
      <!-- Add expanded content here. -->
      <div id="collapse-button">CLOSE X</div>
    </div>
  </div>
</body>
Appliquer un style à l'objet

Appliquez un style à l'objet que vous avez créé dans le fichier CSS en utilisant l'ID que vous lui avez attribué.

Extrait de code

#collapse-button {
  position: absolute;
  width: 75px;
  height: 20px;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
Ajouter la fonctionnalité de repli

Tout comme l'expansion, le repli d'une annonce est un processus asynchrone qui se déroule exactement dans l'ordre suivant :

  1. Une demande de repli est soumise concernant la création à l'aide de la méthode requestCollapse.
  2. L'événement COLLAPSE_START, qui permet de demander l'animation de repli (s'il en existe une), est envoyé.
  3. Une fois que l'animation de repli est terminée, une demande d'achèvement du repli est envoyée à l'aide de la méthode finishCollapse.
  4. L'événement COLLAPSE_FINISH, qui permet de demander l'exécution de fonctionnalités ou d'animations supplémentaires dans le panneau replié, est envoyé.
Extrait de code
<head>
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Permet d'exécuter l'animation d'expansion.
  // Vous pouvez indiquer la direction d'expansion dans l'appel :
  // Enabler.getExpandDirection(); //
  // À la fin de l'animation, vous devez appeler
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Rappel permettant de définir
  // l'état final une fois l'expansion terminée.
  isExpanded = true;
}

function collapseStartHandler() {
  // Permet d'exécuter l'animation de repli.
  // À la fin de l'animation, vous devez appeler
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Rappel permettant de définir
  // l'état final une fois le repli terminé.
  isExpanded = false;
}

function actionClickHandler() {
  isExpanded ? Enabler.requestCollapse() : Enabler.requestExpand();
}

Enabler.addEventListener(
  studio.events.StudioEvent.EXPAND_START,
  expandStartHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.EXPAND_FINISH,
  expandFinishHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.COLLAPSE_START,
  collapseStartHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.COLLAPSE_FINISH,
  collapseFinishHandler);
actionBtn.addEventListener(
  'click',
  actionClickHandler,
  false);
</script>
</head>
Cet article vous a-t-il été utile ?