Para desplegar la creatividad, cree un objeto que controle el despliegue según la interacción del usuario. Puede configurarla para que se despliegue cuando un usuario haga clic o desplace el ratón. El ejemplo de este artículo le muestra cómo configurarla para que se expanda cuando el usuario haga clic en cualquier parte del panel contraído.
Crear un botón
Cree un elemento <div> en el archivo HTML y asígnele un ID (por ejemplo, “expand-button”).
Añadir un elemento div nuevo con el ID de “expand-button”.
<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>Aplicar un estilo al botón
Aplique un estilo al objeto que creó con CSS y su ID (“expand-button”).
Código de ejemploUtilizar un CSS para igualar el tamaño del botón del panel contraído y definirlo como invisible.
#expand-button {
position: absolute;
width: inherit;
height: inherit;
opacity: 0;
cursor: pointer;
}Añadir el código de expansión
La expansión de un anuncio es un proceso asíncrono que sigue este orden exacto:
- La creatividad solicita la expansión mediante el método
requestExpand. - Esta solicitud envía el evento
EXPAND_STARTque indica a la creatividad que realice la animación de despliegue (si hay alguna). - Una vez que finaliza la animación de despliegue, la creatividad solicita que finalice el despliegue mediante el método
finishExpand. - Esta solicitud envía el evento
EXPAND_FINISHque indica a la creatividad que ahora puede realizar otras funciones o animaciones en el panel desplegado.
<head>
<script type="text/javascript">
var isExpanded = false;
function expandStartHandler() {
// Perform expand animation.
// (Opcional) Si desea la dirección para el despliegue en la invocación:
// Enabler.getExpandDirection(); //
// Cuando haya finalizado la animación, debe invocar
Enabler.finishExpand();
}
function expandFinishHandler() {
// Devolución de llamada de conveniencia para definir
// estado final cuando esté desplegado.
isExpanded = true;
}
function collapseStartHandler() {
// Realizar animación de contracción.
// Cuando termine la animación, debe invocar
Enabler.finishCollapse();
}
function collapseFinishHandler() {
// Devolución de llamada de conveniencia para definir
// estado final cuando esté contraído.
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>
Opcional: Ampliar automáticamente la creatividad la primera vez que se carga
Algunos editores permiten que las creatividades se abran automáticamente la primera vez que un anuncio se carga en una página. Para ello, utilice el método Enabler setStartExpanded.
expandStartHandler en el ejemplo de código de expansión anterior. Se puede invocar este método antes que el evento INIT del Enabler.Enabler.setStartExpanded(true);