JqueryUI - Tabs

Le schede sono insiemi di contenuti raggruppati logicamente che ci consentono di passare rapidamente da uno all'altro a. Le schede ci consentono di risparmiare spazio come le fisarmoniche. Affinché le schede funzionino correttamente, è necessario utilizzare una serie di markup:

Le schede devono essere in un elenco ordinato (<ol>) o non ordinato (<ul>).
Il titolo di ogni scheda deve essere all'interno di ogni <li> e racchiuso in un tag di ancoraggio (<a>) con un attributo href .
Ogni pannello a schede può essere un qualsiasi elemento valido ma deve avere un id , che corrisponde all'hash nell'ancoraggio della scheda associata.

jQueryUI ci fornisce il metodo tabs () che cambia drasticamente l'aspetto degli elementi HTML all'interno della pagina. Questo metodo attraversa (internamente nell'interfaccia utente jQuery) il codice HTML e aggiunge nuove classi CSS agli elementi interessati (qui, le schede) per dare loro lo stile appropriato.

Sintassi

Il tabs () può essere utilizzato in due forme:

$ (selettore, contesto) .tabs (opzioni) Metodo
$ (selettore, contesto) .tabs ( "azione", params) Metodo

$ (selettore, contesto) .tabs (opzioni) Metodo

Il metodo tabs (opzioni) dichiara che un elemento HTML e il suo contenuto devono essere gestiti come tab. Il parametro delle opzioni è un oggetto che specifica l'aspetto e il comportamento delle schede.

Sintassi

$(selector, context).tabs (options);

È possibile fornire una o più opzioni contemporaneamente utilizzando l'oggetto JavaScript. Se ci sono più opzioni da fornire, le separerai usando una virgola come segue:

$(selector, context).tabs({option1: value1, option2: value2..... });

La tabella seguente elenca le diverse opzioni che possono essere utilizzate con questo metodo:


$( ".selector" ).tabs (
   { active: 1 }
);
$( ".selector" ).tabs (
   { collapsible: true }
);
$( ".selector" ).tabs (
   { disabled: [ 0, 2 ] }
);
$( ".selector" ).tabs (
   { event: "mouseover" }
);
$( ".selector" ).tabs (
   { heightStyle: "fill" }
);
$( ".selector" ).tabs (
   { { hide: { effect: "explode", duration: 1000 } } }
);
$( ".selector" ).tabs (
   { show: { effect: "blind", duration: 800 } }
);

Sr.No.	Opzione e descrizione
1	attivo Questa opzione specifica la scheda / pannello attivo corrente. Per impostazione predefinita, il suo valore è0. Option - active Questa opzione specifica la scheda / pannello attivo corrente. Per impostazione predefinita, il suo valore è0. Questo può essere di tipo - Boolean- Se impostato su false , comprimerà tutti i pannelli. Ciò richiede che l' opzione pieghevole sia vera . Integer - L'indice in base zero del pannello attivo (aperto). Un valore negativo seleziona i pannelli andando indietro dall'ultimo pannello. Syntax `$( ".selector" ).tabs ( { active: 1 } );`
2	collassabile Questa opzione impostata su true , consente di deselezionare le schede. Quando è impostato su false (impostazione predefinita), facendo clic su una scheda selezionata non viene deselezionata (rimane selezionata). Per impostazione predefinita, il suo valore èfalse. Option - collapsible Questa opzione impostata su true , consente di deselezionare le schede. Quando è impostato su false (impostazione predefinita), facendo clic su una scheda selezionata non viene deselezionata (rimane selezionata). Per impostazione predefinita, il suo valore èfalse. Syntax `$( ".selector" ).tabs ( { collapsible: true } );`
3	Disabilitato Questa opzione utilizza un array per indicare le schede indice che sono disabilitate (e quindi non possono essere selezionate). Ad esempio, utilizzare [0, 1] per disabilitare le prime due schede. Per impostazione predefinita, il suo valore èfalse. Option - disabled Questa opzione utilizza un array per indicare le schede indice che sono disabilitate (e quindi non possono essere selezionate). Ad esempio, utilizzare [0, 1] per disabilitare le prime due schede. Per impostazione predefinita, il suo valore èfalse. Questo può essere di tipo - Boolean - Abilita o disabilita tutte le schede. Array - Un array contenente gli indici a base zero delle schede che dovrebbero essere disabilitate, ad esempio, [0, 2] disabiliterebbe la prima e la terza scheda. Syntax `$( ".selector" ).tabs ( { disabled: [ 0, 2 ] } );`
4	evento Questa opzione è un nome dell'evento che consente agli utenti di selezionare una nuova scheda. Se, ad esempio, questa opzione è impostata su "mouseover", il passaggio del mouse su una scheda la selezionerà. Per impostazione predefinita, il suo valore è"click". Option - event Questa opzione è un nome dell'evento che consente agli utenti di selezionare una nuova scheda. Se, ad esempio, questa opzione è impostata su "mouseover", il passaggio del mouse su una scheda la selezionerà. Per impostazione predefinita, il suo valore è"click". Syntax `$( ".selector" ).tabs ( { event: "mouseover" } );`
5	heightStyle Questa opzione controlla l'altezza del widget delle schede e di ogni pannello. Per impostazione predefinita, il suo valore è"content". Option - heightStyle Questa opzione controlla l'altezza del widget delle schede e di ogni pannello. Per impostazione predefinita, il suo valore è"content". I valori possibili sono - auto - Tutti i pannelli verranno impostati all'altezza del pannello più alto. fill - Espandi fino all'altezza disponibile in base all'altezza principale delle schede. content - Ogni pannello sarà alto quanto il suo contenuto. Syntax `$( ".selector" ).tabs ( { heightStyle: "fill" } );`
6	nascondere Questa opzione specifica come animare l'occultamento del pannello. Per impostazione predefinita, il suo valore ènull. Option - hide Questa opzione specifica come animare l'occultamento del pannello. Per impostazione predefinita, il suo valore ènull. Questo può essere di tipo - Boolean- Se impostato su false , non verrà utilizzata alcuna animazione e il pannello verrà nascosto immediatamente. Number - Il pannello si dissolverà con la durata specificata e l'andamento predefinito. String- Il pannello verrà nascosto utilizzando l'effetto specificato. Il valore può essere slideUp o fold Object- Per questo tipo, è possibile fornire proprietà effetto , ritardo , durata e attenuazione . Syntax `$( ".selector" ).tabs ( { { hide: { effect: "explode", duration: 1000 } } } );`
7	spettacolo Questa opzione specifica come animare la visualizzazione del pannello. Per impostazione predefinita, il suo valore ènull. Option - show Questa opzione specifica come animare la visualizzazione del pannello. Per impostazione predefinita, il suo valore ènull. Questo può essere di tipo - Boolean- Se impostato su false , non verrà utilizzata alcuna animazione e il pannello verrà visualizzato immediatamente. Number - Il pannello si dissolverà con la durata specificata e l'andamento predefinito. String- Il pannello verrà visualizzato utilizzando l'effetto specificato. Il valore può essere slideUp o fold . Object- Per questo tipo, è possibile fornire proprietà effetto , ritardo , durata e attenuazione . Syntax `$( ".selector" ).tabs ( { show: { effect: "blind", duration: 800 } } );`

La sezione seguente ti mostrerà alcuni esempi di funzionamento delle funzionalità delle schede.

Funzionalità predefinita

L'esempio seguente mostra un semplice esempio di funzionalità delle schede, senza passare parametri al file tabs() metodo.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css
         " rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <script>
         $(function() {
            $( "#tabs-1" ).tabs();
         });
      </script>
		
      <style>
         #tabs-1{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-1">
         <ul>
            <li><a href = "#tabs-2">Tab 1</a></li>
            <li><a href = "#tabs-3">Tab 2</a></li>
            <li><a href = "#tabs-4">Tab 3</a></li>
         </ul>
         <div id = "tabs-2">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor sit 
               amet, consectetur, adipisci velit... 
            </p>
         </div>
         <div id = "tabs-3">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-4">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML tabsexample.htme aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio sopra, fare clic sulle schede per passare da un contenuto all'altro.

Uso di heightStyle, pieghevole e nascondere

Il seguente esempio dimostra l'utilizzo di tre opzioni (a) heightStyle (b) collapsible, e (c) hide nella funzione tabs di JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-5" ).tabs({
               heightStyle:"fill",
               collapsible:true,
               hide:"slideUp"
            });
         });
      </script>
		
      <style>
         #tabs-5{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-5">
         <ul>
            <li><a href = "#tabs-6">Tab 1</a></li>
            <li><a href = "#tabs-7">Tab 2</a></li>
            <li><a href = "#tabs-8">Tab 3</a></li>
         </ul>
         <div id = "tabs-6">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-7">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna 
               aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
               ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-8">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML tabsexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Fare clic sulla scheda selezionata per alternare la chiusura / apertura del contenuto. Puoi anche vedere l'effetto di animazione "slideUp" quando la scheda è chiusa.

