web-dev-qa-db-fra.com

onglets jQuery - charge le contenu uniquement lorsque l'utilisateur clique dessus

Je suis relativement nouveau dans le développement jQuery et Web.

J'utilise les onglets de l'interface utilisateur jQuery pour créer des onglets.

Mais je veux que le contenu ne soit chargé que lorsque je sélectionne un onglet particulier.

jquery-uijquerytabs
15
aLL0i

OK, je suppose que lorsque l'utilisateur clique sur un onglet, vous avez l'intention d'extraire le contenu de manière dynamique, via AJAX. Cela implique vraiment deux choses, définir un onclick même pour votre onglet et récupérer les données via ajax .

Définition d'un événement onclick

Donnez à votre onglet une classe, par exemple my_tab. Supposons que lorsque l'utilisateur clique sur l'onglet, vous souhaitez que la fonction handle_tab_click () se déclenche. Voici un exemple de liaison de l'événement onclick à votre onglet mon_tab:

$(".my_tab").bind("click", handle_tab_click);

Votre fonction (handle_tab_click ()} »recevra un argument événement qui pourra vous fournir des informations sur l'élément qui a déclenché l'événement (dans ce cas, l'élément avec le nom de classe mon_tab).

function (event) {
    if ($(event.target).hasClass("my_tab")) { /* handle tab click */ }
    if ($(event.target).hasClass("my_tab_2")) { /* a different tab click */ }
    if ($(event.target).hasClass("my_tab_3")) { /* ... */ }
}

Consultez la documentation JQuery event _ pour plus de détails ici .

Récupération des données via ajax

Pour récupérer des données, vous devrez appeler un script distant tout en fournissant des informations sur l'onglet sur lequel vous avez cliqué (afin de récupérer les informations appropriées). Dans l'extrait suivant, nous appelons le script distant myscript.php, en fournissant l'argument HTTP GET tab_clicked = my_tab et en appelant la fonction tab_fetch_cb lorsque le script résultats. Le dernier paramètre est le type de données renvoyées (à vous de choisir).

$.get("myscript.php", {tab_clicked, "my_tab"}, tab_fetch_cb, "text/json/xml")

C'est à vous de concevoir myscript.php pour gérer le paramètre tab_clicked, récupérer les données appropriées et les renvoyer (c'est-à-dire les écrire au client).

Voici un exemple pour tab_fetch_cb:

function tab_fetch_cb(data, status) {
    // populate your newly opened tab with information 
    // returned from myscript.php here
}

Vous pouvez en savoir plus sur la fonction get de JQuery ici , et les fonctions JQuery ajax ici

Je suis désolé de ne pas pouvoir être plus précis dans mes exemples, mais une grande partie du traitement dépend vraiment de votre tâche. Comme il a déjà été souligné, vous pouvez vous tourner vers certains plugins JQuery pour une solution pré-établie à votre problème. Cela étant dit, il n’est jamais inutile d’apprendre à faire ce travail manuellement avec JQuery.

Bonne chance.

28
wilsoniya

UI/Onglets prennent en charge le chargement du contenu des onglets à la demande via Ajax, vérifiez this example.

14
CMS

Par défaut, un widget à onglet permute entre les sections à onglet onClick, mais les événements peuvent être modifiés en onHover via une option. Le contenu des onglets peut être chargé via Ajax en définissant un href sur un onglet.

source: http://docs.jquery.com/UI/Tabs

1
Som

Le chargement de contenu via Ajax ajoute à la complexité du traitement des boutons de mise en favori/retour du navigateur. Selon votre situation, vous devriez envisager de charger du nouveau contenu avec une requête de page complète. La gestion de la mise en favori/navigateur en arrière implique l’ajout d’informations sur les ancres dans l’URL.

Consultez également LavaLamp pour sélectionner un onglet. C'est assez chouette.

1
ajma

Si vous utilisez Rails, vous pouvez essayer ce petit bijou bettertabs

Il supporte les onglets ajax.

0
Zack Xu