Hoe tabbladen aanmaken (met AngularJS)¶

★★★ Geavanceerd - tijd: 45 minuten

In deze handleiding leert u hoe u tabbladen kunt aanmaken met AngularJS. Deze tabbladen zijn volledig gepersonaliseerd en kunnen in elke dashboard of stuk content gebruikt worden dat op Opendatasoft is aangemaakt met HTML/CSS.

In deze handleiding leert u hoe u 4 AngularJS-richtlijnen moet gebruiken:

ng-if
ng-click
ng-class
ng-init

VOORVEREISTEN

Om deze handleiding uit te testen en/of de tabbladen in een reeds bestaande pagina te integreren, moet u toegang hebben tot de back office van een Opendatasoft-portaal en moet u de toelating “Alle pagina’s bewerken” hebben.
Aangezien deze handleiding aangemerkt staat als “Geavanceerd” in termen van moeilijkheidsgraad, nemen we aan dat u al voldoende vertrouwd bent met HTML en CSS om de structuren ervan te herkennen en te begrijpen en om te weten hoe ze werken. Andere meer technische elementen zullen echter gedetailleerd worden uitgelegd.

Alle afbeeldingen tonen

Alle afbeeldingen verbergen

De structuur aanmaken

1 + In deze handleiding maken we 3 tabbladen aan, waarbij we ervan uitgaan dat elk tabblad bestaat uit een tabbladtitel die kan worden aangeklikt en de content van het tabblad. In onze code zullen we enerzijds de tabbladtitels en anderzijds de tabbladcontent beheren. Laten we beginnen met de structuur van onze tabbladtitels! Plaats elke tabbladtitel in een <a> tag, and all <a> tags into a <div> tag.

Opmerking

Voor deze handleiding kiezen we ervoor om de tabbladtitels omwille van toegankelijkheidsredenen in een <a> tag te plaatsen. Deze tag is ook handig omdat hij toelaat dat alle titels op dezelfde lijn worden weergegeven. Wanneer u denkt voldoende vertrouwd te zijn met HTML/CSS, kunt u uw tabbladtitels in een andere tag plaatsen, maar denk eraan dat u waarschijnlijk meer CSS zal moeten gebruiken om ze er te laten uitzien zoals in deze handleiding.

Opmerking

Afhankelijk van het feit of u deze handleiding uitprobeert op een nieuwe pagina of in een bestaand dashboard, zult u misschien de tags <div class="container"> en <div class="ods-box"> zien: beide zijn standaard tags die het standaard kader van een Opendatasoft-pagina aanmaken. Indien u dit kader wilt behouden, zorg er dan voor dat u de code van de handleiding tussen deze standaard tags toevoegt.

<div class="container-fluid">
  <div class="ods-box">

    <div>
      <a>1st tab title</a>
      <a>2nd tab title</a>
      <a>3rd tab title</a>
    </div>

  </div>
</div>

2 + Rechts onder de tabbladtitels voegen we de content van het tabblad toe. Plaats elk ervan in een <div> tag.

<div class="container-fluid">
  <div class="ods-box">

    <div>
      <a>1st tab title</a>
      <a>2nd tab title</a>
      <a>3rd tab title</a>
    </div>

    <div>
      Content of first tab
    </div>
    <div>
      Content of second tab
    </div>
    <div>
      Content of third tab
    </div>

  </div>
</div>

3 + Nu we de basis hebben zouden we enkele CSS kunnen toevoegen om de tabbladen er te laten uitzien als echte tabbladen. Ga naar de CSS-sectie van de pagina waar u aan werkt.

4 + Maak eerst de standaard CSS-klasse aan die toegepast zal worden op elke tabbladtitel. Hier zult u vooral werken aan de eigenschap “padding” om er zeker van te zijn dat de tabbladen worden gezien als 3 afzonderlijke items. We zullen ook de kleur van de tekst wijzigen.

Opmerking

