Pannello a tab con infinita quantità di tab nidificate.

Le linguette (tabs) sono un elemento molto popolare nella creazione di siti web. Le dimensioni compatte, la possibilità di presentare una grande quantità di informazioni senza passaggi e scorrere la pagina, rendono pannelli co tab cosi popolari .

Dal momento che il tema è abbastanza popolare per lettori, allora ci sono delle domande. E una di questi è: "Ma come fare le linguette con altre tab al interno?" Che certamente ancora una volta espande funzionalità di linguette o  tab.

Oggi voglio mostrarti come utilizzando jQuery e proprietà  di CSS3, si può facilmente implementare pannello a tab con nidificazione infinita. E che le nostre linguette avrano un aspetto piacevole vediamo di farli piu o meno simili a quelli che posiamo vedere al browser Chrome.

Panello a tab con linguette nidificate al infinita.

Il nostro piano per procedere

  1. Prima di tutto, vediamo cosa vogliamo ottenere alla fine del nostro lavoro e il nostro piano per la loro realizzazione :
  2. Il nostro panello a tab funziona in base di  jQuery e quindi dovremo collegare una versione recente di questa libreria alla nostra pagina, fra i tag  <heaad> ... </ head>, o prima del tag di chiusura </ body>.
  3. Avremo bisogno di scrivere regole CSS  per raggiungere aspetto voluto di tab. Creare un piccolo script che farà tutto il lavoro in collaborazione con la libreria jQuery, mettendo tutto in movimento e far funzionare le nostre linguette (tabs) nidificate .

Posiamo sempre utilizzare anche una libreria jQuery da un server CDN per esempio di Google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Esempio di pannello a tab annidati

  • Linguetta_1
  • Linguetta_2
  • Linguetta_3

In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali. Vivono isolati nella cittadina di Lettere, sulle coste del Semantico, un immenso oceano linguistico.

In una terra lontana, dietro le montagne Parole, lontani dalle terre di Vocalia e Consonantia, vivono i testi casuali. Vivono isolati nella cittadina di Lettere, sulle coste del Semantico, un immenso oceano linguistico.

Un piccolo ruscello chiamato Devoto Oli attraversa quei luoghi, rifornendoli di tutte le regolalie di cui hanno bisogno. È una terra paradismatica, un paese della cuccagna in cui golose porzioni di proposizioni arrostite volano in bocca a chi le desideri. Non una volta i testi casuali sono stati dominati dall’onnipotente Interpunzione, una vita davvero non ortografica. Un giorno però accadde che la piccola riga di un testo casuale, di nome Lorem ipsum, decise di andare a esplorare la vasta Grammatica.

Un piccolo ruscello chiamato Devoto Oli attraversa quei luoghi, rifornendoli di tutte le regolalie di cui hanno bisogno. È una terra paradismatica, un paese della cuccagna in cui golose porzioni di proposizioni arrostite volano in bocca a chi le desideri.

  • Linguetta_3_1
  • Linguetta_3_2
  • Linguetta_3_3

Non una volta i testi casuali sono stati dominati dall’onnipotente Interpunzione, una vita davvero non ortografica. Un giorno però accadde che la piccola riga di un testo casuale, di nome Lorem ipsum, decise di andare a esplorare la vasta Grammatica.

  • Linguetta_3_2_1
  • Linguetta_3_2_2
  • Linguetta_3_2_3

Non una volta i testi casuali sono stati dominati dall’onnipotente Interpunzione, una vita davvero non ortografica. Un giorno però accadde che la piccola riga di un testo casuale, di nome Lorem ipsum, decise di andare a esplorare la vasta Grammatica.

Il grande Oximox tentò di dissuaderla, poiché quel luogo pullulava di virgole spietate, punti interrogativi selvaggi e subdoli punti e virgola, ma il piccolo testo casuale non si fece certo fuorviare. Raccolse le sue sette maiuscole, fece scorrere la sua iniziale nella cintura, e si mise in cammino.

Il grande Oximox tentò di dissuaderla, poiché quel luogo pullulava di virgole spietate, punti interrogativi selvaggi e subdoli punti e virgola, ma il piccolo testo casuale non si fece certo fuorviare. Raccolse le sue sette maiuscole, fece scorrere la sua iniziale nella cintura, e si mise in cammino.

