El spoiler es una herramienta conveniente para el sitio. Es ampliamente utilizado en varios foros y blogs, lo que permite al usuario ocultar un elemento específico en el momento de presionar un botón. Además, el spoiler se ve bien en el sitio y ayuda a ocultar aquellas partes que sobrecargan innecesariamente la página.
Es necesario
Biblioteca Jquery
Instrucciones
Paso 1
El spoiler se puede implementar utilizando la popular biblioteca de complementos jquery escrita en el lenguaje de programación Java Script. Se usa para implementar la interacción completa del lenguaje de programación con el código de marcado HTML de la página. La conexión jquery se realiza usando HTML usando la etiqueta . Debe especificar la ubicación donde se encuentra el script y establecer su tipo: $ (documento). Listo (función ()
Paso 2
El fragmento de texto especificado dentro de un determinado párrafo debe estar encerrado en una capa separada, un div, con la ayuda de la cual se controlará el spoiler: Sasha caminó por la carretera y succionó mientras se secaba.
Paso 3
A continuación, debe crear delante de todos los divs denominados spoil botones correspondientes que colapsarán y expandirán el texto. Primero, el spoiler en sí se oculta usando la función estándar "hide ()": $ (“div [name = 'spoil']”). Hide (); Luego, necesitas crear un texto y una imagen para todos los spoilers, que se utilizará como fondo para los botones: $ (“P [name = 'spoilbutton']”). Html (“Mostrar texto”);
Paso 4
Busque todos los botones de la página y compruebe los encabezados del primer nivel delante del botón. Para hacer esto, cree una condición que busque etiquetas h1 por nombre. El texto del título especificado se ajusta al div en sí mismo: $ (“p [name = 'spoilbutton']”). Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (esto).prev (esto).html () +”Mostrar texto”; $ (esto).prev (esto).replaceWith (“”); $ (esto).replaceWith (NewSpoilButton);}})
Paso 5
A continuación, debe manejar el clic del botón del mouse con un clic. Si se detecta un clic, se puede mostrar: $ (“div [name = 'spoilbutton']”). Haga clic en (function () {If ($ (this).next (this).css (“display”) = = "Bloque") {
Paso 6
Luego escribe herencia. Dentro de un div, el texto está en el párrafo p, cuyo contenido se coloca en una etiqueta span: $ (this).children ("p"). Children ("span"). Html ("Mostrar texto"); Collapse alerón abierto. Si no está abierto, expanda el texto. Este paso se basa en la regla de herencia: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html ("Ocultar texto"); $ (esto).siguiente (esto).slideDown ("normal");} return false; })
Paso 7
Luego se registra el mismo clic del mouse en el botón, mediante el cual el guión ocultará y desplegará el spoiler. $ (“P [name = 'spoilbutton']”). Haga clic en (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (esto).slideUp ("normal"); $ (esto).html ("Ocultar");} devolver falso;}); Spoiler listo. Aparecerá cuando se encuentre un bloque DIV coincidente.