Uso dell'evento

Il seguente esempio dimostra l'utilizzo di tre opzioni event nella funzione tabs di JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel="stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-9" ).tabs({
               event:"mouseover"
            });
         });
      </script>
		
      <style>
         #tabs-9{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-9">
         <ul>
            <li><a href = "#tabs-10">Tab 1</a></li>
            <li><a href = "#tabs-11">Tab 2</a></li>
            <li><a href = "#tabs-12">Tab 3</a></li>
         </ul> 
         <div id = "tabs-10">
            <p>Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit... </p>
         </div>
         <div id = "tabs-11">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-12">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML tabsexample.htme aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output. Ora puoi giocare con il risultato:

Nell'esempio sopra, attiva / disattiva le sezioni aperte / chiuse con il mouse sulle schede.

$ (selector, context) .tabs ("action", params)

Il metodo tabs ("action", params) consente un'azione sulle schede (tramite un programma JavaScript), selezionando, disabilitando, aggiungendo o rimuovendo una scheda. L'azione è specificata come una stringa nel primo argomento (ad esempio, "aggiungi" per aggiungere una nuova scheda). Controlla le azioni che possono essere trasmesse, nella tabella seguente.

Sintassi

$(selector, context).tabs ("action", params);;

La tabella seguente elenca le diverse azioni che possono essere utilizzate con questo metodo:


