Tabs erstellen (mit AngularJS)¶

★★★ Sachkundige - Dauer: 45 Minuten

In diesem Tutorial erfahren Sie, wie Sie Tabs mit AngularJS erstellen können. Diese Tabs sind komplett anpassbar und wiederverwendbar in jedem Dashboard oder Inhalt, der mit HTML/CSS auf Opendatasoft erstellt wurde.

In diesem Tutorial erfahren Sie, wie Sie 4 AngularJS-Richtlinie verwenden:

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

VORRAUSSETZUNGEN

Um dieses Tutorial zu testen und/oder die Tabs in eine bereits bestehende Seite zu integrieren, benötigen Sie Zugriff auf das Backoffice eines Opendatasoft-Portals und die Berechtigung “Alle Seiten bearbeiten”.
Dieses Tutorial fällt unter den Schwierigkeitsgrad “Sachkundige”. Deshalb gehen wir davon aus, dass Sie HTML und CSS bereits ausreichend kennen, um ihre Strukturen und Funktionsweise zu erkennen und zu verstehen. Andere eher technische Elemente werden jedoch genauer erläutert.

Alle Bilder anzeigen

Alle Bilder verbergen

Erstellen Sie die Struktur

1 + In diesem Tutorial werden wir 3 Tabs erstellen, wobei jeder Tab aus einem anklickbaren Titel und dem Inhalt des Tabs besteht. Beginnen wir mit der Struktur unserer Tab-Titel! Fügen Sie jeden Tab-Titel in einen <a>-Tag ein und alle <a>-Tags in ein <div>-Tag.

Hinweis

Für dieses Tutorial haben wir uns aus praktischen Gründen dazu entscheiden, den Tab in ein <a>-Tag einzufügen. Außerdem ermöglicht dieses Tag, alle Titel in derselben Zeile anzuzeigen. Wenn Sie sich mit HTML/CSS auskennen, können Sie Ihre Tab-Titel in ein anderes Tag einfügen. In diesem Fall müssen Sie jedoch wahrscheinlich mehr CSS verwenden, damit sie wie in diesem Tutorial aussehen.

Hinweis

Je nachdem, ob Sie dieses Tutorial auf einer neuen Seite oder in einem bestehenden Dashboard ausprobieren, sehen Sie ggf. die Tags <div class="container"> und <div class="ods-box">: bei beiden handelt es sich um Standard-Tags, die den Standardrahmen einer Opendatasoft-Seite bilden. Wenn Sie diesen Rahmen beibehalten möchten, stellen Sie sicher, dass Sie den Code des Tutorials zwischen diese Standard-Tags einfügen.

<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 unter den Tab-Titeln können Sie die Tab-Inhalte hinzufügen. Fügen Sie sie jeweils in ein <div>-Tag ein.

<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 + Nun, da wir die Basis haben, sollten wir etwas CSS hinzufügen, damit die Tabs wie richtige Tabs aussehen. Öffnen Sie den CSS-Bereich der Seite, an der Sie gerade arbeiten.

4 + Erstellen Sie zunächst die Standard-CSS-Klasse, die für jeden Tab-Titel angewendet wird. An dieser Stelle arbeiten wir insbesondere mit der Eigenschaft padding, um sicherzustellen, dass die Tabs als 3 separate Elemente dargestellt werden. Außerdem ändern wir die Farbe des Texts.

Hinweis

Für dieses Tutorial wurden Kommentare in den CSS-Code eingefügt. Diese sollen Sie daran erinnern, welche Funktionen die unterschiedlichen Klassen oder Eigenschaften haben. Wenn Sie sich gut mit CSS auskennen, können Sie diese Kommentare entfernen. Beachten Sie auch, dass der Name der CSS-Klasse “Tab” gewählt wurde, weil damit leicht zu verstehen ist, auf welches HTML-Element er angewendet wird. Sie können den Namen gerne ändern.

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

5 + Wechseln Sie zurück zum HTML-Bereich der Seite, an der Sie gerade arbeiten. Nachdem die CSS-Klasse erstellt wurde, können wir sie auf die HTML-Tags anwenden, welche die Tab-Titel beinhalten.

