Lo spoiler è uno strumento utile per il sito. È ampiamente utilizzato in vari forum e blog, consentendo all'utente di nascondere un elemento specifico al momento della pressione di un pulsante. Inoltre, lo spoiler ha un bell'aspetto sul sito e aiuta a nascondere quelle parti che sovraccaricano inutilmente la pagina.
È necessario
Libreria Jquery
Istruzioni
Passo 1
Lo spoiler può essere implementato utilizzando la popolare libreria plug-in jquery scritta nel linguaggio di programmazione Java Script. Viene utilizzato per implementare la piena interazione del linguaggio di programmazione con il codice di markup HTML della pagina. La connessione jquery avviene tramite HTML utilizzando il tag . È necessario specificare la posizione in cui si trova lo script e impostarne il tipo: $ (document).ready (function ()
Passo 2
Il frammento di testo specificato all'interno di un determinato paragrafo deve essere racchiuso in un livello separato: un div, con l'aiuto del quale verrà controllato lo spoiler stesso: Sasha ha camminato lungo l'autostrada e ha succhiato l'asciugatura.
Passaggio 3
Successivamente, è necessario creare davanti a tutti i div denominati spoiler i pulsanti corrispondenti che comprimeranno ed espandono il testo. Innanzitutto, lo spoiler stesso viene nascosto utilizzando la funzione standard "hide()": $ ("div [name = 'spoil']"). Nascondi (); Successivamente, è necessario creare un testo e un'immagine per tutti gli spoiler, che sarà utilizzato come sfondo per i pulsanti: $ (“P [name = 'spoilbutton']”) Html (“Mostra testo”);
Passaggio 4
Trova tutti i pulsanti nella pagina e controlla le intestazioni di primo livello davanti al pulsante. Per fare ciò, crea una condizione che cercherà i tag h1 per nome. Il testo del titolo specificato va a capo nel div stesso: $ ("p [name = 'spoilbutton']"). Each (function () {If ($ (this).prev (this).get (0).tagName == “H1”) {Var NewSpoilButton =“”+ $ (questo).prev (questo).html () +” Mostra testo”; $ (questo).prev (questo).replaceWith (“”); $ (questo).replaceWith (NewSpoilButton);}})
Passaggio 5
Successivamente, è necessario gestire il clic del pulsante del mouse con il clic. Se viene rilevato un clic, può essere visualizzato: $ ("div [name = 'spoilbutton']"). Click (function () {If ($ (this).next (this).css ("display") = =” blocco”) {
Passaggio 6
Quindi scrivi l'ereditarietà. All'interno di un div, il testo è nel paragrafo p, il cui contenuto è inserito in un tag span: $ (this).children ("p"). Children ("span"). Html ("Mostra testo"); Comprimi spoiler aperto. Se non è aperto, espandere il testo. Questo passaggio si basa sulla regola dell'ereditarietà: $ (this).next (this).slideUp ("normal");} else {$ (this).children ("p"). Children ("span"). Html (“Nascondi testo”); $ (questo).next (questo).slideDown (“normale”);} return false; })
Passaggio 7
Quindi viene registrato il clic del mouse sul pulsante, con il quale lo script nasconderà e aprirà lo spoiler. $ ("P [nome = 'spoilbutton']"). Fare clic su (function () {If ($ (this).next (this).css ("display") = "block") {$ (this).next (this).slideUp ("normal"); $ (this).html ("Hide");} return false;}); Spoiler pronto. Apparirà quando viene trovato un blocco DIV corrispondente.
