AdTabs Component Documentation

AdTabs:

Template in Adform HTML STUDIO

Description

This is a highly customizable and very easy to use AdTabs template.

Initialization

To start with AdTabs Component, you have to load it into your document.

<!-- Components -->
    <script src="scripts/Adf.AdTabs.v1.0.1.js"></script>
<!-- Components -->

Then, add Adf.AdTabs.v1.0.1.js file into scripts folder.

Mandatory Settings

These are the properties that have to be set in order to complete the setup of AdTabs component:

Parameter	Type	Default	Description
`tabs`	array	[]	array of objects containing one panel info, like: { big: ‘imageSrc’, small: ‘imageSrc’, clicktag: ‘URL’, target: ‘landingPageTarget’ }

Optional Settings

The following settings are not mandatory and have default values.

Parameter	Type	Default	Description
`expandTime`	integer	1000	duration of time in ms for expand animation
`collapseTime`	integer	1000	duration of time in ms for collapse animation
`collapsedWidth`	integer	80	size in pixels of collapsed width
`collapsedHeight`	integer	240	size in pixels of collapsed height

Events

AdTabs.on() and AdTabs.off() methods should be used to add or remove AdTabs event listeners. All the available events are listed bellow.

Event	Value	Description
`AdTabs.EXPAND`	‘panelExpand’	Event is emitted on AdTabs panel expand start
`AdTabs.COLLAPSE`	‘panelCollapse’	Event is emitted on AdTabs panel collapse start
`AdTabs.EXPANDED`	‘panelExpanded’	Event is emitted on AdTabs panel expand end
`AdTabs.COLLAPSED`	‘panelCollapsed’	Event is emitted on AdTabs panel collapse end
`AdTabs.CLICKTAG_FIRED`	‘clicktagFired’	Event is emitted on clickTag fire

Example

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>AdTabs (v 1.5)</title>
<script>
    var preloadQueue = ['SingleExpanding', 'VideoPlayer'];
        document.write('<script src="' + (window.API_URL || 'https://s1.adform.net/Banners/scripts/rmb/Adform.DHTML.js?bv=' + Math.random()) + '"><\/script>');
</script>
<link rel="stylesheet" href="//s1.adform.net/Banners/Scripts/assets/css/adform.reset.v1.css">
<link rel="stylesheet" href="//s1.adform.net/Banners/Scripts/assets/css/adform.base.v2.css">
<link rel="stylesheet" href="styles/custom.css">
</head>
<body>
<div id="banner">

    <div class="adf-Tabs">
        <div class="adf-Tab"></div>
        <div class="adf-Tab"></div>
        <div class="adf-Tab"></div>
    </div>

    <div class="adf-Panels">
        <div class="adf-Panel">
            <div class="adf-ClickArea u-fullWidthHeight"></div>
            <div id="video" class="Adform-video"></div>
        </div>
        <div class="adf-Panel">
            <div class="adf-ClickArea u-fullWidthHeight"></div>
        </div>
        <div class="adf-Panel">
            <div class="adf-ClickArea u-fullWidthHeight"></div>
        </div>
    </div>

    <div id="close-button" style="display: none;"></div>
</div>
<!-- Components -->
    <script src="//s1.adform.net/Banners/Scripts/assets/js/adform.base.v1.js"></script>
    <script src="scripts/Adf.AdTabs.v1.0.1.js"></script>
<!-- Components -->

<script>
    var settings = {};
    Adf.AdTabs.init(settings);
</script>

Exposed methods

expand - expand panel
collapse - collapse panel