De spoiler is een handig hulpmiddel voor de site. Het wordt veel gebruikt in verschillende forums en blogs, waardoor de gebruiker een specifiek element kan verbergen op het moment dat er op een knop wordt gedrukt. Bovendien ziet de spoiler er goed uit op de site en helpt het om die delen te verbergen die de pagina onnodig overbelasten.
Het is nodig
JQuery-bibliotheek
instructies:
Stap 1
De spoiler kan worden geïmplementeerd met behulp van de populaire jQuery plug-in-bibliotheek die is geschreven in de programmeertaal Java Script. Het wordt gebruikt om volledige interactie van de programmeertaal met de HTML-opmaakcode van de pagina te implementeren. De jQuery-verbinding wordt gemaakt met HTML met behulp van de -tag. U moet de locatie opgeven waar het script zich bevindt en het type instellen: $ (document).ready (functie ()
Stap 2
Het tekstfragment dat binnen een bepaalde paragraaf wordt gespecificeerd, moet in een aparte laag worden ingesloten - een div, met behulp waarvan de spoiler zelf wordt bestuurd: Sasha liep langs de snelweg en zoog droog.
Stap 3
Vervolgens moet je voor alle divs met de naam bederven corresponderende knoppen maken die zullen samenvouwen en de tekst uitvouwen. Eerst wordt de spoiler zelf verborgen met de standaard "hide ()"-functie: $ ("div [name = 'spoil']"). Hide (); Vervolgens moet je een tekst en een afbeelding maken voor alle spoilers, die zal worden gebruikt als achtergrond voor de knoppen: $ (“P [naam = 'spoilbutton']”) Html (“Toon tekst”);
Stap 4
Zoek alle knoppen op de pagina en controleer of de koppen op het eerste niveau voor de knop staan. Om dit te doen, maakt u een voorwaarde die zoekt naar h1-tags op naam. De opgegeven titeltekst loopt terug in de div zelf: $ ("p [name = 'spoilbutton']") Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton =“”+ $ (this).prev (this).html () +” Show text”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Stap 5
Vervolgens moet u de klik van de muisknop met klik afhandelen. Als er een klik wordt gedetecteerd, kan deze worden weergegeven: $ ("div [name = 'spoilbutton']"). Click (function () {If ($ (this).next (this).css ("display") = =” blok”) {
Stap 6
Schrijf dan erfenis. Binnen een div staat de tekst in paragraaf p, waarvan de inhoud in een span-tag is geplaatst: $ (this).children (“p”). Children (“span”). Html (“Toon tekst”); Collapse spoiler openen. Vouw de tekst uit als deze niet is geopend. Deze stap is gebaseerd op de overervingsregel: $ (this).next (this).slideUp (“normaal”);} else {$ (this).children (“p”). Kinderen (“span”). Html (" Tekst verbergen "); $ (this).next (this).slideDown ("normaal");} return false; })
Stap 7
Vervolgens wordt de klik van de muis op de knop opgenomen, waardoor het script de spoiler zal verbergen en uitvouwen. $ ("P [naam = 'spoilbutton']"). Klik op (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp (“normaal”); $ (this).html (“Hide”);} return false;}); Spoiler klaar. Het verschijnt wanneer een overeenkomend DIV-blok wordt gevonden.
