El spoiler és una eina convenient per al lloc. S'utilitza àmpliament en diversos fòrums i blocs, cosa que permet a l'usuari amagar un element específic en prémer un botó. A més, el spoiler té bon aspecte al lloc i ajuda a amagar aquelles parts que sobrecarreguen innecessàriament la pàgina.
És necessari
Biblioteca Jquery
Instruccions
Pas 1
El spoiler es pot implementar mitjançant la popular biblioteca de connectors jquery escrita en el llenguatge de programació Java Script. S'utilitza per implementar una interacció completa del llenguatge de programació amb el codi de marcatge HTML de la pàgina. La connexió jquery es fa mitjançant HTML mitjançant l'etiqueta . Heu d'especificar la ubicació on es troba l'script i definir-ne el tipus: $ (document). Ready (function ()
Pas 2
El fragment de text especificat dins d’un determinat paràgraf s’ha d’incloure en una capa separada: una div, amb l’ajuda de la qual es controlarà el propi spoiler: Sasha va caminar per la carretera i es va assecar.
Pas 3
A continuació, heu de crear davant de tots els divs anomenats botons corresponents que es desplomaran i ampliaran el text. En primer lloc, el propi spoiler s'amaga mitjançant la funció estàndard "hide ()": $ (“div [name = 'spoil']””). Hide (); A continuació, heu de crear un text i una imatge per a tots els spoilers, que s'utilitzarà com a fons per als botons: $ ("P [name = 'spoilbutton']"). Html ("Mostrar text");
Pas 4
Cerqueu tots els botons de la pàgina i comproveu els encapçalaments del primer nivell davant del botó. Per fer-ho, creeu una condició que cerqui les etiquetes h1 per nom. El text del títol especificat s’ajusta al div: $ (“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);}})
Pas 5
A continuació, heu de gestionar el clic del botó del ratolí amb clic. Si es detecta un clic, es pot mostrar: $ (“div [name = 'spoilbutton']”). Feu clic a (funció () {If ($ (this).next (this).css (“display”) = = "Bloquejar") {
Pas 6
A continuació, escriviu l'herència. Dins d'una divisió, el text es troba al paràgraf p, el contingut del qual es col·loca en una etiqueta span: $ (this).children ("p"). Children ("span"). Html ("Show text"); Redueix spoiler obert. Si no està obert, amplieu el text. Aquest pas es basa en la regla d'herència: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html ($ (This).next (this).slideDown ("normal");} return false; })
Pas 7
A continuació, es registra el mateix clic del ratolí sobre el botó, mitjançant el qual l'script ocultarà i desplegarà el spoiler. $ ("P [name = 'spoilbutton']"). Feu clic a (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp ("normal"); $ (this).html ("Hide");} return false;}); Spoiler ready. Apareixerà quan es trobi un bloc DIV coincident.
