Gå til sidens indhold

Kode

Faneblade

Indhold 2

Mauris tempor, tellus a laoreet finibus, neque metus hendrerit augue, ac lacinia nisl dolor et augue. Ut lorem massa, consequat ut orci sit amet, maximus dictum orci. Mauris pharetra nunc sed augue bibendum semper. Donec in cursus orci. Ut sed posuere elit, quis semper turpis. Curabitur malesuada nisi nec nisl facilisis ornare. Praesent vestibulum, velit id sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem massa eget urna.

Eksempler og retningslinjer

Installation

HTML Struktur

<div class="tabnav" role="tablist">

    <button aria-controls="tabpanel1" id="tab1" class="tabnav-item"
        role="tab" aria-selected="false">
        <span>Fane 1</span>
    </button>
    <section class="tabnav-panel" aria-hidden="true" role="tabpanel"
        tabindex="0" id="tabpanel1" aria-labelledby="tab1">
        <h2>Indhold 1</h2>
        <p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit
            augue, ac lacinia nisl dolor et augue. Ut lorem massa,
            consequat ut orci sit amet, maximus dictum orci. Mauris
            pharetra nunc sed augue bibendum semper. Donec in cursus orci.
            Ut sed posuere elit, quis semper turpis. Curabitur malesuada
            nisi nec nisl facilisis ornare. Praesent vestibulum, velit id
            sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem
            massa eget urna.</p>
    </section>

    <button aria-controls="tabpanel2" id="tab2" class="tabnav-item"
        role="tab" aria-selected="true">
        <span>Fane 2</span>
    </button>

    <section class="tabnav-panel" aria-hidden="false" role="tabpanel"
        tabindex="0" id="tabpanel2" aria-labelledby="tab2">
        <h2>Indhold 2</h2>
        <p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit
            augue, ac lacinia nisl dolor et augue. Ut lorem massa,
            consequat ut orci sit amet, maximus dictum orci. Mauris
            pharetra nunc sed augue bibendum semper. Donec in cursus orci.
            Ut sed posuere elit, quis semper turpis. Curabitur malesuada
            nisi nec nisl facilisis ornare. Praesent vestibulum, velit id
            sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem
            massa eget urna.</p>
    </section>

    <button aria-controls="tabpanel3" id="tab3" class="tabnav-item"
        role="tab" aria-selected="false">
        <span>Fane 3</span>
    </button>
    <section class="tabnav-panel" aria-hidden="true" role="tabpanel"
        tabindex="0" id="tabpanel3" aria-labelledby="tab3">
        <h2>Indhold 3</h2>
        <p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit
            augue, ac lacinia nisl dolor et augue. Ut lorem massa,
            consequat ut orci sit amet, maximus dictum orci. Mauris
            pharetra nunc sed augue bibendum semper. Donec in cursus orci.
            Ut sed posuere elit, quis semper turpis. Curabitur malesuada
            nisi nec nisl facilisis ornare. Praesent vestibulum, velit id
            sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem
            massa eget urna.</p>
    </section>

    <button aria-controls="tabpanel4" id="tab4" class="tabnav-item"
        role="tab" aria-selected="false">
        <span>Fane 4</span>
    </button>
    <section class="tabnav-panel" aria-hidden="true" role="tabpanel"
        tabindex="0" id="tabpanel4" aria-labelledby="tab4">
        <h2>Indhold 4</h2>
        <p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit
            augue, ac lacinia nisl dolor et augue. Ut lorem massa,
            consequat ut orci sit amet, maximus dictum orci. Mauris
            pharetra nunc sed augue bibendum semper. Donec in cursus orci.
            Ut sed posuere elit, quis semper turpis. Curabitur malesuada
            nisi nec nisl facilisis ornare. Praesent vestibulum, velit id
            sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem
            massa eget urna.</p>
    </section>

    <button aria-controls="tabpanel5" id="tab5" class="tabnav-item"
        role="tab" aria-selected="false">
        <span>Fane 5</span>
    </button>
    <section class="tabnav-panel" aria-hidden="true" role="tabpanel"
        tabindex="0" id="tabpanel5" aria-labelledby="tab5">
        <h2>Indhold 5</h2>
        <p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit
            augue, ac lacinia nisl dolor et augue. Ut lorem massa,
            consequat ut orci sit amet, maximus dictum orci. Mauris
            pharetra nunc sed augue bibendum semper. Donec in cursus orci.
            Ut sed posuere elit, quis semper turpis. Curabitur malesuada
            nisi nec nisl facilisis ornare. Praesent vestibulum, velit id
            sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem
            massa eget urna.</p>
    </section>

    <button aria-controls="tabpanel6" id="tab6" class="tabnav-item"
        role="tab" aria-selected="false">
        <span>Fane 6</span>
    </button>
    <section class="tabnav-panel" aria-hidden="true" role="tabpanel"
        tabindex="0" id="tabpanel6" aria-labelledby="tab6">
        <h2>Indhold 6</h2>
        <p>Mauris tempor, tellus a laoreet finibus, neque metus hendrerit
            augue, ac lacinia nisl dolor et augue. Ut lorem massa,
            consequat ut orci sit amet, maximus dictum orci. Mauris
            pharetra nunc sed augue bibendum semper. Donec in cursus orci.
            Ut sed posuere elit, quis semper turpis. Curabitur malesuada
            nisi nec nisl facilisis ornare. Praesent vestibulum, velit id
            sollicitudin auctor, ipsum lacus auctor nisl, in lacinia sem
            massa eget urna.</p>
    </section>

</div>

JavaScript

Hvis en komponent først bliver tilføjet på siden efter pageload, så vil der være stor sandsynlighed for at komponenten ikke virker optimalt, da events ikke er blevet sat.

Hvis man står i denne situation kan man definere denne komponent i JavaScript således:

new DKFDS.Tabnav(document.getElementByID('TABNAV-ID'));

Bemærk, at dette kun gælder fra version 5.0.0.

Events

Når man vælger et nyt faneblad, bliver eventet fds.tabnav.changed udløst på .tabnav elementet, som man kan koble sig på med en eventlistener.

Når et faneblad åbnes, bliver eventet fds.tabnav.open udløst på det tilhørende .tabnav-item menu element, som man kan koble sig på med en eventlistener.

Når et faneblad lukkes, bliver eventet fds.tabnav.close udløst på det tilhørende .tabnav-item menu element, som man kan koble sig på med en eventlistener.