Onglets jQuery sélection d'un onglet spécifique

Question

J'ai une page contenant un ensemble d'onglets jQuery. Tous les onglets pointent sur le même div cible, mais le charger avec du contenu différent via ajax. Lorsque j'effectue le chargement initial de la pleine page, je dois définir l'onglet actif différemment en fonction de divers facteurs. Le contenu de la cible div est déjà défini sur le serveur pour cette charge initiale, donc je n'ai pas besoin de cliquer sur l'onglet, j'ai juste besoin de mettre l'onglet correct à 'sélectionné'. J'ai essayé de placer la classe de l'élément "li" html approprié à "ui-tabs-selected". Cela a l'effet initial souhaité, mais une fois la page chargée, puis en sélectionnant un autre onglet, le présélectionné ne s'éteint pas, laissant deux onglets sélectionnés. Donc, est-ce que quelqu'un connaît une autre façon de présélectionner un onglet (sans le faire cliquer), ou une solution au comportement bizarre "ui-onglets-selected" que je vois.

Merci.

<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> 

et le fragment C# qui construit 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); 

Une autre version:

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

Vous pourriez avoir la première ligne à l'intérieur de votre onglet fonction de bascule supprimer la classe sélectionnée:

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

Answer 2

Ce que vous cherchez est le selected option. Par exemple.

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

Answer 3

Modifier ceci:

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

à ceci:

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

Edit: et ...

$(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 solution était d'ajouter et de supprimer des classes, comme ethagnawl suggéré. Le C# suivant montre à la fois l'UL en cours de construction et l'injection de script jQuery requise. Le bit important est dans le show: fonction où les classes sont manipulées. C'est ce code qui contourne le problème.

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

Dans le cas où tous ceux qui cherchent autre vient ici pour la réponse, la actuelle (à cette date) façon de sélectionner un onglet (jQuery UI 1.10) est d'utiliser l'option « active »:

Initialiser les onglets avec l'option active spécifiée:

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

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