AdTabs Component

Updated: 16/08/2017. Version: 1.5.5

Example of AdTabs Component:

Template in Adform HTML STUDIO

Description

Here you will find information on how to setup and customize AdTabs component.

Initialization

To start with AdTabs Component, load it into your index.hmtl document.

<head>
...

<script src="//s1.adform.net/banners/scripts/components/Adform.AdTabs.js"></script>

...
</head>

If video is being used, make sure that video player component is initialized in your index.html document.

<script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>

More information about Video Player can be found in Video Player documentation.

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’ }

Optional Settings

The following settings are not mandatory and have default values:

Parameter Type Default Description
expOnRollover boolean false enable expand on rollover
videoPanelIndex integer 1 index of panel containing video
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 below:

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>
        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/components/styles/Adform.Styles-1.css" />
    <link rel="stylesheet" href="styles/custom.css">
</head>
<body>
    <div id="adf-banner" class="adf-Banner u-sizeFull">

        <!-- Banner contents -->
        <div class="adf-Tabs u-vCentered">
            <div class="adf-Tab"></div>
            <div class="adf-Tab"></div>
            <div class="adf-Tab"></div>
        </div>

        <div class="adf-Panels">
            <div class="adf-Panel u-sizeFull">
                <div id="adf-click-area" class="adf-ClickArea"></div>
                <div id="adf-video" class="Adform-video u-centered"></div>
            </div>
            <div class="adf-Panel u-sizeFull">
                <div id="adf-click-area" class="adf-ClickArea"></div>
            </div>
            <div class="adf-Panel u-sizeFull">
               <div id="adf-click-area" class="adf-ClickArea"></div>
            </div>
        </div>

        <!-- Close button - do NOT remove this element -->
        <div id="adf-close-button" class="adf-Button adf-Close">
            Close
        </div>
        <!-- Banner contents end -->

    </div>

    <!-- Components -->
    <script src="//s1.adform.net/banners/scripts/components/Adform.AdTabs.js"></script>
    <script src="//s1.adform.net/banners/scripts/components/Adform.VideoPlayer.js"></script>
    <script src="scripts/custom.js"></script>
    <!-- Components -->

    <!-- User code -->
    <script>
    (function() {

        var settings = {
            expOnRollover: false, // Set to true to enable expand on rollover

            /* PANELS AND TABS ARRAY */
            tabs: [{
                big: Adform.getAsset(4),
                small: Adform.getAsset(5),

                clicktag: Adform.getClickURL("clickTAG"),
            }, {
                big: Adform.getAsset(6),
                small: Adform.getAsset(7),

                clicktag: Adform.getClickURL("clickTAG2"),
            }, {
                big: Adform.getAsset(8),
                small: Adform.getAsset(9),

                clicktag: Adform.getClickURL("clickTAG3"),
            }],
            /* PANELS AND TABS ARRAY */
        }

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

Exposed methods

expand - expand panel

collapse - collapse panel