*   >> Lezen Onderwijs artikelen >> tech >> web development

jQuery AJAX Tabs met thickbox enabled

Inleiding:

Dit is een van de goed voorbeeld van hoe we een thickbox kan laden (Voorbeeld: thickbox gerelateerd fotogalerijen etc.) in onze jQuery AJAX Tabs. Meestal, als u probeert een thickbox direct laden in jQuery AJAX Tabs, de functionaliteit zal niet goed werken, om dit werk dat we moeten maken om opnieuw te starten tb_init () functie dienovereenkomstig na het verzoek is succes. Gewoon eens een blik hieronder over hoe gaan we dit oplossen

Oplossing:..

Re-ingewijde tb_init () wanneer het verzoek is succes

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

thickbox ');

Live Preview /Download:

Als u een kijkje op de jQuery AJAX Tabs, klik dan hier om het zelfde te bekijken .

Om het fragment te downloaden, klik hier

Voorbeeld:

Hieronder is een voorbeeld van hoe we dit kunnen doen in de praktijk. Ik heb weinig Tab Panelen, in één van de Tab Panel er weinig beelden waarvoor ik thickbox functionaliteit nodig, dat is als ik klik op de afbeelding respectieve miniatuur moet openen van een popup met werkelijke beeld.


jQuery Code:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546var reqPageUrl = new Array (); reqPageUrl [1] = "contentpage1.html"; reqPageUrl [2] = "contentpage2.html"; reqPageUrl [3] = "contentpage3.html"; reqPageUrl [4] = "contentpage4.html"; functie loadTab (id) {if (reqPageUrl [ID] .length> 0) {$ ('# preloader ") geven ().; $ .ajax ({url: reqPageUrl [ID], cache: vals, fout:.

functie (XMLHttpRequest, textStatus, errorThrown) {$ ('# tabmenu a') removeClass ('actieve'); //verwijder alle class = ' actief 'voor alle ankers $ ("# content_tab" + id) .toggleClass (' actief ').. //toe te voegen klasse aan de huidige $ ("# content") leeg () toevoegen (' Problemen met laden pagina, neem dan contact op met het pad "); //als er een fout in de aanvraag $ (" # preloader ") te verbergen (); //verbergen preloader}, succes:. functie (bericht) {$ ('# tabmenu a ') removeClass (.' actief '); //verwijder alle class =' ​​actief 'voor alle ankers $ ("# content_tab" + id) .

toggleClass ("actieve"); //toe te voegen klasse aan de huidige $ ( "#content") leeg () toevoegen (bericht);.. //eerst de inhoud te legen, dan voeg inhoud $ ("# preloader") te verbergen ();. //verberg de preloader tb_init ('a.thickbox, area .thickbox, input.thickbox '); //roepen tb_init functie ThichBox starten in uw respectieve tab panelen}}); }} $ (Document) .ready (function () {loadTab

(2); //Na he

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

Copyright © 2008 - 2016 Lezen Onderwijs artikelen,https://onderwijs.nmjjxx.com All rights reserved.