12 - Tab Sheets

Utilizzo

Per gestire il contenuto di una wam con dei tab sheets è possibile utilizzare l'apposita classe edDivTabSheets.

Struttura base

<div class="edDivTabSheets" data-tabfield="SELTAB" data-ontabchangefunc="funcname">

   <div class="tabscontainer">

      <div class="tab" data-tab="1">Descrizione Tab 1</div>

      <div class="tab" data-tab="2">Descrizione Tab 2</div>

      <!-- EVENTUALI TAB AGGIUNTIVI -->

   </div>

   <div class="sheetscontainer">

      <div class="sheet" data-sheet="1">

           <!-- CONTENUTO TAB 1 -->

      </div>      

      <div class="sheet" data-sheet="2">

           <!-- CONTENUTO TAB 2 -->

      </div>

      <!-- CONTENUTI DI EVENTUALI TAB AGGIUNTIVI -->

   </div>

</div>

Visualizzazione

Regole principali

XSL:

• Copiare ed incollare la struttura base

• Sostituire il valore dell'attributo data-tabfield con il nome del campo da utilizzare per la gestione dei tab

• Impostare le descrizioni dei vari tab all'interno dei div con classe tab

• Inserire il contenuto dei vari tab all'interno dei div con classe sheet

• Impostare i codici per ogni singolo tab attraverso i valori degli attributi data-tab e data-sheet. Questi saranno i valori assunti dal campo indicato nell'attributo data-tabfield a seconda del tab visualizzato.

• Utilizzare data-ontabchangefunc se si vuole eseguire una funzione javascript all'inizio e ogni volta che viene cliccato un tab. Inserire come valore il nome della funzione. Nella funzione javascript impostare un parametro in ingresso che verrà valorizzato automaticamente con il valore agganciato al tab selezionato. Esempio: function myfunction(seltab) { console.log(seltab) }

SOURCE:

• Definire un flag per la gestione dei tab (nell'esempio SELTAB) ed inserirlo nella WEB_MAP FOR(*BOTH) come *HIDDEN

• Inizializzare il campo all'interno della uExecute con il valore del codice del tab da visualizzare al primo caricamento