jQuery UI Komponenten nutzen – Tabs

Rufen Sie im Browser https://jqueryui.com/tabs/ auf.

 

Klicken Sie anschließend auf view source um den Quelltext für die Komponente Tabs einzusehen.

Zeile 12 ist die sogenannte Document Ready Funktion von jQuery. Da diese bereits in unserem require Block vorhanden ist benötigen wir nur den Aufruf $(‚#ID‘).tabs().

Der in dem Bild markierte HTML Code ist das Grundgerüst welches jQuery für die Tabs nutzt. Zeile 20 – 24 diese Liste wird später zu unseren Registerreitern. Beachten Sie das die URL gleich der IDs der Tabs ist.

Die Inhalte von 25-27 / 28-30 und 31 – 33 werden zu den jeweiligen Tabs, wobei das erste automatisch aktiv ist.

 

Änderungen in der project.html

Damit wir die Tabs nutzen können müssen wir eine ähnlich Struktur in unserer HTML Datei einbauen:

<div  id="tabContainer">
  <ul>
    <li><a href="#tabs-1">Seite 1</a></li>
    <li><a href="#tabs-2">Seite 2</a></li>
  </ul>
  <div id="tabs-1">
  
Chart ein-/ausblenden

    <div class="flex-container">
      <div id="QV01" class="qvobject"></div>
      <div id="QV02" class="qvobject"></div>
      <div id="QV03" class="qvobject hideObject"></div>
      <div id="QV04" class="qvobject"></div>
      <div id="QV05" class="qvobject"></div>
    </div>
  </div>
  <div id="tabs-2" class="flex-container">
    <div class="flex-container">
      <div id="QV06" class="qvobject"></div>
    </div>
  </div>
</div>

 

Änderungen in der project.js

und der passende jQuery Aufruf

$('#showHide').on('click',function(){
  //was passieren soll
  //$('#QV02').toggle();
  if($('#QV02').is(':visible')){
    $('#QV02').hide();
    $('#QV03').show();
  }else{
    $('#QV03').hide();
    $('#QV02').show();
  }
  qlik.resize();
});

$('#tabContainer').tabs();

 

Ergebnis:

 

Problem qlik.resize() erneut lösen

Gehen Sie zurück auf die Seite von jQuery, von welcher wir uns den Quellcode kopiert haben.

 

Klicken Sie weiter unten auf den Link API-Dokumentation

 

Auf der Seite sehen Sie die Funktionen die jQuery für die Komponente Tabs bereit stellt. Klicken Sie auf die Methode activate

 

Weiter unten auf der Seite finden Sie ein Beispiel wie Sie beim Aktivieren des Tabs eine Funktion aufrufen.

Änderungen in der project.js

$('#showHide').on('click',function(){
  //was passieren soll
  //$('#QV02').toggle();
  if($('#QV02').is(':visible')){
    $('#QV02').hide();
    $('#QV03').show();
  }else{
    $('#QV03').hide();
    $('#QV02').show();
  }
  qlik.resize();
});

$('#tabContainer').tabs({
  activate: function( event, ui ) {
     qlik.resize();
  }
});

 

Ergebnis