HTML5 expanding build guide

Sterowanie rozwijaniem kreacji

Jeśli kreacja ma się rozwijać, utwórz obiekt, który będzie sterował rozwijaniem jej po interakcji z użytkownikiem. Rozwinięcie może następować po kliknięciu lub najechaniu myszą. Z przykładu w tym artykule dowiesz się, jak skonfigurować rozwijanie po kliknięciu dowolnego miejsca zwiniętego panelu.

Tworzenie przycisku

Utwórz element <div> w pliku HTML i nadaj mu identyfikator (np. „expand-button”).

Przykładowy kod

Dodanie nowego elementu div o identyfikatorze „expand-button”.

<body> <div id="main-panel"> <div id="collapsed-panel">  <div id="expand-button"></div> </div> <div id="expanded-panel">  </div> </div> </body>

Określanie stylu przycisku

Określ styl utworzonego obiektu, korzystając z CSS i odpowiedniego identyfikatora („expand-button”).

Przykładowy kod

Nadanie przyciskowi takiego samego rozmiaru, jaki ma zwinięty panel, i ustawienie go jako niewidocznego za pomocą CSS.

#expand-button { position: absolute; width: inherit; height: inherit; opacity: 0; cursor: pointer; }

Dodawanie kodu rozwinięcia

Rozwijanie reklamy jest procesem asynchronicznym przebiegającym w tej ściśle określonej kolejności:

Kreacja zgłasza żądanie rozwinięcia, korzystając z metody requestExpand.
To żądanie wysyła zdarzenie EXPAND_START, które informuje kreację, że ma wykonać animację rozwinięcia (jeśli taka jest).
Po zakończeniu animacji rozwinięcia kreacja zgłasza żądanie ukończenia rozwijania, korzystając z metody finishExpand.
To żądanie wysyła zdarzenie EXPAND_FINISH, które informuje kreację, że może teraz wykonywać dodatkowe funkcje lub animacje w rozwiniętym panelu.

Przykładowy kod

<head>
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Wykonanie animacji rozwinięcia.
  // Aby w wywołaniu opcjonalnie określić kierunek rozwinięcia:
  // Enabler.getExpandDirection(); //
  // Po zakończeniu animacji należy wywołać metodę
  Enabler.finishExpand();
}

function expandFinishHandler() {
  // Wygodne wywołanie zwrotne
  // ustawiające końcowy stan po rozwinięciu.
  isExpanded = true;
}

function collapseStartHandler() {
  // Wykonanie animacji zwinięcia.
  // Po zakończeniu animacji należy wywołać metodę
  Enabler.finishCollapse();
}

function collapseFinishHandler() {
  // Wygodne wywołanie zwrotne
  // ustawiające końcowy stan po zwinięciu.
  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>

Opcjonalnie: automatyczne rozwijanie kreacji po pierwszym wczytaniu

Niektórzy wydawcy zezwalają na automatyczne rozwijanie kreacji po pierwszym wczytaniu reklamy na stronie. W tym celu użyj metody setStartExpanded komponentu Enabler.

Umieść ten wiersz kodu przed funkcją expandStartHandler w przykładowym kodzie rozwinięcia powyżej. Metodę można wywołać przed zdarzeniem INIT komponentu Enabler.

Enabler.setStartExpanded(true);

Gdy kreacja rozwija się automatycznie, dane o rozwinięciu nie są monitorowane. Rozwinięcia inicjowane przez użytkownika (po tym automatycznym) są monitorowane.

Czy to było pomocne?

Jak możemy ją poprawić?