J'ai une page contenant un ensemble d'onglets JQuery. Tous les onglets pointent sur la même cible div, mais le chargent avec un contenu différent via Ajax. Lorsque j'effectue la charge complète initiale, j'ai besoin de 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. Je n'ai donc pas besoin de cliquer sur l'onglet, j'ai juste besoin de définir l'onglet correct sur "sélectionné". J'ai essayé de définir la classe de l'élément HTML "LI" correspondant à "UI-Tabs-sélectionné". Cela a l'effet souhaité initial, mais une fois la page chargée, la sélection de l'onglet Présélectionné ne s'éteint pas, laissant deux onglets sélectionnés.
Alors, est-ce que quelqu'un connaît une solution alternative de présélectionner un onglet (sans le causer à cliquer), ou une solution au comportement étrange "UI-Tabs sélectionné" que je vois.
merci. et le C # fragment qui construit l'UL: une autre version:
5 Réponses :
Vous pouvez avoir la première ligne à l'intérieur de votre fonction Basculer de tabulation supprimez la classe sélectionnée:
var uiTabsSelected = '.ui-tabs-selected'; $(uiTabsSelected).removeClass(uiTabsSelected);
Merci, ça sonne comme une bonne idée - j'ai essayé de coller vos deux lignes dans la fonction mais JS se plaint de la première ligne (attente; au premier '-' Char) - Toute idée Pourquoi?
Ce que vous recherchez est le . E.G. $("#MyTabs").tabs({
selected: 2
});
@Gert g - merci, cela fonctionne initialement, mais présente ensuite exactement le même comportement que la classe "UI-Tabs sélectionnée" étant ajoutée à l'élément LI I.E. En cliquant sur un autre onglet, je vous retrouve avec deux onglets sélectionnés. En cliquant à nouveau, il s'élève et un seul onglet est indiqué comme sélectionné.
@Deh - Je n'ai jamais eu de problèmes avec ça. Pouvez-vous poster du code dans votre question? Merci.
Cela devrait fonctionner. @Deh Postez votre balisage et tout JS pertinent dans votre question.
@Gert g - Je viens d'ajouter quelques fragments de code au poste initial. L'ensemble du système est plutôt complexe, je ne peux donc pas facilement poster facilement un exemple de travail, mais j'espère que ces fragments vous permettront de voir ce que je fais. J'utilise un DIV commun pour les onglets appelés Paneltabs, ce qui est ajouté de manière dynamique à la page par plus tôt C #. Le JavaScript est juste assis en haut de la page principale.
Merci. Cela vous donne quelques indices de la façon dont il est construit. Que se passe-t-il si vous ajoutez $ ("# paneltabs"). Onglets ({sélectionné: ui.tab.id}); juste après getpage ('hps.aspx? Cmd = zz_' + ui.tab.id, 'panela'); et supprimer html.append ("$ (\" # "# paneltabs \"). onglets ({sélectionné: 2}); ");"); " > du code C #? Un coup dans le noir, mais peut-être vaut la peine d'essayer.
@Gert g - pas de chance. Il ne semble rien faire du tout, le premier onglet est choisi par opposition à celui que je veux. Merci pour toute votre aide si
@Deh - pas de problème. Je verrai si je peux recréer votre problème localement. Je serais de retour plus tard.
@Gert g - OK, merci beaucoup. Je suis au Royaume-Uni et c'est 01h00 ici, donc je suis donc parti pour certains kip, mais je vais vérifier le matin.
@Gert - Je viens de poster une autre tentative dans le poste initial. J'ai déplacé la fonction des onglets principaux sur la méthode qui construit l'UL, et j'ai également modifié le code pour ajouter le script à la page principale et non le contrôle des onglets. Remarqué quelque chose d'étrange dans le test - le C # peut livrer l'UL et le script dans le cadre d'une actualisation complète de la page, ou il peut fonctionner en mode Ajax dans lequel le HTML livré est utilisé pour mettre à jour une DIV plutôt que toute la page. Tout fonctionne parfaitement lorsque le HTML et le script sont servis via AJAX et sert à remplir un DIV - le problème apparaît uniquement lorsqu'une rafraîchissement complet de PGE se produit. Kip maintenant!
Je pense que ce qui se passe est que vous réécrivez les onglets et que vous perdez la manipulation des événements. Pourquoi ne pas aller à une approche plus simple d'avoir des panneaux différents et de charger le contenu dans ces panneaux?
@Gert La cible unique La div est très centrale de l'architecture de l'interface utilisateur du système. Il existe de nombreux ensembles différents d'onglets et chaque onglet charge toujours de contenu dans la même cible div. Je vais avoir un violon avec le méblot d'événement et voir si je peux faire des progrès. Merci pour le conseil
@Gert - résolu ce matin et posté la solution comme une autre réponse. Je considère que la solution est une solution de contournement parce que je pense que cela devrait gérer cette situation. J'espère que cela ne vous dérange pas, mais j'ai donné la réponse à l'ethnogawl car il m'a pointé dans la bonne direction. Merci beaucoup pour votre aide avec cela - c'est une honte que je ne puisse pas accepter deux réponses.
@Deh - pas de problème. Je suis content que vous ayez trouvé la solution.
Modifiez ceci: à ceci: modifier:
et ...
Dans mon test qui ne sélectionne pas du tout un onglet, alors que la version antérieure a sélectionné un onglet mais n'a pas «libéré» lorsque un autre onglet est cliqué.
@Deh se débarrasse de la ligne HTML.append ... Ligne, ajoutez un champ masqué pour contenir la valeur de votre onglet sélectionné, puis ajoutez: ", sélectionné: $ (ID * =" tabtoselect "] '). Val ( ) "Pour votre script d'initialisation, définissez la valeur de Tabtoselect dans CodeBeHind
@Deh j'ai laissé un} plus tôt. De plus, si vous essayez de sélectionner l'onglet après avoir initialisé vos onglets, il appellera votre événement Select. Voici un exemple simple: jsbin.com/anitu3
merci pour votre aide - devez le laisser maintenant mais je vais vérifier à nouveau demain
La solution consistait à ajouter et à supprimer des classes, comme l'a suggéré en Éthagnole. Le C # suivant montre à la fois l'UL étant construite, plus l'injection requise de script jQuery. Le bit important est dans le spectacle: fonction où les classes sont manipulées. C'est ce code qui fonctionne autour du 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
Si quelqu'un d'autre vient ici à la recherche de la réponse, la méthode actuelle (à la date de cette date) pour sélectionner un onglet (JQuery UI 1.10) consiste à utiliser l'option "Active": Initialisez les onglets avec l'option active spécifiée:
Avez-vous un échantillon de code montrant cela en action?
Notez bien sûr si c'est ce que vous êtes après, mais voici le fragment C # qui construit le LI: if (actueltabCaption == kvp.value.caption) {actif = "class = \" ui-onglets-tills sélectionné \ ""; } tabsliteral.append (""); // Remarque - Le kvp.value.uri détermine ce qui devrait se produire lorsque l'onglet est cliqué sur tabsliteral.append (" "+ kvp.value.caption +" "); TabsLiteral.append ("");