Voor deze handleiding werden er commentaren toegevoegd in de CSS-code. Ze zijn daar als geheugensteuntje om te weten welke klasse of eigenschap wat doet. Wanneer u met CSS vertrouwd bent, aarzel dan niet om deze commentaren te verwijderen. Merk ook op dat de naam van de CSS-klasse, “tab”, werd gekozen om deze gemakkelijk kan worden gelezen en om te begrijpen op welk HTML-element ze zal worden toegepast. Het staat u evenwel vrij om deze een andere naam te geven.

.tab {
   padding: 10px 20px; /* Gives some space to tab titles */
   color: gray; /* Colors the text in gray */
}

5 + Keer terug naar de HTML-sectie van de pagina waar u aan werkt. Nu de CSS-klasse werd aangemaakt, kunnen we deze toepassen op de HTML-tags waarin de tabbladtitels staan.

<div class="container-fluid">
  <div class="ods-box">

    <div>
      <a class="tab">1st tab title</a>
      <a class="tab">2nd tab title</a>
      <a class="tab">3rd tab title</a>
    </div>

    <div>
      Content of first tab
    </div>
    <div>
      Content of second tab
    </div>
    <div>
      Content of third tab
    </div>

  </div>
</div>

6 + Ten tweede gaan we de content van het tabblad iets meer stijl geven. Deze keer gaan we een reeds bestaande CSS-klasse gebruiken in plaats van een volledige nieuwe aan te maken. “ods-box” is een standaard CSS-stijl in Opendatasoft die de HTML-items met een dunne rand omringt. Het zal ons helpen om de indruk te geven dat de contents van ons tabblad iets “buiten” de rest van de paginacontent ligt. Voeg een <div> tag toe die de contents van alle tabbladen omringt en waarin de CSS-klasse ods-box in zit.

<div class="container-fluid">
  <div class="ods-box">

    <div>
      <a class="tab">1st tab title</a>
      <a class="tab">2nd tab title</a>
      <a class="tab">3rd tab title</a>
    </div>

    <div class="ods-box">
      <div>
        Content of first tab
      </div>
      <div>
        Content of second tab
      </div>
      <div>
        Content of third tab
      </div>
    </div>

  </div>
</div>

7 + Controleer de voorbeeldweergave van uw pagina. We hebben de structuur van onze tabbladen aangemaakt!

Voeg AngularJS toe

8 + Het is nu tijd om AngularJS erbij te betrekken! We moeten 4 AngularJS-richtlijnen gebruiken om onze tabbladen te laten werken. We beginnen met ng-click. Deze richtlijn wordt vooral gebruikt om AngularJS te vertellen wat moet gebeuren wanneer een HTML-element wordt aangeklikt. In ons geval zal ng-click ons toelaten van het ene tabblad naar een ander over te schakelen.

We beginnen bij het begin: laten we een kijkje nemen naar de syntax om te begrijpen hoe we de richtlijn ng-click moeten gebruiken.

ng-click="myvariable = 'myvalue'"

ng-click is de AngularJS-richtlijn. Deze wordt altijd gevolgd door een gelijkheidsteken = dat aangeeft dat wat erna komt, een uitdrukking is. Deze uitdrukking zal worden geëvalueerd door de richtlijn en moet altijd geschreven zijn tussen twee dubbele aanhalingstekens ".

In de uitdrukking zullen we een waarde toekennen aan een variabele. Op dit moment bestaan noch de variabele, noch de waarde. We moeten deze aanmaken.

Eerst komt de variabele. De variabele is een link tussen alle AngularJS-richtlijnen die doorheen deze volledige handleiding zal worden gebruikt. Kies een naam die voor zich spreekt om ervoor te zorgen dat uw code door iemand anders kan worden begrepen. In deze handleiding zullen we de variabele de naam tabselector geven.
Daarna komt een gelijkheidsteken = dat de variabele scheidt van de waarde.
Ten derde komt de waarde. Deze moet altijd geschreven staan tussen enkele aanhalingstekens '. De waarde is de identifier van een tabblad. Elk tabblad dat wordt aangemaakt moet zijn eigen specifieke identifier hebben. Zorg er opnieuw voor dat de naam van de waarde voor zich spreekt. In deze handleiding zullen we 3 waarden hebben voor de 3 tabbladen en zullen we ze de naam firsttab, secondtab en thirdtab geven.