Il grande Oximox tentò di dissuaderla, poiché quel luogo pullulava di virgole spietate, punti interrogativi selvaggi e subdoli punti e virgola, ma il piccolo testo casuale non si fece certo fuorviare. Raccolse le sue sette maiuscole, fece scorrere la sua iniziale nella cintura, e si mise in cammino.

Markup HTML del pannello a tab con nidificazione infinita

Andiamo avanti. Vediamo di creare una carcassa  HTML  delle nostre linguette, per questo useremo un semplice div e per realizzare navigazione fra le tab useremo un elenco non numerato creato con il tag ul . Ecco come appare la nostra struttura di tabs nel linguaggio HTML:

Cliccare per vedere markup html

<div class="tabs">
    <ul class="tabs-nav">
        <li class="active">Linguetta(tab) 1</li>
        <li> Linguetta(tab) 2</li>
        <li> Linguetta(tab) 3</li>
    </ul>
    <div class="tabs-box">
        <div class="active">
             <p>
                Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
             </p>
         </div>
         <div>
             <p>
                Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
             </p>
         </div>
         <div>
             <p>
                Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
             </p>
        </div>
    </div>
</div>

Nota che alla prima voce di navigazione e rispettivamente alla prima scheda con contenuto ho assegnato  class= "active" . In CSS a questa classe vedremo di attribuire proprietà display: block;, il che rende questa scheda aperta al caricamento della pagina. Come hai capito se vuoi che al caricamento della pagina sara da subito aperta un altra scheda basta segnarla con questa classe. Solo una scheda puo avere questa classe

Ora vediamo di inserire in una delle linguette un altro blocco con tab, realizzando cosi le tab nidificate. Per questo sara sufficiente prendere il codice che abbiamo visto sopra ed inserirlo in uno dei div che abbiamo creato per il contenuto cosi il contenuto di una di nostre linguette saranno altri tab

Per dimostrare la possibilità di infinita di questa operazione vediamo in una delle tab gia nidificate inserire di novo il nostro blocco con le linguette, questa volta nella seconda tab. Come risultato, si ottiene una serie di pannelli a tab compatti con un grande volume di contenuto, annidati una dentro l'altra.

Cliccare per vedere il codice

<div class="tabs">
    <ul class="tabs-nav">
        <li class="active"> linguetta 1</li>
        <li> linguetta 2</li>
        <li> linguetta(tab) 3</li>
    </ul>
    <div class="tabs-box">
        <div class="active">
            <p>
              Qui mettiamo qualsiasi contenuto. Testo immagini o video o tutto insieme ...
            </p>
        </div>
        <div>
            <p>
              Qui mettiamo qualsiasi contenuto. Testo immagini o video o tutto insieme ...
            </p>
        </div>
        <div>
            <div class="tabs">
                <ul class="tabs-nav">
                  <li class="active"> Linguetta(tab) 1</li>
                  <li>Linguetta(tab) 2</li>
                  <li>Linguetta(tab) 3</li>
                </ul>
                <div class="tabs-box">
                    <div class="active">
                        <p>
                          Qui mettiamo qualsiasi contenuto. Testo immagini o video o tutto insieme ...
                        </p>
                    </div>
                    <div>
                        <div class="tabs">
                            <ul class="tabs-nav">
                              <li class="active">Linguetta(tab) 1</li>
                              <li>Linguetta(tab)2</li>
                              <li>Linguetta(tab) 3</li>
                            </ul>
                            <div class="tabs-box">
                                <div class="active">
                                    <p>
                                      Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
                                    </p>
                                </div>
                                <div>
                                    <p>
                                      Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
                                    </p>
                                </div>
                                <div>
                                    <p>
                                      Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <p>
                          Qui mettiamo qualsiasi contenuto . Testo immagini o video o tutto insieme ...
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Come si può vedere, markup HTML  è molto semplice. L'idea è quella di aggiungere linguette(tab) al infinita, ma diciamo che conoscere un limite è sempre un buon tono. Un paio di nidificazioni  è  giustificato e sufficiente.

Stili CSS3 di pannello a tab con nidificazione infinita

