les onglets jQuery sélectionnant l'onglet spécifique
J'ai une page contenant un ensemble d'onglets jQuery. Tous les onglets point à la même cible div, mais de le charger avec un contenu différent via ajax. Lorsque j'exécute l'intégrale initiale de chargement de la page j'ai besoin de l'onglet actif différemment en fonction de divers facteurs. Le contenu de la cible de div est déjà défini sur le serveur pour cette première charge, je n'ai pas besoin de cliquer sur l'onglet, j'ai juste besoin de régler correctement l'onglet "sélectionnées". J'ai essayé le réglage de la classe de la "li" élément html "ui-tabs-sélectionné". Cela a l'initiale de l'effet désiré, mais une fois le chargement de la page, puis sur sélectionner un autre onglet de la présélectionnés on ne s'éteint pas, laissant deux onglets sélectionnés.
Donc, quelqu'un sait-il un autre moyen de présélectionner un onglet (sans l'amenant à être cliqué), ou une solution de l'étrange "ui-tabs-sélectionné" comportement que je vois.
Grâce.
<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 C# fragment 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);
Remarque assurez-vous si c'est ce que vous êtes après, mais ici, c'est le C# fragment qui construit le li: si (currentTabCaption == kvp.De la valeur.La légende) { active = " class=\"ui-tabs-selected\""; } tabsLiteral.Append("<li" + active + ">"); // Notez - le kvp.De la valeur.URI détermine ce qui doit se passer lorsque l'Onglet est cliqué tabsLiteral.Append("<a id=\"" + kvp.De la valeur.URI + "\" href=\"#panelTabs\">" + kvp.De la valeur.Légende + "</a>"); tabsLiteral.Append("</li>");
OriginalL'auteur DEH | 2010-07-01
Vous devez vous connecter pour publier un commentaire.
Vous pourriez avoir la première ligne à l'intérieur de votre onglet fonction de bascule supprimer la classe sélectionnée:
merci pour de me pointer dans la bonne direction
OriginalL'auteur ethagnawl
Ce que vous cherchez est la option sélectionnée. E. g.
Je n'ai jamais eu de problèmes avec elle. Pouvez-vous mettre un peu de code dans votre question? Merci.
Cela devrait fonctionner. @DEH Post votre balisage et les JS dans votre question.
G - j'ai juste ajouté un couple de fragments de code pour le post initial. Tout le système est assez complexe donc je ne peux pas publier facilement l'ensemble d'un exemple de travail, mais j'espère que ces éléments vous permettra de voir ce que je fais. Je suis à l'aide d'une div pour les onglets appelés panelTabs, et cette dynamique est ajouté à la page précédemment au C#. Le javascript est assis juste en haut de la page principale.
Merci. Il vous donne quelques indices de la façon dont il est construit. Qu'advient-il si vous ajoutez
$("#panelTabs").tabs({selected: ui.tab.id });
juste aprèsgetPage('hps.aspx?cmd=zz_' + ui.tab.id, 'panelA');
et supprimerhtml.Append("$(\"#panelTabs\").tabs({selected: 2});");
dans le code C#? Un coup de feu dans l'obscurité, mais peut-être la peine d'essayer.OriginalL'auteur Gert Grenander
Changer cela:
:
Edit:
et...
se débarrasser de l'html.ajouter... ligne, ajouter un champ caché pour conserver la valeur de votre onglet sélectionné, puis ajoutez:"" , sélectionné: $('[id*="TabToSelect"]').val()" à votre script d'initialisation, définissez la valeur de TabToSelect dans le code-behind
J'ai laissé un } plus tôt. Aussi, si vous essayez de sélectionner l'onglet après l'initialisation de vos onglets ce qui fera appel à votre sélectionnez l'événement. voici un exemple simple: jsbin.com/anitu3
merci pour votre aide - être quitter maintenant, mais va vérifier à nouveau demain
OriginalL'auteur offner
Au cas où quelqu'un d'autre vient ici à la recherche pour la réponse, la actuel (à ce jour) de manière à sélectionner un onglet (jQuery UI 1.10) est d'utiliser la fonction "active" option:
Initialiser les onglets avec l'option active spécifié:
http://api.jqueryui.com/tabs/#option-active
OriginalL'auteur camainc
La solution était d'ajouter et de supprimer des classes, comme ethagnawl suggéré. La suite C# montre à la fois l'UL en cours de construction, en plus de la nécessaire script jQuery injection. L'important est dans le spectacle: la fonction où les classes sont manipulés. C'est ce code qui contourne le problème.
OriginalL'auteur DEH