*   >> Lecture Éducation Articles >> tech >> développement web

jQuery AJAX onglets avec ThickBox enabled

Introduction:

Ceci est l'un des bon exemple sur la façon dont nous pouvons charger un ThickBox (Exemple: ThickBox galeries d'images liées, etc.,) dans nos jQuery AJAX onglets. Habituellement, si vous essayez de charger un ThickBox directement dans jQuery AJAX onglets, la fonctionnalité ne fonctionnera pas correctement, afin de rendre ce travail, nous devons ré-initier tb_init () la fonction en conséquence après la demande est un succès. Jetez un coup d'oeil ci-dessous comment allons-nous résoudre ce un

Solution:..


Re-Initié tb_init () une fois que la demande est la réussite

1tb_init ('a.thickbox, area.thickbox, input.thickbox ');


Live Preview /Téléchargement:

Si vous voulez avoir un regard sur les onglets jQuery AJAX, s'il vous plaît cliquer ici pour voir la même .

Pour télécharger l'extrait, cliquez ici

Exemple:

Voici un exemple sur la façon dont nous pouvons faire cela dans la pratique.

Je dois quelques panneaux à onglets, dans l'un des panneau d'onglets, il ya quelques images pour lesquelles je dois ThickBox fonctionnalité, qui est quand je clique sur la vignette correspondante il devrait ouvrir un popup avec l'image réelle.

jQuery Code Promo:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546var reqPageUrl = new Array (); reqPageUrl [1] = "contentpage1.html"; reqPageUrl [2] = "contentpage2.html"; reqPageUrl [3] = "contentpage3.html"; reqPageUrl [4] = "contentpage4.html"; fonction loadTab (id) {if (reqPageUrl [id] .

length> 0) {$ ("# Preloader") show ().; .ajax $ ({url: reqPageUrl [id], cache: false, erreur:. function (XMLHttpRequest, textStatus, errorThrown) {$ ('# tabmenu a') removeClass («actif»); //supprimer tous class = ' actif »pour toutes les ancres $ (" # content_tab "+ id) .toggleClass (« actif »);.. //Ajouter une classe pour l'actuel $ (" contenu de # ") vide () append ('Erreur dans la page de chargement, s'il vous plaît ne vérifier avec le chemin '); //si il ya une erreur dans la requête $ ("# Preloader") cacher (); //masquer le préchargement}, le succès:.

function (message) {$ (' # tabmenu a ') removeClass (.' active '); //supprimer tous class =' ​​active 'pour tous les ancres $ ("# content_tab" + id) .toggleClass («actif»); //Ajouter une classe pour l'actuel $ ( "#content") vide () append (message);.. //abord vider le contenu, puis ajoutez le contenu $ ("# Preloader") cacher ();. //cacher la tb_init de pr

Page   <<       [1] [2] [3] >>

Copyright © 2008 - 2016 Lecture Éducation Articles,https://lecture.nmjjxx.com All rights reserved.