$( ".selector" ).tabs("destroy");
$( ".selector" ).tabs("disable");
$( ".selector" ).tabs( "disable", 1 );
$( ".selector" ).tabs("enable");
$( ".selector" ).tabs( "enable", 1 );
$( ".selector" ).tabs("load", 1);
var isDisabled = $( ".selector" ).tabs( "option", "disabled" );
$( ".selector" ).tabs("option");
$( ".selector" ).tabs( "option", "disabled", true );
$( ".selector" ).tabs( "option", { disabled: true } );
$( ".selector" ).tabs( "refresh" );
var widget = $( ".selector" ).tabs( "widget" );

Sr.No.	Azione e descrizione
1	distruggere Questa azione distrugge completamente la funzionalità delle schede di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Action - destroy Questa azione distrugge completamente la funzionalità delle schede di un elemento. Gli elementi tornano al loro stato pre-inizializzazione. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).tabs("destroy");`
2	disattivare Questa azione disabilita tutte le schede. Questo metodo non accetta argomenti. Action - disable Questa azione disabilita tutte le schede. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).tabs("disable");`
3	disabilita (indice) Questa azione disabilita la scheda specificata. Dove index è la scheda da disabilitare. Action - disable( index ) Questa azione disabilita la scheda specificata. Dove index è la scheda da disabilitare. Per disabilitare più di una scheda contemporaneamente, imposta l'opzione disabled: $ ("#tabs") .tabs ("option", "disabled", [1, 2, 3]). Syntax `$( ".selector" ).tabs( "disable", 1 );`
4	abilitare Questa azione attiva tutte le schede. Questa firma non accetta argomenti. Action - enable Questa azione attiva tutte le schede. Questa firma non accetta argomenti. Syntax `$( ".selector" ).tabs("enable");`
5	abilita (indice) Questa azione attiva una scheda specificata. Dove index è la scheda da abilitare. Action - enable( index ) Questa azione attiva una scheda specificata. Dove index è la scheda da abilitare. Per abilitare più di una scheda contemporaneamente, reimpostare la proprietà disabled come: $ ("#example") .tabs ("option", "disabled", []) ;. Syntax `$( ".selector" ).tabs( "enable", 1 );`
6	Indice di carico ) Questa azione forza un ricaricamento della scheda indicizzata, ignorando la cache. Dove index è la scheda da caricare. Action - load( index ) Questa azione forza un ricaricamento della scheda indicizzata, ignorando la cache. Dove index è la scheda da caricare. Syntax `$( ".selector" ).tabs("load", 1);`
7	opzione (optionName) Questa azione ottiene il valore attualmente associato con optionName specificato . Action - option( optionName ) Questa azione ottiene il valore attualmente associato con optionName specificato . Syntax `var isDisabled = $( ".selector" ).tabs( "option", "disabled" );`
8	opzione Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni delle schede correnti. Action - option Questa azione ottiene un oggetto contenente coppie chiave / valore che rappresentano l'hash delle opzioni delle schede correnti. Questo metodo non accetta argomenti. Syntax `$( ".selector" ).tabs("option");`
9	opzione (optionName, value) Questa azione imposta il valore dell'opzione tabs associata all'opzione optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione. Action - option( optionName, value ) Questa azione imposta il valore dell'opzione tabs associata all'opzione optionName specificato . L'argomento optionName è il nome dell'opzione da impostare e valore è il valore da impostare per l'opzione. Syntax `$( ".selector" ).tabs( "option", "disabled", true );`
10	opzione (opzioni) Questa azione imposta una o più opzioni per le schede. Action - option( options ) Questa azione imposta una o più opzioni per le schede. Syntax `$( ".selector" ).tabs( "option", { disabled: true } );`
11	ricaricare Questa azione ricalcola l'altezza dei pannelli struttura a schede quando le schede aggiunte o rimosse direttamente nel DOM. I risultati dipendono dal contenuto e dall'opzione heightStyle . Action - refresh Questa azione ricalcola l'altezza dei pannelli struttura a schede quando le schede aggiunte o rimosse direttamente nel DOM. I risultati dipendono dal contenuto e dall'opzione heightStyle . Syntax `$( ".selector" ).tabs( "refresh" );`
12	aggeggio Questa azione restituisce l'elemento che funge da widget delle schede, annotato con il nome della classe ui-tabs . Action - widget Questa azione restituisce l'elemento che funge da widget delle schede, annotato con il nome della classe ui-tabs . Syntax `var widget = $( ".selector" ).tabs( "widget" );`

