Selezionare la scheda per nome in jQuery UI 1.10.0

Question

PrimajQuery UI 1.10.0 ho usato per selezionare indirettamente una scheda come questa:

$("#tabs").tabs("select", 5); 

o

$("#tabs").tabs("select", "tab6"); 

Ora, con lo stesso codice, usando l'interfaccia utente jquery 1.10.0, si ottiene un errore che dice che "nessun tale metodo 'seleziona' per istanza widget di schede ".

ho cambiato il codice per utilizzare l'opzione "" "attivo" come questo:

$("#tabs").tabs("option","active", 5); 

Tuttavia, sembra che posso usare solo l'indice. La selezione per ID non funziona più. Così, invece di utilizzare l'ID come questo (che non funziona):

$("#tabs").tabs("option","active", "tab6"); 

si hanno a che fare in questo modo:

var idx = $('#tabs a[href="#tab6"]').parent().index(); 
$("#tabs").tabs("option", "active", idx); 

o, in una forma più breve

$("#tabs").tabs("option", "active", $("#tab6").parent().index()); 

Ho letto il "changelog" (http://jqueryui.com/changelog/1.10.0/) e non vedo nulla su questa modifica.

C'è un altro modo di selezionare una scheda per nome nell'interfaccia utente jquery 1.10.0?

ho creato una demo qui per chiunque voglia provare ...

http://jsbin.com/ojufej/1

Answer 1

ho finito per usare questo (vedi esempio):

http://jsfiddle.net/AzSUS/

Fondamentalmente, ho aggiunto queste funzioni

$.fn.tabIndex = function() { 
    return $(this).parent().find(this).index() - 1; 
}; 
$.fn.selectTabByID = function (tabID) { 
    $(this).tabs("option", "active", $('#' + tabID).tabIndex()); 
}; 
$.fn.selectTabByIndex = function (tabIndex) { 
    $(this).tabs("option", "active", tabIndex); 
}; 

Ans li usano in questo modo:

$("#tabs").selectTabByIndex(0); 

$("#tabs").selectTabByID('tab2'); 

Come vedrete nella sezione HTML sul mio esempio ...

<div id="tabs"> 
    <ul> 
    <li><a href="#tab1">[0] #tab1</a></li> 
    <li><a href="#tab2">[1] #tab2</a></li> 
    <li><a href="#tab3">[2] #tab3</a></li> 
    <li><a href="#tab4">[3] #tab4</a></li> 
    </ul> 
    <div id="tab1">Tab 1 Content</div> 
    <div id="tab2">Tab 2 Content</div> 
    <div id="tab3">Tab 3 Content</div> 
    <div id="tab4">Tab 4 Content</div> 
</div> 

... ho una molto semplice, struttura ben definita per le schede.

L'applicazione "reale" contiene 3 livelli di schede

vedere questo esempio con 2 livelli:

http://jsfiddle.net/vgaTP/

Un'altra cosa che non mi era chiaro è questo: io non voglio per attivare il "clic" sulla scheda, voglio solo "passare" a quella scheda, senza fare clic. Per me, l'evento "clic" carica il contenuto di una scheda e non voglio caricare il contenuto ogni volta che "seleziono" una scheda.

Answer 2

jQuery deprecated the select method in v.1.9

Il metodo select è stato deprecato in favore di appena aggiornare l'opzione attiva. È necessario sostituire tutte le chiamate al metodo select con le chiamate al metodo option per modificare l'opzione attiva.

---

In v.1.10 they completely removed it:

Rimosso: selezionare il metodo. (#7156, 7cf2719)

---

Il più vicino ho potuto ottenere per selezionare una scheda per nome stava usando il selettore di attributo href e il metodo trigger.

$("[href='#tab6']").trigger("click"); 

Demo: http://jsfiddle.net/QRUGM/

---

Il metodo originale select ha fatto qualcosa di similar:

this.anchors.eq(index).trigger(this.options.event + this.eventNamespace); 

Solo loro selezionata la scheda per l'indice al posto del nome.

Answer 3

Se si dispone già di una grande quantità di codice legacy che fa riferimento a queste funzioni svalutate e la migrazione è un mal di testa, creare un modulo di retrocompatibilità che colleghi i vecchi/nuovi metodi.

$.extend(true, $.ui.tabs.prototype, { 
    select: function (indexOrId) { 
     if (typeof indexOrId == "integer") 
      this.option("select", indexOrId); 
     else 
      $("[href='#"+ indexOrId +"']", this.element).click(); 
    } 
    // other methods.. 
}); 

Answer 4

Ho usato il precedente $ ("[href = '# tab6']"). Trigger ("clic"); postato da Ayman Safadi (grazie!) insieme a un campo nascosto e alle sue opere grandiose. Big up per questo post anche http://geekswithblogs.net/dotNETvinz/archive/2010/07/09/jquery-tab-retain-selected-tab-across-postbacks-in-asp.net.aspx che in combinazione con Aymens risposta mi ha aiutato a questa risposta finale :) ringrazia tutti

<script type="text/javascript"> 
    $(function() { 

     var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val(); 

     if (currTab == 0) { 
      $("[href='#tab_1_1']").trigger("click"); 
     } 

     if (currTab == 1) { 
      $("[href='#tab_1_2']").trigger("click"); 
     } 

     if (currTab == 2) { 
      $("[href='#tab_1_3']").trigger("click"); 
     } 

     if (currTab == 3) { 
      $("[href='#tab_1_4']").trigger("click"); 
     } 

    }); 
</script> 

Basta notare anche, il codice qui sotto ha funzionato troppo ma si miei linguette blu per un po ' motivo

$('#tabs').tabs(); 
        var currTab = $("#<%= HFCurrTabIndex.ClientID %>").val(); 
        $('#tabs').tabs("option", "active", currTab); 

Answer 5

Davvero facile;

$("#tabs").tabs("option", "active", $("#tabs").find("#tab6").index()-1); 

Dove # tab6 è l'ID della scheda che si desidera selezionare e #tabs è l'ID del controllo struttura a schede.