Gli spoiler vengono utilizzati per nascondere determinati contenuti da un post del blog, per motivi strategici o estetici. Questi spoiler nascondono i contenuti e li rivelano solo quando l'utente lo richiede.
In questo post, esamineremo quattro metodi per aggiungere uno spoiler , così potrai scegliere quello più adatto alle tue esigenze.
Spoiler solo con CSS
Con questo metodo, sfrutteremo i vantaggi del CSS senza dover ricorrere a script: solo CSS e nient'altro. Tuttavia, presenta due svantaggi: il primo è che sono necessari due pulsanti: uno per mostrare il contenuto e uno per nasconderlo. L'altro è che quando il contenuto viene visualizzato, la pagina scorre leggermente fino a raggiungere la pagina in cui si trova il contenuto.Il codice che useresti nei tuoi post per questo tipo di spoiler CSS sarebbe il seguente:
<input onclick="window.location='# show1 ';" type="button" value="Mostra"/>
<input onclick="window.location='#';" type="button" value="Nascondi" />
<div id=" spoiler1 ">
<div id=" show1 ">
...Ecco il contenuto che vuoi nascondere...
</div>
</div>
<style>
#spoiler1 > div {display: none;}
#spoiler1 > div:target {display: block;}
</style>
In rosso, dovresti contrassegnare il contenuto che verrà nascosto. Dovresti cambiare il colore blu ogni volta che aggiungi uno spoiler. Ad esempio, se ne aggiungi un altro, cambia spoiler1 in spoiler2 e mostra1 in mostra2.
Spoiler che utilizza Javascript
Questo tipo di spoiler è simile allo spoiler che abbiamo visto qualche anno fa, solo leggermente modificato. Richiede pochissimo JavaScript per essere utilizzato. Praticamente fa la stessa cosa dello spoiler CSS, ma richiama gli stili tramite JavaScript.
<input type="button" onclick="if(document.getElementById(' spoiler1 ') .style.display=='none') {document.getElementById(' spoiler1 ') .style.display=''; this.value = 'Nascondi'; }else{document.getElementById(' spoiler1 ') .style.display='none';this.value = 'Mostra'; }" value="Mostra"/><div id=" spoiler1 " style="display:none">
...Ecco il contenuto che vuoi nascondere...
</div>
Allo stesso modo, dovrai cambiare l'ID spoiler1 (ogni volta che appare) ogni volta che vuoi aggiungerne uno nuovo.
Spoiler usando Scriptaculous
Abbiamo già visto questo metodo nel post " Espandere e comprimere parti di un post ". A differenza dei metodi precedenti, questo metodo visualizza i contenuti nascosti con un effetto scorrevole, conferendogli un aspetto più accattivante.
Per utilizzarlo dobbiamo avere Scriptaculous, se non lo hai ancora aggiungilo prima </head>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js'/>E quando vuoi mettere lo spoiler in un post usa questo codice:
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1/scriptaculous.js'/>
<input onclick='Effect.toggle(" spoiler1 ", "slide"); return false' type='button' value='Show'/><div id=' spoiler1 ' style='display: none;'>In questo caso dovrai cambiare anche le parti blu ogni volta che vorrai aggiungerne altre.
...Ecco il contenuto che vuoi nascondere...
</div>
Spoiler usando jQuery
Infine, vediamo come nascondere i contenuti con jQuery, che ci permette anche di ottenere un effetto scorrevole mostrando o nascondendo il contenuto spoiler.
Se non hai jQuery, mettilo dopo <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
E nel tuo contributo usa questo codice ogni volta che vuoi inserire uno spoiler:
<input type="button" id=" spoiler1 " value="Mostra"/>Anche in questo caso devi cambiare ciò che è in blu ogni volta che vuoi aggiungerne uno nuovo, ad esempio spoiler1 in spoiler2 e show1 in show2
<div class=" show1 " style="display: none;">
...Ecco il contenuto che vuoi nascondere...
</div>
<script>jQuery.noConflict();jQuery(document).ready(function(){jQuery('# spoiler1 ').click(function(){jQuery('. show1 ').slideToggle("slow");});});</script>
Ed è semplicissimo nascondere i contenuti nei post del tuo blog , anche in un gadget HTML/Javascript. Come puoi vedere, i codici sono super brevi e facili da applicare. Puoi nascondere qualsiasi contenuto: un'immagine, un testo, un player, video, ecc.
Trovato questo articolo interessante? Condividilo sulla tua rete di contatti Twitter, sulla tua bacheca su Facebook per suggerire questo risultato nelle ricerche in Linkedin, Instagram o Pinterest. Diffondere contenuti che trovi rilevanti aiuta questo blog a crescere. Grazie! CONDIVIDI SU!
Post
Nessun commento:
Posta un commento