schede jQuery selezione scheda specifica

Question

Ho una pagina contenente un insieme di schede jQuery. Tutte le schede puntano allo stesso target div, ma lo caricano con contenuti diversi tramite ajax. Quando eseguo il caricamento iniziale della pagina intera, è necessario impostare la scheda attiva in modo diverso in base a vari fattori. Il contenuto nel div target è già impostato sul server per questo carico iniziale, quindi non è necessario fare clic sulla scheda, ho solo bisogno di impostare la scheda corretta su 'selezionato'. Ho provato a impostare la classe del relativo elemento "li" html su "ui-tabs-selected". Questo ha l'effetto iniziale desiderato, ma una volta caricata la pagina, selezionando un'altra scheda, quella preselezionata non si spegne, lasciando selezionate due schede.

Quindi, qualcuno sa un modo alternativo per preselezionare una scheda (senza far sì che venga cliccato), o una soluzione per il comportamento strano "ui-tabs-selezionato" che sto vedendo.

Grazie.

<script type="text/javascript"> 
    $(function() { 
     $("#panelTabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); 
       } 
      } 
     }); 

     $("#panelTabs").tabs({ 
      select: function(event, ui) { 
       getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
      } 
     }); 
    }); 
    </script> 

E il # frammento C che costruisce l'UL:

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       tabsLiteral.Append("<li>"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      _panelTabs.Controls.Add(ctl); 

Un'altra versione:

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       string active = ""; 
       if (currentTabCaption == kvp.Value.Caption) 
       { 
        //active = " class=\"ui-tabs-selected\""; 
       } 
       tabsLiteral.Append("<li" + active + ">"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
      html.Append(@"$(function() { 
       alert('initialising tabs'); 
       $(""#panelTabs"").tabs({ 
        ajaxOptions: { 
         error: function(xhr, status, index, anchor) { 
          $(anchor.hash).html(""Couldn't load this tab. We'll try to fix this as soon as possible.""); 
         } 
        }, 
        select: function(event, ui) { 
         getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
        } 
       }); 
      });"); 
      html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      //_panelTabs.Controls.Add(ctl); 
      Page.Controls.Add(ctl); 

Answer 1

si potrebbe avere la prima linea all'interno della funzione di commutazione scheda rimuovere la classe selezionata:

var uiTabsSelected = '.ui-tabs-selected'; 
$(uiTabsSelected).removeClass(uiTabsSelected); 

Answer 2

Quello che stai cercando è il selected option. Per esempio.

$("#MyTabs").tabs({ 
    selected: 2 
}); 

Answer 3

Modifica questo:

html.Append("$(\"#panelTabs\").tabs({selected: 2});"); 

A tal:

html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 

Edit: e ...

$(function() { 
     $("#panelTabs").tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html("Couldn't load this tab. We'll try to fix this as soon as possible."); 
       }}, 
      select: function(event, ui) { 
       getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
      } 
     });  

    }); 

Answer 4

La soluzione era quella di aggiungere e rimuovere le classi, come suggerito dall'ethagnawl. Il seguente C# mostra sia l'UL che viene costruito, più l'iniezione di script jQuery richiesta. Il bit importante è nello spettacolo: funzione in cui le classi vengono manipolate. È questo codice che funziona attorno al problema.

StringBuilder tabsLiteral = new StringBuilder(); 
      tabsLiteral.Append("<ul>"); 
      foreach (KeyValuePair<string, Tab> kvp in tabs) 
      { 
       //string tabClass = " class=\"ui-state-default\""; 
       string tabClass = " class=\"ui-state-default\""; 
       if (currentTabCaption == kvp.Value.Caption) 
       { 
        tabClass = " class=\"ui-tabs-selected\""; 
       } 
       tabsLiteral.Append("<li" + tabClass + ">"); 
       //tabsLiteral.Append("<li>"); 
       // Note - the kvp.Value.URI determines what should happen when the Tab is clicked 
       tabsLiteral.Append("<a id=\"" + kvp.Value.URI + "\" href=\"#panelTabs\">" + kvp.Value.Caption + "</a>"); 
       tabsLiteral.Append("</li>"); 
      } 
      tabsLiteral.Append("</ul>"); 
      _panelTabs.Controls.Add(new LiteralControl(tabsLiteral.ToString())); 

      HtmlGenericControl ctl = new HtmlGenericControl(); 
      StringBuilder html = new StringBuilder(); 
      html.Append("<script type=\"text/javascript\">"); 
      //html.Append("$(\"#panelTabs\").tabs('option','selected', 2);"); 
      html.Append(@"$(function() { 
       $('#panelTabs').tabs({ 
        select: function(event, ui) { 
         getPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA'); 
        }, 
        show: function(event, ui) { 
         // You MUST set both 'ui-state-active' AND 'ui-tabs-selected' for tab UI to operate properly - if either are missing it doesn't work 
         $('.ui-tabs-selected').removeClass('ui-state-active').removeClass('ui-tabs-selected'); 
         $(ui.tab).addClass('ui-state-active').addClass('ui-tabs-selected'); 

         //$('#panelTabs').tabs('selected',idx); // WOULD have been nice if this had worked, but UI does not keep up 
        } 
       }); 
      });"); 
      html.Append("</script>"); 
      ctl.InnerHtml = html.ToString(); 
      //Page.Header.Controls.Add(ctl); // NEVER place script in the page header when the script must survive an AJAX delivery - it won't run 
      Page.Controls.Add(ctl); // Acceptable to place script on the page, as it WILL survive AJAX delivery 

Answer 5

Nel caso in cui nessuno viene qui a cercare la risposta, il corrente (a partire da questa data) modo per selezionare una scheda (jQuery UI 1.10) è quello di utilizzare l'opzione "attiva":

inizializzare le schede con l'opzione attiva specificato:

$(".selector").tabs({ active: 1 }); 

http://api.jqueryui.com/tabs/#option-active