Der Spoiler ist ein praktisches Werkzeug für die Website. Es ist in verschiedenen Foren und Blogs weit verbreitet und ermöglicht es dem Benutzer, ein bestimmtes Element zum Zeitpunkt eines Tastendrucks auszublenden. Darüber hinaus sieht der Spoiler auf der Seite gut aus und hilft, diejenigen Teile auszublenden, die die Seite unnötig überladen.
Es ist notwendig
Jquery-Bibliothek
Anleitung
Schritt 1
Der Spoiler kann mit der beliebten Plug-in-Bibliothek jquery implementiert werden, die in der Programmiersprache Java Script geschrieben ist. Es wird verwendet, um die vollständige Interaktion der Programmiersprache mit dem HTML-Markup-Code der Seite zu implementieren. Die jquery-Verbindung erfolgt über HTML mit dem -Tag. Sie müssen den Speicherort des Skripts angeben und seinen Typ festlegen: $ (Dokument).ready (Funktion ()
Schritt 2
Das innerhalb eines bestimmten Absatzes angegebene Textfragment muss in eine separate Ebene eingeschlossen werden - ein Div, mit dessen Hilfe der Spoiler selbst gesteuert wird: Sasha ging die Autobahn entlang und saugte trocken.
Schritt 3
Als nächstes müssen Sie vor allen Divs mit dem Namen "spoiler" entsprechende Schaltflächen erstellen, die den Text ein- und ausklappen. Zuerst wird der Spoiler selbst mit der Standardfunktion "hide()" ausgeblendet: $ ("div [name = 'spoil']"). Hide(); Als nächstes müssen Sie einen Text und ein Bild für alle Spoiler erstellen, die als Hintergrund für die Schaltflächen verwendet wird: $ ("P [name = 'spoilbutton']"). Html ("Text anzeigen");
Schritt 4
Suchen Sie alle Schaltflächen auf der Seite und suchen Sie nach den Überschriften der ersten Ebene vor der Schaltfläche. Erstellen Sie dazu eine Bedingung, die nach h1-Tags nach Namen sucht. Der angegebene Titeltext wird in das div selbst umbrochen: $ ("p [name = 'spoilbutton']"). Each (function () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton =" "+ $ (dies).prev (dies).html () +" Text anzeigen "; $ (dies).prev (dies).replaceWith (" "); $ (dies).replaceWith (NewSpoilButton);}})
Schritt 5
Als nächstes müssen Sie den Mausklick mit Klick verarbeiten. Wenn ein Klick erkannt wird, kann dieser angezeigt werden: $ („div [name = 'spoilbutton']“) Click (function () {If ($ (this).next (this).css („display“) = =”blockieren”) {
Schritt 6
Dann schreibe Erbe. Innerhalb eines div befindet sich der Text in Absatz p, dessen Inhalt in einem span-Tag platziert wird: $ (this).children („p“). Children („span“). Html („Show text“); Collapse offener Spoiler. Wenn es nicht geöffnet ist, erweitern Sie den Text. Dieser Schritt basiert auf der Vererbungsregel: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html („ Text ausblenden “); $ (dies).next (dies).slideDown („ normal “);} return false; })
Schritt 7
Dann wird der Mausklick auf die Schaltfläche aufgezeichnet, wodurch das Skript den Spoiler aus- und einblendet. $ ("P [name = 'spoilbutton']"). Click (function () {If ($ (this).next (this).css ("display") = "block")") {$ (this).next (this).slideUp („normal“); $ (this).html („Hide“);} return false;}); Spoiler bereit. Es erscheint, wenn ein passender DIV-Block gefunden wird.