<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 + Anschließend verleihen wir dem Inhalt des Tabs etwas mehr Stil. Anstatt eine völlig neue CSS-Klasse zu erstellen, werden wir diesmal eine bereits bestehende verwenden. ods-box ist ein standardmäßiger Opendatasoft-CSS-Stil, der die HTML-Elemente mit einen dünnen Rand umgibt. Damit wird der Eindruck erweckt, dass unser Tab-Inhalt ein wenig “außerhalb” des restlichen Seiteninhalts liegt. Fügen Sie ein <div>-Tag hinzu, das den gesamten Tab-Inhalt umgibt, einschließlich der CSS-Klasse ods-box.

<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 + Sehen Sie sich die Vorschau Ihrer Seite an. Wir haben die Struktur unserer Tabs erstellt!

AngularJS hinzufügen

8 + Es ist jetzt an der Zeit, dass AngularJS ins Spiel kommt! Wir müssen 4 AngularJS-Richtlinien einsetzen, damit unsere Tabs funktionieren. Beginnen wir mit ng-click. Diese Richtlinie wird im Wesentlichen verwendet, um AngularJS mitzuteilen, was es tun soll, wenn auf ein HTML-Element geklickt wird. In unserem Fall ermöglicht uns ng-click von einem Tab zum anderen zu wechseln.

Zunächst werfen wir einen Blick auf die Syntax, um zu verstehen, wie man die Richtlinie ng-click verwendet.

ng-click="myvariable = 'myvalue'"

ng-click ist eine AngularJS-Richtlinie. Darauf folgt immer ein Gleichheitszeichen =. Es weist auf einen folgenden Ausdruck hin. Dieser Ausdruck wird von der Richtlinie ausgewertet und muss immer in doppelten Anführungszeichen geschrieben werden ".

Im Ausdruck weisen wir einer Variablen einen Wert zu. Zurzeit existiert weder die Variable noch der Wert, deshalb müssen wir sie erstellen.

Zunächst kommt die Variable. Die Variable ist die Verbindung zwischen allen AngularJS-Richtlinien, die in diesem Tutorial verwendet werden. Wählen Sie einen selbsterklärenden Namen, damit Ihr Code von anderen verstanden wird. In diesem Tutorial nennen wir die Variable tabselector.
Anschließend kommt ein Gleichheitszeichen =`, das die Variable vom Wert trennt.
Als drittes kommt der Wert. Er muss immer zwischen einfachen Anführungszeichen (') geschrieben werden. Der Wert ist die Kennung eines Tabs. Auch hier ist darauf zu achten, dass der Name des Wertes selbsterklärend ist. In diesem Tutorial haben wir 3 Werte für die 3 Tabs und wir nennen sie firsttab, secondtab und thirdtab.

9 + Fügen Sie die Richtlinie ng-click im HTML <a>-Tag jedes Tab-Titels hinzu. Zu diesem Zeitpunkt haben wir AngularJS mitgeteilt, dass wir 3 verschiedene anklickbare Einheiten haben: unsere 3 Tab-Titel.

<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 + Jetzt geht es weiter mit ng-if! Die Richtlinie ng-if ist ein bedingter Ausdruck, der bestimmt, ob ein HTML-Element angezeigt werden soll oder nicht. In unserem Fall ermöglicht uns ng-if`, den richtigen Tab-Inhalt anzuzeigen, wenn wir auf einen Tab-Titel klicken.

Werfen wir einen Blick auf die Syntax, um zu verstehen, wie man die Richtlinie ng-click verwendet.

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

Die Struktur der Richtlinie ng-if ist die gleiche wie bei ng-click. Auf den Namen der Richtlinie folgt ein Gleichheitszeichen =. Der Ausdruck, der von der Richtlinie ng-if ausgewertet wird, steht zwischen doppelten Anführungszeichen ".

Die Syntax ist jedoch ein wenig anders. Im Ausdruck