Uso dell'azione Disabilita ()

Vediamo ora un esempio usando le azioni della tabella sopra. L'esempio seguente mostra l'uso del metodo disable () .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-13" ).tabs();
            $( "#tabs-13" ).tabs("disable");
         });
      </script>
		
      <style>
         #tabs-13{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-13">
         <ul>
            <li><a href = "#tabs-14">Tab 1</a></li>
            <li><a href = "#tabs-15">Tab 2</a></li>
            <li><a href = "#tabs-16">Tab 3</a></li>
         </ul>
         <div id = "tabs-14">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-15">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco
               laboris nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-16">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit 
               voluptatem accusantium doloremque laudantium, totam rem aperiam, 
               eaque ipsa quae ab illo inventore veritatis et quasi architecto 
               beatae vitae dicta sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML tabsexample.htm e aprilo in un browser standard che supporta javascript, devi anche vedere il seguente output:

Qui puoi vedere che tutte le schede sono disabilitate.

Use of Action Disable (indice)

Vediamo ora un esempio usando le azioni della tabella sopra. L'esempio seguente mostra l'uso del metodo disable (index) .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-17" ).tabs();
            $( "#tabs-17" ).tabs("disable",2);
         });
      </script>
		
      <style>
         #tabs-17{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-17">
         <ul>
            <li><a href = "#tabs-18">Tab 1</a></li>
            <li><a href = "#tabs-19">Tab 2</a></li>
            <li><a href = "#tabs-20">Tab 3</a></li>
         </ul>
         <div id = "tabs-18">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-19">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>
         </div>
         <div id = "tabs-20">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>	
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div>
   </body>
</html>

Salviamo il codice sopra in un file HTML tabsexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Nell'esempio sopra, noti che Tab 3 è disabilitato.

Gestione degli eventi sugli elementi delle schede

Oltre al metodo tabs (opzioni) che abbiamo visto nelle sezioni precedenti, JqueryUI fornisce metodi di eventi che vengono attivati per un particolare evento. Questi metodi di eventi sono elencati di seguito:


$( ".selector" ).slider({
   activate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeActivate: function( event, ui ) {}
});
$( ".selector" ).slider({
   beforeLoad: function( event, ui ) {}
});
$( ".selector" ).slider({
   create: function( event, ui ) {}
});
$( ".selector" ).slider({
   load: function( event, ui ) {}
});

