JQuery Spoiler

Interessanti BBCode per il tuo phpBB.
Rispondi
Avatar utente
Lady R
phpBB Expert
phpBB Expert
Messaggi: 900
Iscritto il: 08/11/2011, 13:43
Sesso: Femmina
Versione: 3.0.9
Server: UNIX/Linux
PHP: 5.3.8
Database: MySQLi
Contatta:

JQuery Spoiler

Messaggio da Lady R » 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:

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>
Salvate e chiudete.

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;
}
Accedete all'Admin Control Panel di phpBB ed andate nella scheda Contenuti > BBcode.
Cliccate su Aggiungi nuovo BBcode.

Uso del BBCode:

Codice: Seleziona tutto

[spoiler]{TEXT}[/spoiler]
Trasforma in HTML:

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>
Aiuto in linea:

Codice: Seleziona tutto

Spoiler: [spoiler]Testo Nascosto Qui[/spoiler]
Pulite la cache del forum e siete pronti per utilizzare lo spoiler.


Spero di non aver sbagliato nulla nell'esposizione del BBcode,
zau. ^.^"
Ultima modifica di Lady R il 17/11/2011, 12:40, modificato 1 volta in totale.

Avatar utente
Haku
Utente
Utente
Messaggi: 2529
Iscritto il: 22/09/2009, 22:36
Sesso: Maschio
Versione: 3.0.9
Server: UNIX/Linux
Contatta:

Re: JQuery Spoiler

Messaggio da Haku » 08/11/2011, 15:15

Effetto molto bello.
Si potrebbe avere una versone con lo spoiler contornato? (intendo contornato come i nomali spoiler senza avere il testo senza contorno).

Avatar utente
Lady R
phpBB Expert
phpBB Expert
Messaggi: 900
Iscritto il: 08/11/2011, 13:43
Sesso: Femmina
Versione: 3.0.9
Server: UNIX/Linux
PHP: 5.3.8
Database: MySQLi
Contatta:

Re: JQuery Spoiler

Messaggio da Lady R » 08/11/2011, 15:46

Grazie ^.^

Non so se ho capito correttamente la domanda.

l'ho creato uguale con l'aspetto del CODE:
HTML del BBcode:

Codice: Seleziona tutto

<dl class="spoiler">
	<dt>Spoiler: <a href="#" onclick="javascript:void(0)" class="hidden">Mostra contenuto</a></dt>
	<dd style="display: none;"> {TEXT} </dd>
</dl>
JQuery da inserire al posto di quello della guida:

Codice: Seleziona tutto

jQuery.noConflict();
jQuery(document).ready( function() {
	jQuery('.spoiler a').click( function() {		
		if(jQuery(this).hasClass('hidden')) {
			jQuery(this).html('Nascondi contenuto').removeClass('hidden').addClass('showed').parent().next('dd').slideDown('fast');
		}
		else
		{
			jQuery(this).html('Mostra contenuto nascosto').removeClass('showed').addClass('hidden').parent().next('dd').slideUp('fast');
		}			
	});
});

Avatar utente
Sonia
Utente
Utente
Messaggi: 214
Iscritto il: 29/04/2011, 8:50
Sesso: Femmina
Versione: 3.0.12
Server: UNIX/Linux
PHP: 5.3.3
Database: MySQL 5.1.49-community-log
Località: Cividale del Friuli (UD)
Contatta:

Re: JQuery Spoiler

Messaggio da Sonia » 13/06/2014, 14:06

Ciao, ho provato a metterlo ma mi và in conflitto con lo scroll automatico della mchat e la navigazione della breadcrumb, suggerimenti?
Solo due cose sono infinite: "L'universo" e la "Stupidità Umana"
GamesItalia.it

Avatar utente
maro92
Utente
Utente
Messaggi: 3
Iscritto il: 05/05/2015, 23:53
Sesso: Maschio
Versione: 3.0.7
Server: Windows
Contatta:

Re: JQuery Spoiler

Messaggio da maro92 » 26/05/2015, 17:27

Sonia ha scritto:Ciao, ho provato a metterlo ma mi và in conflitto con lo scroll automatico della mchat e la navigazione della breadcrumb, suggerimenti?
Stesso problema, qualcuno ha una soluzione?

Avatar utente
brunino
Moderatore
Moderatore
Messaggi: 2810
Iscritto il: 12/01/2013, 16:35
Sesso: Maschio
Versione: 3.1.2
Server: UNIX/Linux
PHP: php 5.3
Database: mysql
Località: Toscana, Firenze
Contatta:

Re: R: JQuery Spoiler

Messaggio da brunino » 26/05/2015, 17:30

Versione 3.1?

Inviato dal mio GT-S5360 con Tapatalk 2
E' sempre gradito un grazie

Creo estensioni per phpBB 3.1 su misura: contattami via MP.
Mie Estensioni: Top Ten Topics | Ban List | Topic List
Visita il mio forum di test e sviluppo stili e estensioni phpBB 3.1

Rispondi

Torna a “BBCode”

Chi c’è in linea

Visitano il forum: Google Adsense [Bot] e 2 ospiti