Ist die Variable die gleiche, die wir in Schritt 8 erstellt haben.
Hier unterscheidet sich die Syntax: Diesmal müssen die Variable und der Wert durch 2 Gleichheitszeichen (==). getrennt werden. Auf diese Weise wird angezeigt, dass wir eine Bedingung ausdrücken.
Der Wert (geschrieben zwischen einfachen Anführungszeichen ') ist der gleiche, den wir in Schritt 8 erstellt haben.

Grundsätzlich könnte die ng-if-Syntax folgendermaßen gelesen werden: “Wenn myvariable gleich myvalue ist, [den Inhalt des HTML-Elements anzeigen, der myvalue entspricht]”.

11 + Fügen Sie die Richtlinie ng-if im HTML <div>-Tag jedes Tab-Inhalts hinzu. Vergessen Sie nicht, alle 3 Werte so zu setzen, dass sie mit dem Inhalt der 3 Tabs übereinstimmen. Zu diesem Zeitpunkt haben wir AngularJS mitgeteilt, welcher Tab-Inhalt je nachdem, welcher Tab-Titel ausgewählt wurde, angezeigt werden soll.

<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 + Jetzt geht es weiter mit ng-init! Diese Richtlinie wird verwendet, um eine Variable zu initialisieren: das bedeutet im Grunde genommen, dass beim Laden einer Webseite der Code hinter dieser Seite von der ersten bis zur letzten Zeile gelesen wird. ng-init gibt an, dass an dieser Stelle AngularJS verwendet wird und welche Variable verwendet wird. In unserem Fall wird ng-init außerdem verwendet, um anzugeben, welcher Tab-Inhalt standardmäßig angezeigt werden soll.

Werfen wir einen Blick auf die Syntax, um zu verstehen, wie man die Richtlinie ng-init verwendet.

ng-init="myvariable = 'myvalue'"

Die Syntax der Richtlinie ng-init entspricht exakt derjenigen von ng-click (siehe Schritt 8).

In diesem Ausdruck:

Ist die Variable die gleiche, die wir in Schritt 8 erstellt und seitdem verwendet haben.
Der Wert (geschrieben zwischen einfachen Anführungszeichen ') ist die Kennung des Tabs, dessen Inhalt standardmäßig angezeigt wird.

13 + Fügen Sie die Richtlinie ng-init in ein HTML-Tag ein, das den gesamten Code der Tabs umgibt. Da wir in diesem Tutorial eine komplett neue Seite erstellt haben, ist unser gesamter Seitencode bereits von 2 standardmäßigen Frame Tags umgeben: <div class="container-fluid"> und <div class="ods-box">. Wir fügen also ng-init in das standardmäßige <div class="ods-box">-Tag ein. Von nun an sind unsere Tabs voll funktionsfähig!

Hinweis

Wenn Sie keine komplett neue Seite für dieses Tutorial erstellt haben und diese Standard-Frame-Tags nicht verwenden, können Sie ein reguläres <div>-Tag hinzufügen, um den Code des Tabs zu umgeben, und die Richtlinie ng-init darin hinzuzufügen.

<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 + Sehen Sie sich die Vorschau an. Obwohl unsere Tabs inzwischen einwandfrei funktionieren, fehlt noch etwas. Es wird nicht angezeigt, welcher Tab ausgewählt ist! Kümmern wir uns darum, indem wir einen “selected tab”-Stil erstellen.

15 + Wechseln Sie zurück zum CSS-Abschnitt der Seite, an der Sie gerade arbeiten. Hier können Sie einen eigenen Stil erstellen, der anzeigt, welcher Tab ausgewählt ist. In diesem Fall nennen wir diese CSS-Klasse activetab und arbeiten sowohl mit der Textfarbe als auch mit einem fetten Rand unter dem Text.

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

16 + Wechseln Sie zurück zum HTML-Abschnitt der Seite, an der Sie gerade arbeiten.Wir werden unseren CSS-Stil jetzt mit unserer vierten (und letzten!) AngularJS-Richtlinie anwenden: ng-class. Diese Richtlinie ist ein bedingter Ausdruck. Er bestimmt, ob eine CSS-Klasse auf ein HTML-Element angewendet wird oder nicht. In unserem Fall wird ng-class verwendet, um einen bestimmten Stil für einen Tab-Titel anzuwenden, wenn dieser ausgewählt ist.

Werfen wir einen Blick auf die Syntax, um zu verstehen, wie man die Richtlinie ng-class verwendet.

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

Die Struktur der Richtlinie ng-class ist die gleiche wie bei den anderen Richtlinien: Auf den Namen der Richtlinie folgt ein Gleichheitszeichen =. Der Ausdruck, der von der Richtlinie ausgewertet wird, steht zwischen doppelten Anführungszeichen ".

Für diese Richtlinie sollte der Ausdruck folgendermaßen aussehen:

Der Ausdruck muss außerdem von geschweiften Klammern``{}`` umschlossen sein.
Innerhalb der geschweiften Klammern {}, kommt zuerst der Name der CSS-Klasse, die verwendet werden soll. Er muss zwischen einfachen Anführungszeichen (') geschrieben werden.
Direkt nach dem Namen der CSS-Klasse folgt ein Doppelpunkt :.
Dann kommt der Variablen-/Wert-Teil, genau wie beim``ng-if``-Ausdruck (siehe Schritt 10). Wir sollten die Bezeichnung der Variablen sowie des Wertes bestimmen (geschrieben zwischen einfachen Anführungszeichen '). Die Variable und der Wert müssen durch 2 Gleichheitszeichen getrennt werden ==.

Grundsätzlich könnte die ng-class-Syntax folgendermaßen gelesen werden: “mycssclass muss verwendet werden, wenn myvariable gleich myvalue ist”.

17 + Fügen Sie die Richtlinie ng-class im HTML <a>-Tag jedes Tab-Titels hinzu. Vergessen Sie nicht, alle 3 Werte so zu setzen, dass sie den 3 Tab-Titeln entsprechen.

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

Letzte Schritte

18 + Unsere ng-class-Richtlinie funktioniert! Aber das Ganze könnte etwas hübscher aussehen, oder? Kehren wir zurück zum CSS-Bereich, um letzte Feinheiten hinzuzufügen! Wir schaffen mehr Platz um die Tab-Titel herum, damit der Rand nicht in den Bereich mit dem Tab-Inhalt rutscht. Außerdem heben wir die mögliche Auswahl eines Tab-Titels hervor, indem wir einen bestimmten Stil erstellen, der nur sichtbar ist, wenn die Maus über die Tab-Titel fährt.

.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 + Wechseln Sie zurück zum HTML-Abschnitt, um den neuen CSS-Stil anzuwenden. Unsere CSS-Klasse tabs passt gut ins div-Tag, das alle Tab-Titel enthält. Weil tab:hover auf der Haupt-CSS-Klasse tab aufbaut, wird die Funktion automatisch für alle HTML-Elemente mit der CSS-Klasse tab angewendet.

<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 + Das war’s! Wir haben unsere eigenen Tabs erstellt! Jetzt müssen Sie nur noch die Beispieltexte durch echten Inhalt ersetzen.

Sie können die Tab-Titel frei wählen und eigene Tab-Inhalte hinzufügen. Für dieses Tutorial füllen wir die Tabs mit dem Datensatz Shanghai World University Ranking. Der erste Tab enthält die Tabellenvisualisierung, der zweite Tab enthält eine mit dem Kartenersteller erstellte Karte und der dritte Tab eine Diagrammvisualisierung. Natürlich wird jeder Tab-Titel Hinweise zum jeweiligen Inhalt geben und mit einem Font Awesome Symbol versehen sein (um das Ganze ein wenig aufzupeppen!).

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

HERZLICHEN GLÜCKWUNSCH!

Sie haben dieses Tutorial abgeschlossen und wissen jetzt, wie man Tabs mit AngularJS erstellt! Wir hoffen, dass Sie jetzt mit dem Umgang mit ng-click, ng-if, ng-init und ng-class vertraut sind und sie das nächste Mal selbstständig nutzen werden!