JQuery Spoiler
Inviato: 08/11/2011, 14:31
Ciao, è il mio primo post in questo forum..
Ero indecisa se postare qui o nella sezione mod.
Ho creato uno spoiler usando JQuery, grazie a questa libreria ho potuto creare uno spoiler con effetto animato di apertura e chiusura, e con un codice HTML pulito, cosa molto utile per tenere gli argomenti leggeri quando si utilizzano molti spoiler.
Direi che questa è la versione 1.08.11, non so se lo aggiornerò ulteriormente, ameno ché non troviate dei problemi o mi consigliate qualche miglioria.
Per vedere una demo potete visitare questo link:
http://www.allise.net/forums/viewtopic.php?f=42&t=489
Io lo ho ottimizzato graficamente per il mio template, ma è molto semplice modificarlo per soddisfare le vostre esigenze.
Il codice in JQuery convive pacificamente con altre libreria Javascript grazie all'utilizzo della funzione compatibilità di JQuery.
Nella demo infatti il sito utilizza Mootools e lo spoiler in JQuery senza alcun problema.
Aprite: /styles/vostro_tema/template/overall_header.html
Cercate </head>
Aggiungete subito prima:
Salvate e chiudete.
Aprite: /styles/vostro_tema/theme/common.css
Andate in fondo al file.
Inserite in fondo:
Accedete all'Admin Control Panel di phpBB ed andate nella scheda Contenuti > BBcode.
Cliccate su Aggiungi nuovo BBcode.
Uso del BBCode:
Trasforma in HTML:
Aiuto in linea:
Pulite la cache del forum e siete pronti per utilizzare lo spoiler.
Spero di non aver sbagliato nulla nell'esposizione del BBcode,
zau. ^.^"
Ero indecisa se postare qui o nella sezione mod.
Ho creato uno spoiler usando JQuery, grazie a questa libreria ho potuto creare uno spoiler con effetto animato di apertura e chiusura, e con un codice HTML pulito, cosa molto utile per tenere gli argomenti leggeri quando si utilizzano molti spoiler.
Direi che questa è la versione 1.08.11, non so se lo aggiornerò ulteriormente, ameno ché non troviate dei problemi o mi consigliate qualche miglioria.
Per vedere una demo potete visitare questo link:
http://www.allise.net/forums/viewtopic.php?f=42&t=489
Io lo ho ottimizzato graficamente per il mio template, ma è molto semplice modificarlo per soddisfare le vostre esigenze.
Il codice in JQuery convive pacificamente con altre libreria Javascript grazie all'utilizzo della funzione compatibilità di JQuery.
Nella demo infatti il sito utilizza Mootools e lo spoiler in JQuery senza alcun problema.
Aprite: /styles/vostro_tema/template/overall_header.html
Cercate </head>
Aggiungete subito prima:
Codice: Seleziona tutto
<!-- Inizio Funzione SPOILER -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// Inizio Funzione SPOILER
jQuery.noConflict();
jQuery(document).ready( function() {
jQuery('.spoiler .button').click( function() {
if(jQuery(this).hasClass('hidden')) {
jQuery(this).html('NASCONDI CONTENUTO').removeClass('hidden').addClass('showed').parent().next('div').slideDown('fast');
}
else
{
jQuery(this).html('MOSTRA CONTENUTO').removeClass('showed').addClass('hidden').parent().next('div').slideUp('fast');
}
}) (jQuery);
});
// Fine Funzione SPOILER
</script>Aprite: /styles/vostro_tema/theme/common.css
Andate in fondo al file.
Inserite in fondo:
Codice: Seleziona tutto
/* SPOILER Style */
.box-spoiler {
border-radius: 8px 8px 8px 8px;
background: #343434;
border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.spoiler div {
padding: 5px 10px 5px 10px;
margin: 10px 0 10px 0;
}
.spoilerButton {
font-size: 0.8em;
font-weight: bold;
}
.spoilerButton a {
font-weight: normal;
}
Cliccate su Aggiungi nuovo BBcode.
Uso del BBCode:
Codice: Seleziona tutto
[spoiler]{TEXT}[/spoiler]Codice: Seleziona tutto
<div class="spoiler">
<p class="spoilerButton">SPOILER: <a href="javascript:void(0)" class="hidden button">MOSTRA CONTENUTO</a></p>
<div class="box-spoiler" style="display: none;">
{TEXT}
</div>
</div>Codice: Seleziona tutto
Spoiler: [spoiler]Testo Nascosto Qui[/spoiler]Spero di non aver sbagliato nulla nell'esposizione del BBcode,
zau. ^.^"