O spoiler é uma ferramenta conveniente para o site. É amplamente utilizado em diversos fóruns e blogs, permitindo ao usuário ocultar um elemento específico no momento de um pressionamento de botão. Além disso, o spoiler fica bem no site e ajuda a esconder as partes que sobrecarregam desnecessariamente a página.
É necessário
Biblioteca Jquery
Instruções
Passo 1
O spoiler pode ser implementado usando a popular biblioteca de plug-ins jquery escrita na linguagem de programação Java Script. É usado para implementar a interação total da linguagem de programação com o código de marcação HTML da página. A conexão jquery é feita usando HTML usando a tag . Você deve especificar o local onde o script está localizado e definir seu tipo: $ (documento).ready (função ()
Passo 2
O fragmento de texto especificado dentro de um determinado parágrafo deve ser colocado em uma camada separada - uma div, com a ajuda da qual o próprio spoiler será controlado: Sasha caminhou ao longo da rodovia e sugou secando.
etapa 3
Em seguida, você precisa criar na frente de todos os divs chamados botões correspondentes spoil que irão recolher e expandir o texto. Primeiro, o spoiler em si é escondido usando a função padrão "hide ()": $ (“div [name = 'spoil']”). Hide (); Em seguida, você precisa criar um texto e uma imagem para todos os spoilers, que será usado como fundo para os botões: $ (“P [name = 'spoilbutton']”). Html (“Mostrar texto”);
Passo 4
Encontre todos os botões na página e verifique os títulos de primeiro nível na frente do botão. Para fazer isso, crie uma condição que pesquisará tags h1 por nome. O texto do título especificado envolve o próprio div: $ (“p [name = 'spoilbutton']”). Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton = “” + $ (this).prev (this).html () +”Mostrar texto”; $ (this).prev (this).replaceWith (“”); $ (this).replaceWith (NewSpoilButton);}})
Etapa 5
Em seguida, você precisa controlar o clique do botão do mouse com o clique. Se um clique for detectado, ele pode ser exibido: $ (“div [name = 'spoilbutton']”). Click (function () {If ($ (this).next (this).css (“display”) = =”Bloquear”) {
Etapa 6
Em seguida, escreva herança. Dentro de uma div, o texto está no parágrafo p, cujo conteúdo é colocado em uma tag span: $ (this).children (“p”). Children (“span”). Html (“Show text”); Collapse spoiler aberto. Se não estiver aberto, expanda o texto. Esta etapa é baseada na regra de herança: $ (this).next (this).slideUp (“normal”);} else {$ (this).children (“p”). Children (“span”). Html (“Ocultar texto”); $ (isto).next (isto).slideDown (“normal”);} return false; })
Etapa 7
Em seguida, o próprio clique do mouse no botão é gravado, pelo qual o script irá ocultar e desdobrar o spoiler. $ (“P [name = 'spoilbutton']”). Clique em (function () {If ($ (this).next (this).css (“display”) =”block”) {$ (this).next (this).slideUp (“normal”); $ (this).html (“Hide”);} return false;}); Spoiler pronto. Ele aparecerá quando um bloco DIV correspondente for encontrado.
