Où mettre les actions jQuery pour les pages externes chargées par les onglets de l'interface utilisateur

Question

Je me demande où je devrais définir mes actions jQuery pour les pages chargées en externe par les onglets de l'interface utilisateur. Par exemple, j'ai une page index.html avec 3 onglets. Onclick chaque onglet chargera extern1.html, extern2.html, extern3.html. Ces 3 pages externes ont besoin de plusieurs actions jQuery (onload-actions, onclick-actions et plus). Quand je mets tout le code jQuery pour les pages externes dans l'index et que je charge l'une des pages externes, ce code jQuery n'affecte pas la page externe chargée lorsque je clique sur un onglet. Quand je mets tout le code jQuery pour les pages externes dans la page externe elle-même, cela causera des problèmes (je pense), parce que quand je charge plusieurs fois un onglet/page externe, il chargera le code jQuery encore et encore, droite?

Alors, où dois-je mettre mon code jQuery? (un exemple?)

Merci beaucoup!

Answer 1

Vous pouvez placer votre code dans le gestionnaire d'événements onglet chargé:

$('.your-tabs-container').tabs({ 
    load: function(event, ui) { /* your code here */ } 
}); 

ou:

$('.your-tabs-container').bind('tabsload', function(event, ui) { 
    /* your code here */ 
}); 

Dans ces cas, selon la documentation, vous pouvez récupérer les informations de l'interface utilisateur nécessaire à partir ui argument:

ui.tab  // anchor element of the selected (clicked) tab 
ui.panel // element, that contains the selected/clicked tab contents 
ui.index // zero-based index of the selected (clicked) tab 

Answer 2

Mettez votre jQuery sur le fichier html mère et utilisez la fonction .live() pour lier les événements que vous vouliez. docs here.

Answer 3

Vous ne devez inclure la bibliothèque jQuery qu'une seule fois! Sur votre page d'index. Sur les pages externes, vous devez inclure le javascript utilisé le pour cette page externe individuelle:

Indice

• Inclure la bibliothèque jQuery

externe 1:

• jQuery fonctions pertinentes pour la page externe 1

externes 2:

• fonctions jQuery pertinentes pour la page externe 2

Voilà comment je le ferais :-)