*   >> Læs Uddannelse artikler >> tech >> web development

jQuery AJAX Tabs med Thickbox enabled

Indledning:

Dette er en af ​​de gode eksempel på, hvordan vi kan indlæse en Thickbox (Eksempel: Thickbox relaterede billede gallerier mv,) i vores jQuery AJAX faner. Normalt, hvis du forsøger at indlæse en Thickbox direkte ind jQuery AJAX faner, funktionaliteten vil ikke fungere ordentligt, for at gøre dette arbejde, vi er nødt til at re-initiere tb_init () funktion i overensstemmelse hermed efter anmodningen er succes. Bare have et blik nedenfor om, hvordan vi kommer til at løse dette ene

Løsning:..


Re-Start tb_init (), når anmodningen er succes

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


Levende Eksempel /Download:

Hvis du ønsker at have et kig på jQuery AJAX Faner, klik her for at se den samme .

For at downloade uddrag, klik her

Eksempel:

Nedenfor er et eksempel på, hvordan vi kan gøre dette i praksis.

Jeg har få Tab Paneler, i en af ​​Tab Panel der er få billeder, som jeg har brug for Thickbox funktionalitet, der er, når jeg klikker på det respektive miniaturebillede det skal åbne op for en popup med faktiske billede.

jQuery Kode:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546var reqPageUrl = new Array (); reqPageUrl [1] = "contentpage1.html" reqPageUrl [2] = "contentpage2.html" reqPageUrl [3] = "contentpage3.html" reqPageUrl [4] = "contentpage4.html"; funktion loadTab (id) {if (reqPageUrl [id] .length> 0) {$ ("# preloader") show ().; $ .

ajax ({url: reqPageUrl [id], cache: falsk, fejl:. funktion (XMLHttpRequest, textStatus, errorThrown) {$ ('# tabmenu a') removeClass ("aktiv"); //fjerne alle class = ' aktiv "for alle ankre $ (" # content_tab "+ id) .toggleClass (" aktiv ").. //tilføjer klasse til den nuværende $ (" # indhold ") tom () append ('Fejl i Indlæser side, er du tjekke med stien '); //hvis der er nogen fejl i anmodningen $ ("# preloader") skjul (); //skjule preloader}, succes:. funktion (meddelelse) {$ (' # tabmenu a ') removeClass (. "aktiv"); //fjerne alle class = "aktiv" for alle ankre $ ("# content_tab" + id) .

toggleClass ("aktiv"); //tilføjer klasse til den nuværende $ ( "#content") tom () append (meddelelse);.. //først tømme indholdet, så tilføje indhold $ ("# preloader") skjul ();. //skjule preloader tb_init ('a.thickbox, område .thickbox, input.thickbox '); //kalder tb_init funktion til at indlede ThichBox i dine respektive fanen paneler}}); }} $ (Dokument) .ready (function () {load

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

Copyright © 2008 - 2016 Læs Uddannelse artikler,https://uddannelse.nmjjxx.com All rights reserved.