9 + Voeg de richtlijn ng-click toe in de HTML <a> tag van elke tabbladtitel. Op dit moment hebben we aan AngularJS aangegeven dat we 3 verschillende entiteiten hebben die kunnen worden aangeklikt: onze 3 tabbladtitels.

<div class="container-fluid">
  <div class="ods-box">

    <div>
      <a class="tab" ng-click="tabselector = 'firsttab'">1st tab title</a>
      <a class="tab" ng-click="tabselector = 'secondtab'">2nd tab title</a>
      <a class="tab" ng-click="tabselector = 'thirdtab'">3rd tab title</a>
    </div>

    <div class="ods-box">
      <div>
        Content of first tab
      </div>
      <div>
        Content of second tab
      </div>
      <div>
        Content of third tab
      </div>
    </div>

  </div>
</div>

10 + Nu is het de beurt aan ng-if! De richtlijn ng-if is een voorwaardelijke uitdrukking die bepaalt of een HTML-element al dan niet moet worden weergegeven. In ons geval zal ng-if ons toelaten om de juiste tabcontent weer te geven wanneer op een tabbladtitel wordt geklikt.

Laten we een kijkje nemen naar de syntax om te begrijpen hoe we de richtlijn ng-if moeten gebruiken.

ng-if="myvariable == 'myvalue'"

De structuur van de ng-if-richtlijn is dezelfde als die voor ng-click. De naam van de richtlijn wordt gevolgd door een gelijkheidsteken = en de uitdrukking die wordt geëvalueerd door de ng-if-richtlijn wordt geschreven tussen dubbele aanhalingstekens ".

Maar de syntax is iets anders. In de uitdrukking,