Diciamo che lo stile solito di delle linguette ci ha gia stancato. Così, la navigazione fra le tab ho realizzato come nel browser con aiuto di pseudo elementi  :after e :before.

Cliccare per vedere il codice

.tabs {
    width:100%;
    max-width: 720px;
    min-width: 320px;
    margin: 0 auto;
    padding: 0;
}
.tabs-nav {
    overflow: hidden;
    padding-left:14px;
    padding-right: 14px;
}
.tabs-nav li {
    color: #555;
    padding: 5px 14px 3px;
    position: relative;
    text-decoration: none;
    background-color: #e4e4e4;
    border-top:1px solid #ccc;
    border-radius:6px;
    float: left;
    display: block;
    cursor:pointer; 
    margin-right:8px;
    font-family: 'Roboto',Helvetica,sans-serif;
    font-size: 14px;
    text-transform:none;
}
 
.tabs-nav li:before, .tabs-nav li:after {
    display:block; 
    content:" "; 
    position:absolute;  
    top:0; 
    height:100%; 
    width:16px;         
    background-color: #e4e4e4;
}
.tabs-nav li:before {
    right:-4px;
    transform: skew(25deg, 0deg) ;
    -webkit-transform: skew(25deg, 0deg) ;
    -moz-transform: skew(25deg, 0deg) ;
    -o-transform: skew(25deg, 0deg) ;
    -ms-transform: skew(25deg, 0deg) ;
    border-radius:0 4px 0 0;
    border-right:1px solid #ccc;
    box-shadow:rgba(0,0,0,.1)3px 2px 5px, inset rgba(255,255,255,.09)-1px 0;
    z-index: 2
}
.tabs-nav li:after {
    left:-4px;
    transform: skew(-25deg, 0deg) ;
    -webkit-transform: skew(-25deg, 0deg) ;
    -moz-transform: skew(-25deg, 0deg) ;
    -o-transform: skew(-25deg, 0deg) ;
    -ms-transform: skew(-25deg, 0deg) ;
    border-left:1px solid #ccc;
    border-radius:4px 0 0 0;
}
 
.tabs-nav li:hover, .tabs-nav li:hover:before, .tabs-nav li:hover:after {
    background-color:#e9e9e9;
}
.tabs li.active, 
.tabs li.active:before, 
.tabs li.active:after, 
.tabs li.active:hover, 
.tabs li.active:hover:before, 
.tabs li.active:hover:after { 
    background-color:#f4f4f4; color:#555;
}
.tabs li.active {
    z-index:3;
}
.tabs-box > div {
    display: none;
    padding: 10px 15px;
    background: rgba(255,255,255,0.9);
    border:1px solid #ccc;
    box-sizing: border-box;
    -webkit-animation: fade 0.5s linear;
    -ms-animation: fade 0.5s linear;
    animation: fade 0.5s linear;
}
.tabs-box > .active {
    display: block;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }

Se avrete dei  problemi con proprietà z-index:, anche se  è improbabile, ma non si sa mai, perché i valori esposti sono a puro titolo di esempio, basta cambiare i valori e raggiungere il risultato voluto . Il resto, come si può vedere, è abbastanza semplice.

Jquery nella realizzazione di pannello a tab

La versione corrente della libreria collegheremo da  Google CDN , dopo di che ci rimane solo di mettere in movimento le nostre linguette che al clic sul titolo appare il contenuto, per questo dobbiamo inserire o collegare alla nostra pagina un script con il nome per esempio my-tabs.js
 

<script src="/js/my-tabs.js"></script>/* per collegare alla pagina

Il nostro script è abbastanza corto e semplice
<script>
$('.tabs-nav li').click(function(e) {
  var a = $(this),
      parent = a.parents('.tabs'),
      nav = parent.children('.tabs-nav').children('li'),
      box = parent.children('.tabs-box').children('div');
 
  if (!a.hasClass('active')) {
    a.addClass('active')
      .siblings().removeClass('active');
 
    box.eq(a.index()).addClass('active')
      .siblings().removeClass('active');
  }
 
  e.preventDefault();
});
</script>

A questo punto è  tutto. Il nostro panello a tab con infinita nidificazione è pronto per essere usato.

Letto 224 volte