Le spoiler est un outil pratique pour le site. Il est largement utilisé dans divers forums et blogs, permettant à l'utilisateur de masquer un élément spécifique au moment d'appuyer sur un bouton. De plus, le spoiler a fière allure sur le site et aide à masquer les parties qui surchargent inutilement la page.
Il est nécessaire
Bibliothèque Jquery
Instructions
Étape 1
Le spoiler peut être implémenté à l'aide de la bibliothèque populaire de plug-ins jquery écrite dans le langage de programmation Java Script. Il permet de mettre en œuvre une interaction complète du langage de programmation avec le code de balisage HTML de la page. La connexion jquery se fait en HTML à l'aide de la balise . Vous devez spécifier l'emplacement où se trouve le script et définir son type: $ (document).ready (function ()
Étape 2
Le fragment de texte spécifié dans un certain paragraphe doit être enfermé dans un calque séparé - un div, à l'aide duquel le spoiler lui-même sera contrôlé: Sasha a marché le long de l'autoroute et a sucé le séchage.
Étape 3
Ensuite, vous devez créer devant tous les div nommés spoil les boutons correspondants qui réduiront et développeront le texte. Tout d'abord, le spoiler lui-même est masqué à l'aide de la fonction standard "hide ()": $ ("div [name = 'spoil']"). Hide (); Ensuite, vous devez créer un texte et une image pour tous les spoilers, qui servira de fond aux boutons: $ (“P [nom = 'spoilbutton']”). Html (“Afficher le texte”);
Étape 4
Trouvez tous les boutons sur la page et vérifiez les en-têtes de premier niveau devant le bouton. Pour ce faire, créez une condition qui recherchera les balises h1 par nom. Le texte du titre spécifié s'enroule dans le div lui-même: $ ("p [nom = 'spoilbutton']"). Each (function () {If ($ (this).prev (this).get (0).tagName == "H1") {Var NewSpoilButton =" "+ $ (ceci).prev (ceci).html () +" Afficher le texte "; $ (ceci).prev (ceci).replaceWith (" "); $ (ceci).replaceWith (NewSpoilButton);}})
Étape 5
Ensuite, vous devez gérer le clic du bouton de la souris avec un clic. Si un clic est détecté, il peut être affiché: $ ("div [nom = 'bouton spoil']"). Cliquez sur (function () {If ($ (this).next (this).css ("display") = =” bloc”) {
Étape 6
Ensuite, écrivez héritage. Dans un div, le texte est dans le paragraphe p, dont le contenu est placé dans une balise span: $ (this).children ("p"). Children ("span"). Html ("Afficher le texte"); Collapse becquet ouvert. S'il n'est pas ouvert, développez le texte. Cette étape est basée sur la règle d'héritage: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html (" Masquer le texte "); $ (this).next (this).slideDown (" normal ");} return false; })
Étape 7
Ensuite, le clic même de la souris sur le bouton est enregistré, par lequel le script masquera et dépliera le spoiler. $ ("P [nom = 'spoilbutton']"). Cliquez sur (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp ("normal"); $ (this).html ("Hide");} return false;}); Spoiler ready. Il apparaîtra lorsqu'un bloc DIV correspondant est trouvé.
