*   >> Lese Utdanning Artikler >> tech >> web development

jQuery AJAX Tabs med ThickBox enabled

Innledning:

Dette er en av de godt eksempel på hvordan vi kan legge en ThickBox (Eksempel: ThickBox relatert bildegallerier etc.) i våre jQuery AJAX Tabs. Vanligvis, hvis du prøver å laste en ThickBox direkte inn jQuery AJAX Tabs, funksjonaliteten vil ikke fungere ordentlig, for å gjøre dette arbeidet må vi sette i gang tb_init () -funksjonen tilsvar etter at forespørselen er suksess. Bare ha et blikk nedenfor om hvordan vi skal løse dette en

Løsning:..

Re-Start tb_init () en gang forespørselen er suksess

1tb_init ('a.thickbox, area.

thickbox, input.thickbox ');


Live Preview /Last ned:

Hvis du ønsker å ta en titt på jQuery AJAX Tabs, kan du klikke her for å vise den samme .

For å laste ned tekstutdrag, klikk her

Eksempel:

Nedenfor er et eksempel på hvordan vi kan gjøre dette i praksis. Jeg har få Tab paneler, i en av de Tab Panel er det få bilder som jeg trenger ThickBox funksjonalitet, det er når jeg klikker på den respektive miniatyrbilde det bør åpne opp en popup med selve bildet.


jQuery Kode:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546var reqPageUrl = new Array (); reqPageUrl [1] = "contentpage1.html"; reqPageUrl [2] = "contentpage2.html"; reqPageUrl [3] = "contentpage3.html"; reqPageUrl [4] = "contentpage4.html"; funksjon loadTab (id) {if (reqPageUrl [id] .length> 0) {$ ("# preloader") viser (.); $ .ajax ({url: reqPageUrl [id], cache: falsk, feil. funksjon (XMLHttpRequest, textStatus, errorThrown) {$ ('# tabmenu en') removeClass ("aktiv"); //fjerne all class = ' aktiv "for alle ankere $ (" # content_tab "+ id) .

toggleClass ('aktiv');.. //legge klassen til den nåværende $ (" # innhold ") tom () føyer ('Feil Laster siden, Vennligst sjekk med banen '); //hvis det er noen feil i forespørselen $ ("# preloader") skjule (); //skjule preloader} suksess. funksjon (melding) {$ (' # tabmenu en ') removeClass (.' aktiv '); //fjerne all class = "aktivt" for alle ankere $ ("# content_tab" + id) .toggleClass ("aktiv"); //legge klassen til den nåværende $ ( "#content") tom () føyer (melding);.. //først tømme innholdet, og deretter legge til innhold $ ("# preloader") skjule ();. //skjule preloader tb_init ('a.

thickbox, område .thickbox, input.thickbox '); //kaller tb_init funksjon for å initiere ThichBox inn dine respektive kategorien paneler}}); }} $ (Document) .ready (function () {loadTab

(2); //Etter lasting, active tab 1

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

Copyright © 2008 - 2016 Lese Utdanning Artikler,https://utdanning.nmjjxx.com All rights reserved.