Suche
Suche löschen
Suche schließen
Google-Apps
Hauptmenü

Erstellungsanleitung für HTML5-Expanding-Creatives

Minimierung des Creatives steuern

Erstellen Sie zur Minimierung des Creatives ein Objekt, das die Minimierung bei der Interaktion mit dem Nutzer steuert. Sie können eine Minimierung bei Klick oder Mouseover festlegen. Das Beispiel in diesem Artikel zeigt, wie Sie festlegen, dass das Creative minimiert wird, wenn auf eine benutzerdefinierte Schaltfläche geklickt wird.

Objekt erstellen

Erstellen Sie mit dem <div>-Tag ein Objekt in der HTML-Datei und weisen Sie ihm eine ID zu:

Code-Snippet

<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>
Objekt gestalten

Gestalten Sie das im CSS erstellte Objekt, indem Sie die ihm zugewiesene ID verwenden.

Code-Snippet

#collapse-button {
  position: absolute;
  width: 75px;
  height: 20px;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
Minimierungsfunktion hinzufügen

Wie die Maximierung einer Anzeige ist die Minimierung ein asynchroner Vorgang, der exakt in dieser Reihenfolge abläuft:

  1. Die Minimierung wird mit dem Creative über die Methode requestCollapse angefordert.
  2. In dieser Anfrage wird das Ereignis COLLAPSE_START gesendet, um dem Creative mitzuteilen, dass die Minimierungsanimation wiedergegeben werden soll (falls vorhanden).
  3. Wenn die Minimierungsanimation vollständig wiedergegeben wurde, wird mit dem Creative über die Methode finishCollapse eine Anforderung für den Abschluss der Minimierung gesendet.
  4. In dieser Anfrage wird das Ereignis COLLAPSE_FINISH gesendet, um dem Creative mitzuteilen, dass jetzt weitere Funktionen oder Animationen im minimierten Steuerfeld ausgeführt werden können.
Code-Snippet
<head>
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Perform expand animation.
  // Optionally, should you want the direction to expand in call:
  // Enabler.getExpandDirection(); //
  // When animation finished must call
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Convenience callback for setting
  // final state when expanded.
  isExpanded = true;
}

function collapseStartHandler() {
  // Perform collapse animation.
  // When animation finished must call
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Convenience callback for setting
  // final state when collapsed.
  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>
War dieser Artikel hilfreich?