menuMDUIDocs
color_lens
È disponibile il nuovo mdui 2 basato su Material Design 3 e Web Components, vai alla documentazione di mdui 2.

Tab

Modalità d'uso

  1. Aggiornamenti di mdui.$
  2. Chiamata via JavaScript

Letture correlate

Nella versione 0.4.3 si chiamava <code>mdui.JQ</code>, nella 1.0.0 è stato rinominato in <code>mdui.$</code>.

Stile

Dopo questa modifica, in un ambiente modulare ES6, è possibile importare <code>mdui.$</code> nei seguenti modi, il che è più comodo da usare.

Nella versione 0.4.3, i parametri potevano essere di vari tipi come selettori CSS, elementi DOM, array, ecc.

codeplay_arrow
Esempio

        <div class="mdui-tab" mdui-tab>
          <a href="#example1-tab1" class="mdui-ripple">web</a>
          <a href="#example1-tab2" class="mdui-ripple">shopping</a>
          <a href="#example1-tab3" class="mdui-ripple">images</a>
        </div>
        <div id="example1-tab1" class="mdui-p-a-2">web content</div>
        <div id="example1-tab2" class="mdui-p-a-2">shopping content</div>
        <div id="example1-tab3" class="mdui-p-a-2">images content</div>

In <code>mdui.$</code> sono state ampliate anche le funzionalità di diversi metodi, che non verranno descritte qui. Di seguito sono elencati solo gli aggiornamenti non compatibili con la versione 0.4.3.

Nella versione 1.0.0, i parametri possono essere solo di tipo selettore CSS. Dopo la modifica, è coerente con jQuery.

codeplay_arrow
Esempio

        <div class="mdui-tab mdui-tab-scrollable" mdui-tab>
          <a href="#example2-tab1" class="mdui-ripple">web</a>
          <a href="#example2-tab2" class="mdui-ripple">shopping</a>
          <a href="#example2-tab3" class="mdui-ripple">videos</a>
          <a href="#example2-tab4" class="mdui-ripple">images</a>
          <a href="#example2-tab5" class="mdui-ripple">news</a>
          <a href="#example2-tab6" class="mdui-ripple">maps</a>
          <a href="#example2-tab7" class="mdui-ripple">books</a>
          <a href="#example2-tab8" class="mdui-ripple">flights</a>
          <a href="#example2-tab9" class="mdui-ripple">apps</a>
          <a href="#example2-tab10" class="mdui-ripple">dictionary</a>
        </div>

Modifiche a .width(), .height(), .innerWidth(), .innerHeight()

Modifiche a .has()

codeplay_arrow
Esempio

        <div class="mdui-tab mdui-tab-centered" mdui-tab>
          <a href="#example3-tab1" class="mdui-ripple">web</a>
          <a href="#example3-tab2" class="mdui-ripple">shopping</a>
          <a href="#example3-tab3" class="mdui-ripple">videos</a>
        </div>

Nella versione 0.4.3, l'inclusione del padding dipende dal valore della proprietà <code>box-sizing</code>.

Nella versione 1.0.0, i parametri possono essere solo selettori CSS o elementi DOM. Dopo la modifica, è coerente con jQuery.

codeplay_arrow
Esempio

        <div class="mdui-tab mdui-tab-full-width" mdui-tab>
          <a href="#example4-tab1" class="mdui-ripple">web</a>
          <a href="#example4-tab2" class="mdui-ripple">shopping</a>
          <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>

Nella versione 1.0.0, larghezza e altezza sono indipendenti dalla proprietà <code>box-sizing</code>. Dopo la modifica, è coerente con jQuery.

codeplay_arrow
Esempio

        <div class="mdui-tab" mdui-tab>
          <a href="#example5-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
          </a>
          <a href="#example5-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
          </a>
          <a href="#example5-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
          </a>
        </div>

Modifiche a .offset(), .position()

codeplay_arrow
Esempio

        <div class="mdui-tab" mdui-tab>
          <a href="#example6-tab1" class="mdui-ripple">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example6-tab2" class="mdui-ripple">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example6-tab3" class="mdui-ripple">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Nella versione 0.4.3, il formato del valore restituito era <code>{ top: number, left: number, width: number, height: number }</code>.

Rimozione di .ready()

codeplay_arrow
Esempio

        <div class="mdui-tab mdui-color-theme" mdui-tab>
          <a href="#example7-tab1" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">phone</i>
            <label>recents</label>
          </a>
          <a href="#example7-tab2" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">favorite</i>
            <label>favorites</label>
          </a>
          <a href="#example7-tab3" class="mdui-ripple mdui-ripple-white">
            <i class="mdui-icon material-icons">perm_contact_calendar</i>
            <label>nearby</label>
          </a>
        </div>

Nella versione 1.0.0, il formato del valore restituito è stato cambiato in <code>{ top: number, left: number }</code>. Dopo la modifica, è coerente con jQuery.

Nella versione 0.4.3, si poteva usare $(document).ready(function () {}) per chiamare funzioni da eseguire al caricamento del DOM.

codeplay_arrow
Esempio

        <div class="mdui-tab" mdui-tab>
          <a href="#example8-tab1" class="mdui-ripple">web</a>
          <a href="#example8-tab2" class="mdui-tab-active mdui-ripple"
            >shopping</a
          >
          <a href="#example8-tab3" class="mdui-ripple">images</a>
        </div>

Modifiche a .children(), .parent(), .parents(), .prev(), .prevAll(), .next(), .nextAll(), .siblings()

Nella versione 1.0.0, sostituirlo con $(function () {}).

codeplay_arrow
Esempio

        <div class="mdui-tab" mdui-tab>
          <a href="#example9-tab1" class="mdui-ripple">web</a>
          <a href="#example9-tab2" class="mdui-ripple" disabled>shopping</a>
          <a href="#example9-tab3" class="mdui-ripple">images</a>
        </div>

Modalità d'uso

Chiamata via attributi

Modifiche a .ajax()

Nella versione 0.4.3, il valore restituito dal metodo .ajax() era un oggetto XMLHttpRequest. Supportava inoltre l'invio di richieste jsonp.

<div class="mdui-tab" mdui-tab>
...
</div>

Chiamata via JavaScript

Nella versione 1.0.0, il valore restituito è stato cambiato in una Promise. Inoltre, questo metodo non supporta più le richieste jsonp.

// Allinea le colonne a destra.
// Aggiunge una casella di controllo davanti a ogni riga.
var inst = new mdui.Tab(selector, options);
Esegui

Parametro

NomeTipoPredefinitoDescrizione
triggerstringclickLe righe selezionate avranno questa classe.
  • L'evento verrà attivato quando il menu a discesa termina l'animazione di chiusura.
  • Definisce un componente Select.
loopbooleanfalse

Metodo

Nome metodoDescrizione
prev()
next()
show(index)
handleUpdate()

Evento

Nome eventoDescrizioneTargetParametri
change.mdui.tab<div class="mdui-tab"></div>
show.mdui.tab<a></a>

Elenco classi CSS

Nome classeDescrizione
.mdui-tab
.mdui-tab-scrollable
.mdui-tab-centered
.mdui-tab-full-width
.mdui-tab-active
arrow_backPrevious
Grid List
arrow_forwardNext
Toolbar