Pour déplier une création, créez un objet permettant de contrôler l'expansion en cas d'interaction d'un internaute. Vous pouvez configurer la création pour qu'elle se déplie 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 déplie lorsqu'un internaute clique en un point quelconque du panneau replié.
Créer un bouton
Ajoutez un tag <div> au fichier HTML et attribuez-lui un ID (par exemple, "expand-button").
Ajoutez un tag <div> avec l'ID "expand-button".
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Ajouter le contenu replié ici. -->
<div id="expand-button"></div>
</div>
<div id="expanded-panel">
<!-- Ajouter le contenu déplié ici. -->
</div>
</div>
</body>Ajouter un style au bouton
Ajoutez un style à l'objet que vous avez créé dans le fichier CSS en utilisant l'ID "expand-button".
Exemple de codeUtilisez le fichier CSS pour donner au bouton une taille identique au panneau replié et pour le définir sur "Invisible".
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}Ajouter un code d'expansion
L'expansion d'une annonce est un processus asynchrone qui se déroule exactement dans l'ordre suivant :
- Une demande d'expansion est soumise concernant la création à l'aide de la méthode
requestExpand. - L'événement
EXPAND_START, qui permet de demander l'animation d'expansion (s'il en existe une), est envoyé. - Une fois que l'animation d'expansion est terminée, une demande d'achèvement de l'expansion est envoyée à l'aide de la méthode
finishExpand. - L'événement
EXPAND_FINISH, qui permet de demander l'exécution de fonctionnalités ou d'animations supplémentaires dans le panneau déplié, est envoyé.
<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>
Facultatif : Déplier la création automatiquement lors de son premier chargement
Certains éditeurs permettent l'expansion automatique des créations lors du premier chargement de l'annonce sur une page. Pour ce faire, utilisez la méthode setStartExpanded du composant Enabler.
expandStartHandler dans l'exemple de code d'expansion ci-dessus. Cette méthode peut être appelée avant l'événement INIT du composant Enabler.Enabler.setStartExpanded(true);