De variabele is dezelfde als diegene die we hebben aangemaakt in stap 8.
Het is hier dat de syntax verschillend is: dit keer moeten de variabele en de waarde gescheiden worden door 2 gelijkheidstekens ==. Hiermee wordt aangegeven dat we een voorwaarde uitdrukken.
De waarde (die geschreven staat tussen enkele aanhalingstekens ') is dezelfde als diegene die we aangemaakt hebben in stap 8.

In essentie zou de ng-if-syntax gelezen kunnen worden als volgt: “Wanneer myvariable gelijk is aan myvalue, [de content weergeven van het HTML-element dat overeenstemt met myvalue]”.

11 + Voeg de ng-if-richtlijn toe in de HTML <div> tag van elke tabcontent. Vergeet niet om alle 3 de waarden te plaatsen om overeen te stemmen met de 3 tabcontents. Op dit moment hebben we aan AngularJS aangegeven welke tabcontent moet worden weergegeven afhankelijk van welke tabbladtitel is geselecteerd.

<div class="container-fluid">
  <div class="ods-box">

    <div>
      <a class="tab" ng-click="tabselector = 'firsttab'">1st tab title</a>
      <a class="tab" ng-click="tabselector = 'secondtab'">2nd tab title</a>
      <a class="tab" ng-click="tabselector = 'thirdtab'">3rd tab title</a>
    </div>

    <div class="ods-box">
      <div ng-if="tabselector == 'firsttab'">
        Content of first tab
      </div>
      <div ng-if="tabselector == 'secondtab'">
        Content of second tab
      </div>
      <div ng-if="tabselector == 'thirdtab'">
        Content of third tab
      </div>
    </div>

  </div>
</div>

12 + Het is nu tijd om dieper in te gaan op ng-init! Deze richtlijn wordt gebruikt om een variabele te initialiseren: dit betekent dat wanneer een webpagina wordt opgeladen, de code achter die pagina gelezen gaat worden van de eerste tot de laatste lijn. ng-init zal aangeven dat vanaf dan AngularJS zal worden gebruikt en welke variabele zal worden gebruikt. In ons geval zal ng-init ook gebruikt worden welke tabcontent standaard dient te worden weergegeven.

Laten we een kijkje nemen naar de syntax om te begrijpen hoe de ng-init-richtlijn moet worden gebruikt.

ng-init="myvariable = 'myvalue'"

De syntax van de ng-init-richtlijn is precies dezelfde als voor ng-click (zie stap 8).

In de uitdrukking:

De variabele is dezelfde als diegene die we hebben aangemaakt in stap 8 en die we sindsdien hebben gebruikt.
De waarde (die geschreven staat tussen enkele aanhalingstekens ') is de identifier van het tabblad waarvan de content standaard zal worden weergegeven.

13 + Voeg de ng-init-richtlijn toe in een HTML tag die de volledige code van de tabbladen omringt. Voor deze handleiding en aangezien we een volledig nieuwe pagina hebben aangemaakt, is onze volledige paginacode reeds omringd in 2 standaard kadertags: <div class="container-fluid"> en <div class="ods-box">. Bijgevolg plaatsen we ng-init in de standaard <div class="ods-box"> tag. Op dit moment zijn onze tabbladen volledig functioneel!

Opmerking

Indien u geen volledig nieuwe pagina heeft aangemaakt voor deze handleiding en deze standaard kadertags niet heeft, zou u een gewone <div> tag kunnen toevoegen om de code van de tabbladen te omringen en er een ng-init -richtlijn in kunnen toevoegen.

<div class="container-fluid">
  <div class="ods-box" ng-init="tabselector = 'firsttab'">

    <div>
      <a class="tab" ng-click="tabselector = 'firsttab'">1st tab title</a>
      <a class="tab" ng-click="tabselector = 'secondtab'">2nd tab title</a>
      <a class="tab" ng-click="tabselector = 'thirdtab'">3rd tab title</a>
    </div>

    <div class="ods-box">
      <div ng-if="tabselector == 'firsttab'">
        Content of first tab
      </div>
      <div ng-if="tabselector == 'secondtab'">
        Content of second tab
      </div>
      <div ng-if="tabselector == 'thirdtab'">
        Content of third tab
      </div>
    </div>

  </div>
</div>

14 + Controleer de voorbeeldweergave. Hoewel onze tabbladen nu volledig werken, ontbreekt er nog altijd iets. Er is niets dat aangeeft welk tabblad is geselecteerd! Laten we dit nu doen, te beginnen met aanmaken van een stijl “geselecteerd tabblad”.

15 + Keer terug naar de CSS-sectie van de pagina waar u aan werkt om een afzonderlijke stijl aan te maken die gemakkelijk aangeeft welk tabblad is geselecteerd. We zullen deze CSS-klasse hier activetab noemen en met zowel de tekstkleur als een dikke rand onder de tekst spelen.

.activetab {
   color: black; /* Colors the text in black */
   border-bottom: 3px solid #2d2d2d; /* Underlines the text with a bold dark border */
}

16 + Keer terug naar de HTML-sectie van de pagina waar u aan werkt. We gaan nu onze CSS-stijl toepassen door gebruik te maken van onze vierde (en laatste) AngularJS-richtlijn: ng-class. Deze richtlijn is een voorwaardelijke uitdrukking die bepaalt of een CSS-klasse op een HTML-element zal worden toegepast of niet. In ons geval zal ng-class worden gebruik om een welbepaalde stijl toe te passen op een tabbladtitel wanneer deze wordt geselecteerd.

Laten we een kijkje nemen naar de syntax om te begrijpen hoe we de richtlijn ng-class moeten gebruiken.

ng-class="{'mycssclass' : myvariable == 'myvalue'}"

De structuur van de ng-class-richtlijn is dezelfde als voor de andere richtlijnen: de naam van de richtlijn wordt rechts erachter gevolgd door een gelijkheidsteken``=`` en de uitdrukking die geëvalueerd zal worden door de richtlijn, wordt geschreven tussen dubbele aanhalingstekens ".

Maar dit is hoe de uitdrukking er zou moeten uitzien voor deze richtlijn:

De uitdrukking moet ook tussen accolades {} staan.
Tussen de accolades {} komt eerst de naam van de CSS-klasse die gebruikt zou moeten worden. Deze moet tussen enkele aanhalingstekens ' geschreven zijn.
Vlak achter de naam van de CSS-klasse moet er een dubbele punt``:`` staan.
Dan volgt het deel variabele/waarde dat precies hetzelfde is zoals de ng-if-uitdrukking (zie stap 10). We zouden de naam van de variabele alsook de naam van de waarde (geschreven tussen enkele aanhalingstekens ' moeten terugvinden. De variabele en de waarde moeten gescheiden zijn door 2 gelijkheidstekens ==.

In essentie zou de ng-class-syntax als volgt kunnen worden gelezen: “mycssclass moet gebruikt worden wanneer myvariable gelijk is aan myvalue”.

17 + Voeg de ng-class-richtlijn toe in de HTML <a> tag van elke tabbladtitel. Vergeet niet om alle 3 de waarden te plaatsen om overeen te stemmen met de 3 tabbladtitels.

<div class="container-fluid">
  <div class="ods-box" ng-init="tabselector = 'firsttab'">

    <div>
      <a class="tab" ng-click="tabselector = 'firsttab'" ng-class="{'activetab' : tabselector == 'firsttab'}">1st tab title</a>
      <a class="tab" ng-click="tabselector = 'secondtab'" ng-class="{'activetab' : tabselector == 'secondtab'}">2nd tab title</a>
      <a class="tab" ng-click="tabselector = 'thirdtab'" ng-class="{'activetab' : tabselector == 'thirdtab'}">3rd tab title</a>
    </div>

    <div class="ods-box">
      <div ng-if="tabselector == 'firsttab'">
        Content of first tab
      </div>
      <div ng-if="tabselector == 'secondtab'">
        Content of second tab
      </div>
      <div ng-if="tabselector == 'thirdtab'">
        Content of third tab
      </div>
    </div>

  </div>
</div>

Voltooi de tabbladen

18 + Onze ng-class-richtlijn werkt! Maar het is niet echt mooi, nietwaar? Laten we terugkeren naar de CSS-sectie om de finishing touch toe te voegen. Hier gaan we extra ruimte toevoegen rond de tabbladtitels om te vermijden dat de rand in de ruimte van de tabcontent valt. We gaan ook de mogelijke selectie van een tabbladtitel beklemtonen door een specifieke stijl op te bouwen die enkel zichtbaar is wanneer de muiscursor over de tabbladtitels wordt bewogen.

.tabs {
   margin: 1em; /* Adds lots of space around the tabs, to avoid the border to fall into the tab content area */
}

/* Only visible when the mouse is on a tab title */
.tab:hover {
   color: black; /* Colors the text in black to highlight the possible selection */
   text-decoration: none; /* Removes the hyperlink underline style */
}

19 + Keer terug naar de HTML-sectie om de volledig nieuwe CSS-stijl toe te passen. Onze CSS-klasse tabs zal het bijzonder goed doen in de tag div die alle tabbladtitels omringt. Wat tab:hover betreft, aangezien deze bovenop de belangrijkste CSS-klasse tab is gebouwd, wordt deze automatisch toegepast op de HTML-elementen met de CSS-klasse tab.

<div class="container">
  <div class="ods-box" ng-init="tabselector = 'firsttab'">

    <div class="tabs">
      <a class="tab"
         ng-click="tabselector = 'firsttab'"
         ng-class="{'activetab' : tabselector == 'firsttab'}">1st tab title</a>
      <a class="tab"
         ng-click="tabselector = 'secondtab'"
         ng-class="{'activetab' : tabselector == 'secondtab'}">2nd tab title</a>
      <a class="tab"
         ng-click="tabselector = 'thirdtab'"
         ng-class="{'activetab' : tabselector == 'thirdtab'}">3rd tab title</a>
    </div>

    <div class="ods-box">
      <div ng-if="tabselector == 'firsttab'">
        Content of first tab
      </div>
      <div ng-if="tabselector == 'secondtab'">
        Content of second tab
      </div>
      <div ng-if="tabselector == 'thirdtab'">
        Content of third tab
      </div>
    </div>

  </div>
</div>

20 + Klaar! We hebben onze volledig eigen tabbladen aangemaakt! Het enige wat we nu nog moeten doen is elke voorbeeldtekst vervangen door echte content.

Het staat u volledig vrij om de tabbladtitels te kiezen en om uw eigen tabcontents toe te voegen. Voor deze handleiding zullen we de tabbladen vervolledigen door gebruik te maken van de Shanghai World University Ranking dataset. Het eerste tabblad zal de weergave van het tabblad bevatten, het tweede tabblad zal een kaart bevatten die aangemaakt is met de Map Builder en het derde tabblad zal een grafiekweergave bevatten. Elke tabbladtitel zal natuurlijk aangeven waar de tabcontent over gaat en ze zullen worden voorafgegaan door een Font Awesome icoon (net om het iets pittiger te maken!).

<ods-dataset-context context="worlduniversityranking"
worlduniversityranking-dataset="shanghai-world-university-ranking@public">

<div class="container">
  <div class="ods-box" ng-init="tabselector = 'firsttab'">

    <div class="tabs">
      <a class="tab"
         ng-click="tabselector = 'firsttab'"
         ng-class="{'activetab' : tabselector == 'firsttab'}"><i class="fa fa-list-ol" aria-hidden="true"></i>
      Full list</a>
      <a class="tab"
         ng-click="tabselector = 'secondtab'"
         ng-class="{'activetab' : tabselector == 'secondtab'}"><i class="fa fa-map" aria-hidden="true"></i>
      World map</a>
      <a class="tab"
         ng-click="tabselector = 'thirdtab'"
         ng-class="{'activetab' : tabselector == 'thirdtab'}"><i class="fa fa-area-chart" aria-hidden="true"></i>
      Top 20 ranking</a>
    </div>

    <div class="ods-box">
      <div ng-if="tabselector == 'firsttab'">
        <h3>
          University list
        </h3>
        <h5>
          Sorted by rank
        </h5>
        <ods-table context="worlduniversityranking"></ods-table>
      </div>
      <div ng-if="tabselector == 'secondtab'">
        <h3>
          University map
        </h3>
        <h5>
          Colored by # of university
        </h5>
        <ods-map no-refit="true"
                 scroll-wheel-zoom="false"
                 display-control="false"
                 search-box="false"
                 toolbar-fullscreen="false"
                 toolbar-geolocation="false"
                 basemap="mapbox.light">
        <ods-map-layer-group>
          <ods-map-layer context="worlduniversityranking"
                         color-numeric-ranges="{'15':'#FFFFFF','50':'#C8CDE3','200':'#929BC8','400':'#5C69AD','2500':'#263892'}"
                         color-undefined="#1B5AA5"
                         color-out-of-bounds="#1BA566"
                         color-numeric-range-min="1"
                         display="choropleth"
                         function="COUNT"
                         expression="total_score"
                         shape-opacity="0.8"
                         point-opacity="1"
                         border-color="#555555"
                         border-opacity="0.8"
                         border-size="1"
                         border-pattern="solid"
                         caption="true"
                         title="Shanghai world university ranking"></ods-map-layer>
        </ods-map-layer-group>
      </ods-map>
    </div>
    <div ng-if="tabselector == 'thirdtab'">
      <h3>
        Top 20 university
      </h3>
      <h5>
        by average score
      </h5>
      <ods-chart single-y-axis="true"
                 single-y-axis-label="University average score"
                 display-legend="false"
                 labels-x-length="35"
                 align-month="true">
      <ods-chart-query context="worlduniversityranking"
                       field-x="university_name"
                       maxpoints="20"
                       sort="serie1-1">
      <ods-chart-serie expression-y="total_score"
                       chart-type="column"
                       function-y="AVG"
                       color="#263892"
                       display-units="false"
                       display-values="true">
    </ods-chart-serie>
  </ods-chart-query>
</ods-chart>
</div>
</div>

</div>
</div>

</ods-dataset-context>

GEFELICITEERD!

U heeft deze handleiding volledig doorlopen en weet nu hoe u tabbladen moet aanmaken met behulp van AngularJS. Hopelijk bent u nu voldoende vertrouwd met ng-click, ng-if, ng-init en ng-class om deze later zelfstandig opnieuw te kunnen gebruiken!