Terug

3. NewsPaper-plugin

Werkend voorbeeld:  https://www.schoolvoorbeeld.be/websites/plugins/newspaper.php

Met de NewsPaper-plugin kan je een reeks artikels verbergen en via een selectielijst (een vervolgkeuzelijst) die weer één voor één lezen. Dat maakt de inhoud van je pagina's minder zwaar. Het opsplitsen en verbergen van de informatie op je webpagina, maakt het voor bezoekers eveneens gebruiksvriendelijker. 


1. Integreer jQuery in je webpagina

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>   

2. Integreer de plugin. 

Plak deze link onder die van jQuery, allebei in de <head>-sectie van de pagina waarin je het effect wil bereiken. 

<script src="https://www.schoolvoorbeeld.be/js/jslibnew.js?v7"></script>

3. Je HTML voorbereiden

Maak in je HTML-pagina een onderdeel dat een aantal <article>-elementen bevat.

Bijvoorbeeld:

<section class="newspaper">
         <article>
                  <h3>Titel van dit artikel</h3>
                  <p>Inhoud van dit artikel.
        </article>
        <article>
                  <h3>Titel van dit artikel</h3>
                  <p>Inhoud van dit artikel.
        </article>
        <article>
                  <h3>Titel van dit artikel</h3>
                  <p>Inhoud van dit artikel.
        </article>
</section>

We hebben aan het element de CSS-klasse "newspaper" gegeven, maar dat mag je uiteraard zelf beslissen. Het hoeft ook geen <section>-element te zijn, het mag ook gewoon gaan om een <div>.

4. Het script invoeren

<script>
$(document).ready(function(){
        $(".newspaper").newspaper();
});
</script>

Klaar is kees... Je kan alles natuurlijk ook nog wat "vormgeven" met CSS.

5. Opties

Standaard gaat de plugin op zoek naar <article>-elementen. Wil je andere elementen zichtbaar en onzichtbaar maken, dan moet je de opties van de plugin wijzigen. Standaard neemt de plugin het eerste <h3>-element dat hij in het <article> vindt, als titel voor de selectielijst. Ook dat kan je wijzigen. Als de plugin geen titel vindt, dan nummert hij de lijst.

<script>
$(document).ready(function(){
       $(".newspaper").newspaper({
              element: "div",
              title:"h1",
              text: "Kies het gewenste artikel"
       });
});
</script>
OptieDoelWaardeStandaard

element

Standaard zoekt de plugin <article>-elementen. Je kan dit vervangen door een ander element.p, div, li...article

title

Standaard zoekt de plugin naar de eerste <h3> in elk "artikel". Je kan die waarde veranderen.h1, h2, h4...h3

text

De titel van de vervolgkeuzelijst.Een tekst tussen aanhalingstekens."Kies een artikel"
home