Sr.No.	Metodo e descrizione dell'evento
1	attivare (evento, ui) Questo evento viene attivato dopo che la scheda è stata attivata (dopo il completamento dell'animazione). Event - activate(event, ui) Questo evento viene attivato dopo che la scheda è stata attivata (dopo il completamento dell'animazione). Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - newTab - La scheda che è stata appena attivata. oldTab - La scheda che è stata appena disattivata. newPanel - Il pannello che è stato appena attivato. oldPanel - Il pannello che è stato appena disattivato. Syntax `$( ".selector" ).slider({ activate: function( event, ui ) {} });`
2	beforeActivate (evento, ui) Questo evento viene attivato prima che la scheda sia stata attivata. Event - beforeActivate(event, ui) Questo evento viene attivato prima che la scheda sia stata attivata. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - newTab - La scheda che sta per essere attivata. oldTab - La scheda che sta per essere disattivata. newPanel - Il pannello sta per essere attivato. oldPanel - Il pannello sta per essere disattivato. Syntax `$( ".selector" ).slider({ beforeActivate: function( event, ui ) {} });`
3	beforeLoad (evento, ui) Questo evento viene attivato quando una scheda remota sta per essere caricata, dopo l' evento beforeActivate . Questo evento viene attivato appena prima che venga effettuata la richiesta Ajax. Event - beforeLoad(event, ui) Questo evento viene attivato quando una scheda remota sta per essere caricata, dopo l' evento beforeActivate . Questo evento viene attivato appena prima che venga effettuata la richiesta Ajax. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - tab - La scheda che viene caricata. panel - Il pannello che verrà popolato dalla risposta Ajax. jqXHR- L' oggetto jqXHR che richiede il contenuto. ajaxSettings- Le impostazioni che verranno utilizzate da jQuery.ajax per richiedere il contenuto. Syntax `$( ".selector" ).slider({ beforeLoad: function( event, ui ) {} });`
4	create (evento, ui) Questo evento viene attivato quando vengono create le schede. Event - create(event, ui) Questo evento viene attivato quando vengono create le schede. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - tab - La scheda attiva. panel - Il pannello attivo. Syntax `$( ".selector" ).slider({ create: function( event, ui ) {} });`
5	load (evento, ui) Questo evento viene attivato dopo il caricamento di una scheda remota. Event - load(event, ui) Questo evento viene attivato dopo il caricamento di una scheda remota. Dove event è di tipo Event e ui è di tipo Object . I possibili valori di ui sono - tab - La scheda appena caricata. panel - Il pannello che è stato appena popolato dalla risposta Ajax. Syntax `$( ".selector" ).slider({ load: function( event, ui ) {} });`

Esempio

L'esempio seguente mostra l'utilizzo del metodo degli eventi nei widget delle schede. Questo esempio dimostra l'uso di eventi attivare e creare .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Tabs functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" 
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
		
      <script>
         $(function() {
            $( "#tabs-21" ).tabs({
               activate: function( event, ui ) {
                  var result = $( "#result-2" ).empty();
                  result.append( "activated" );
               },
               create: function( event, ui ) {
                  var result = $( "#result-1" ).empty();
                  result.append( "created" );
               }
            });
         });
      </script>
		
      <style>
         #tabs-21{font-size: 14px;}
         .ui-widget-header {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
      </style>
   </head>
	
   <body>
      <div id = "tabs-21">
         <ul>
            <li><a href = "#tabs-22">Tab 1</a></li>
            <li><a href = "#tabs-23">Tab 2</a></li>
            <li><a href = "#tabs-24">Tab 3</a></li>
         </ul>
         <div id = "tabs-22">
            <p>
               Neque porro quisquam est qui dolorem ipsum quia dolor 
               sit amet, consectetur, adipisci velit...
            </p>
         </div>
         <div id = "tabs-23">
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
               Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
               nisi ut aliquip ex ea commodo consequat.
            </p>   
         </div>
         <div id = "tabs-24">
            <p>
               ed ut perspiciatis unde omnis iste natus error sit voluptatem 
               accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae 
               ab illo inventore veritatis et quasi architecto beatae vitae dicta 
               sunt explicabo.
            </p>
            <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
               sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
               enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
               ut aliquip ex ea commodo consequat.
            </p>
         </div>
      </div><br>
      
      <span class = "resultarea" id = result-1></span><br>
      <span class = "resultarea" id = result-2></span>
   </body>
</html>

Salviamo il codice sopra in un file HTML tabsexample.htm e aprilo in un browser standard che supporta javascript, dovresti vedere il seguente output:

Fare clic sulle schede per visualizzare un messaggio stampato di seguito su eventi specifici.

↰ Previous page Next page ↱

JqueryUI - Tabs

Sintassi

$ (selettore, contesto) .tabs (opzioni) Metodo

Sintassi

Funzionalità predefinita

Uso di heightStyle, pieghevole e nascondere

Uso dell'evento

$ (selector, context) .tabs ("action", params)

Sintassi

Uso dell'azione Disabilita ()

Use of Action Disable (indice)

Gestione degli eventi sugli elementi delle schede

Esempio

Effetti JqueryUI

Interazioni JqueryUI

Tutorial JqueryUI

Risorse utili di JqueryUI

Utilità JqueryUI

Widget JqueryUI