jQuery Plugin – MyNewTabs (1): HTML Mark-up

Op een van mijn eerste berichten kreeg ik onlangs een leuke reactie. Uit de voortvloeiende discussie kwam naar voren dat het misschien wel leuk zou zijn om eens wat te schrijven over het bouwen van een jQuery plugin, in het Nederlands. Aangezien ik toch al langer van plan was me eens in jQuery plugins te gaan verdiepen (ik gebruik jQuery vrij veel maar ben nog nooit eraan toegekomen een plugin te schrijven) ben ik in de materie gedoken.

De uitdaging

In zo’n geval is het wel handig als je een echt probleem (of uitdaging!) hebt om de plugin op uit te testen. Dat had ik hier wel voor. Ik wilde een responsive tabsysteem maken dat op mobiel meer lijkt op een accordeon en op een desktop meer op gewone tabs (wel verticaal). Als ik dit niet duidelijk genoeg heb uitgelegd, check dan de demo of de code (vergeet niet je browser smal te maken):

De start: HTML mark-up

Een echte plugin bestaat vaak uit een stukje verplichte HTML mark-up, een (of meerdere) CSS stylesheets en natuurlijk het kloppend hart: lappen javascript/jQuery code. Vandaag beginnen we eenvoudig: met de mark-up. Wat hebben we hier voor nodig? Een unordered list (binnen een div met dezelfde class) voor de tabs en een div gevuld met een titel en wat tekst. Eromheen nog een wrapper div om de boel bij elkaar te houden.

<div class="mynewtabs-cntr content-wrapper">
    <div class="list">
        <ul class="list">
            <li class="active"><a class="active" href="#">Tab 1</a></li>
            <li class="nonactive"><a href="#">Tab 2</a></li>
            <li class="nonactive"><a href="#">Tab 3</a></li>
            <li class="nonactive"><a href="#">Tab 4</a></li>
        </ul>
    </div>
    <div class="descr">
        <!-- What you put in here is entirely up to you -->
        <h2>Titel | Tabblad 1</h2>
        <p>
            Donec pretium ligula elit, vitae sagittis diam tincidunt in. Vivamus at ante accumsan, convallis 
            erat nec, ultricies turpis. Etiam sit amet posuere eros. Curabitur tristique lacus eu ligula 
            pellentesque vulputate. Praesent suscipit urna ut tristique mollis.
            Quisque fermentum augue at eros imperdiet, pulvinar pulvinar nulla rutrum. In in accumsan elit, 
            at placerat diam.
        </p>
    </div>
</div>

Verplichte classes

Het is belangrijk dat je de eerste div binnen de wrapper en de unordered list een class “list” meegeeft. Daarnaast geef je de actieve li (en de link erbinnen) een class “active”. Deze classes zijn voor de CSS zodat alles er netjes uitziet. Ze worden later ook in de javascript gebruikt, maar dat komt, zoals gezegd, later. Ook de div waarin de content staat heeft een verplichte class “descr”. Wat je verder binnen die div zet is aan jou.

Tenslotte

De plugin die we hier bouwen gaat ervanuit dat elke tab zijn eigen pagina heeft. Dit hebben we zo gedaan om ze allemaal hun eigen URL te geven en het betekent ook dat als je op een andere tab klikt, we naar een echt andere pagina gaan, waarop de plugin ook moet worden toegepast. Dat is uiteindelijk geen bezwaar door gebruik te maken van de classes en de javascript onderaan je pagina te zetten (later meer hierover). Natuurlijk is het mogelijk om de inhoud van alle tabbladen al hier in de mark-up te zetten. Het tonen van de juiste inhoud per tabblad kan dan met behulp van javascript gedaan worden: je verbergt de inactieve en toont de actieve li. Tenslotte is het ook mogelijk om de inhoud van de tabs van de server te halen met behulp van wat PHP en als je dat leuk vindt AJAX. Maar dat behandelen we hier niet, het gaat puur om de plugin op zich.

Volgende stap

De volgende keer gaan we de CSS bespreken die bij deze plugin hoort. Je hebt vast al in de demo zitten klikken en gezien dat de achtergrond kleur van de tabs veranderen. Dat is een optie die we meegeven, ook dat bespreken we een volgende keer!

Alvast verder lezen

jQuery learning center
Een jQuery plugin tutorial in het Engels


Mijn Twitter profiel Mijn Facebook profiel
Pim Hooghiemstra Webdeveloper and founder of PLint-sites. Loves to build complex webapplications using Vue and Laravel! Laatste bericht
Sorting table dates in a Vue CLI project

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *