2009-11-13 4 views
1

J'ai fondamentalement besoin de l'onglet sélectionné pour rester cliquable (ce qui signifie le lien devrait être actif).Onglet JQuery - Cliquez sur l'onglet Sélectionnable

Le contenu de l'onglet est chargé via ajax et peut changer, de sorte que le la personne peut "actualiser" le contenu en cliquant à nouveau sur l'onglet. Mais les paramètres par défaut rendent l'onglet non cliquable une fois qu'il est sélectionné, ce qui oblige l'utilisateur à cliquer sur un autre onglet, puis à pour actualiser le contenu.

J'apprécie toute aide, merci.

+2

Ce n'est pas un bon paradigme de l'interface utilisateur. Pensez-y de cette façon, un utilisateur qui vient à votre page doit savoir qu'ils doivent cliquer à nouveau sur l'onglet pour actualiser. Au lieu de cela, pourquoi ne pas ajouter une icône de rafraîchissement ou un message comme ce que Gmail ou Facebook font. Changer les paradigmes d'interface n'est généralement pas une bonne idée. :-) – AboutDev

+0

Je suis d'accord avec AboutDev. Vous pouvez facilement ajouter une icône d'actualisation de l'interface utilisateur Jquery dans l'onglet qui restera également cliquable dans un onglet sélectionné. – Daff

+1

Je suis d'accord avec l'icône "Refresh" mais je ne sais pas trop comment l'insérer avec les onglets "JQuery UI". Si j'ajoute une image et un lien d'ancrage, il glisse ... J'ai quelque chose comme ceci:

Balu

Répondre

0

Le plugin tabs déclenche un événement tabsselect lorsqu'un utilisateur clique sur un onglet. Enregistrez-vous un rappel, dont le second paramètre aura une propriété « onglet » où vous pouvez vérifier quel onglet vous êtes sur:

jQuery('#tabs-container').bind('tabsselect', function(e, tabsContainer) { 

    jQuery(tabsContainer.tab).attr('href')); 
}); 

EDITIED:

Il ne se déclenche que lorsque l'onglet change réellement. Peut-être lier sur l'élément d'ancrage dans la structure des onglets, et vérifier la classe sélectionnée par les onglets. Il existe une documentation décente sur le plugin onglets: http://docs.jquery.com/UI/Tabs.

En gros:

jQuery('#tabs-container a').bind('click', function() { 
    if(jQuery(e.target).hasClass('ui-tabs-selected')) { 
     // do some stuff 
    } 
}); 
0

Définir un événement onclick d'ancrage à onglet pour recharger ou envoyer à la page parent, comme celui-ci

<div id="divTab"> 
    <ul> 
    <li><a href="#tab_1">First Tab</a></li> 
    <li><a href="#tab_2" style="cursor:pointer;" onclick="window.location.reload();">Second Tab</a> 
    </li> 
    <li><a href="#tab_3" style="cursor:pointer;" onclick="window.location.replace('url');">Third Tab</a> 
    </li> 
    </ul> 
</div>