HTML5 Expanding-Erstellungsanleitung
Steuern Sie die Maximierung des Creatives
Um Ihr Creative auf eine festgelegte Größe zu erweitern, erstellen Sie ein Objekt, das die Erweiterung bei Nutzerinteraktion steuert. Sie können es so einrichten, dass es durch Benutzerklick oder Mouseover erweitert wird. Das Beispiel in diesem Artikel zeigt Ihnen, wie Sie es so einrichten, dass es beim Klicken auf eine beliebige Stelle im minimierten Bereich erweitert wird.
Wenn Sie auf den Vollbildmodus erweitern möchten, verwenden Sie stattdessen die Anleitung zum Erweitern auf den Vollbildmodus .
1. Erstellen Sie eine Schaltfläche
Erstellen Sie ein <div> in der HTML-Datei und geben Sie ihm eine ID (z. B. „expand-button").
Fügen Sie ein neues div mit der ID „expand-button" hinzu.
<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>
</div>
</body>2. Gestalten Sie die Schaltfläche
Gestalten Sie das Objekt, das Sie mit CSS erstellt haben, mithilfe der ID ("Erweitern-Schaltfläche").
BeispielcodeVerwenden Sie CSS, um die Schaltfläche auf die gleiche Größe wie das reduzierte Bedienfeld zu bringen, und setzen Sie sie auf unsichtbar.
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}3. Erweiterungscode hinzufügen
Das Maximieren einer Anzeige ist ein asynchroner Prozess, der genau dieser Reihenfolge folgt:
- Das Creative fordert die Maximierung mithilfe der Methode „
requestExpand" an. - Diese Anfrage löst das Ereignis
EXPAND_START, das das Motiv anweist, die Maximierungsanimation auszuführen (falls vorhanden). - Sobald die Maximierungsanimation beendet ist, fordert das Creative den Abschluss der Maximierung mit der Methode
finishExpand. - Diese Anfrage löst das Ereignis
EXPAND_FINISH, das dem Creative mitteilt, dass es jetzt zusätzliche Funktionen oder Animationen auf dem maximierten Steuerfeld ausführen kann.
<Kopf> <script type="text/javascript"> var isExpanded = falsch; Funktion expandStartHandler() { // Erweitern-Animation ausführen. // Optional, wenn Sie möchten, dass die Richtung im Aufruf erweitert wird: // Enabler.getExpandDirection(); // // Wenn die Animation beendet ist, muss aufgerufen werden Enabler.finishExpand(); } Funktion expandFinishHandler() { // Convenience-Callback für die Einstellung // Endzustand bei Erweiterung. isExpanded = wahr; } Funktion collapseStartHandler() { // Minimierungsanimation ausführen. // Wenn die Animation beendet ist, muss aufgerufen werden Enabler.finishCollapse(); } Funktion collapseFinishHandler() { // Convenience-Callback für die Einstellung // Endzustand beim Zusammenklappen. isExpanded = falsch; } Funktion actionClickHandler() { istErweitert ? 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( 'klicken', actionClickHandler, falsch); </script> ... </head> Optional: Erweitern Sie das Creative automatisch, wenn es zum ersten Mal geladen wird
Einige Publisher lassen zu, dass Creatives automatisch maximiert werden, wenn die Anzeige zum ersten Mal auf einer Seite geladen wird. Rufen Sie dazu nach dem Laden der Seite die Methode requestExpand . Verwenden Sie die setStartExpanded -Methode des Enablers, um die Nachverfolgung der ersten, automatischen Erweiterung zu vermeiden. Alle Benutzererweiterungen nach der automatischen Erweiterung werden weiterhin aufgezeichnet.
expandStartHandler Funktion im Erweiterungscodebeispiel oben: Enabler.setStartExpanded(true); if (Enabler.isInitialized()) { drin(); } anders { Enabler.addEventListener (studio.events.StudioEvent.INIT, init); } // Wird ausgeführt, wenn Enabler bereit ist. Funktion init() { if (Enabler.isPageLoaded()) { höflichInit(); } anders { Enabler.addEventListener (studio.events.StudioEvent.PAGE_LOADED, politeInit); } }; // Wird ausgeführt, wenn die Seite vollständig geladen ist. Funktion politeInit(){ Enabler.requestExpand(); }; 
No comments:
Post a Comment