FluxBB.fr

alex83270

Membre

Inscription : 06-11-2013

Messages : 162

Ajout d'une balise [spoiler] personalisable.

Bonjour,
j'espère réussir à aider des personne comme beaucoup m'ont aidé.

Voici une petite mod / astuce qui a été créé à partir de :
http://fluxbb.fr/forums/viewtopic.php?id=13335

Un grand merci à David18 qui m'a énormément aidé depuis que je suis sur ce site.

Avec un peu de mélange de :
http://www.kafeinemarketing.com/collapsing-divs-jquery/

Donc voici un spoiler qui marche et personnalisable avec une séparation du teaser et du contenu caché, elle peut être aussi utilisé avec la FluxToolbar.

Il est aussi possible de créer une section dans le help.php mais je ne l'ai pas fais dans la mod.

PS : Je suis un débutant donc a mon avis des erreurs il y en aura mais pour l'instant j'en ai pas.

Download : http://www.mediafire.com/view/du2dgc4c9 … oiler).txt

Pastebin : http://pastebin.com/RQt2SzhY

Astuce : Pour ceux qui veulent changer "spoiler" par "montrer" et "cacher" voici le code :

parser.php

CHANGER L'ANCIEN CODE PAR :

	$replace[] = '<div class="spoiler"><div class="teaser"><p class="show">Montrer</p><p class="hide"><Cacher></p></div><div class="contenu">$1</div></div>'; // SPOILER




main.tpl

CHANGER L'ANCIEN CODE PAR :

// AJOUTER || SPOILER
$(document).ready(function() {
jQuery(".contenu").hide();
jQuery(".teaser").click(function()
{
jQuery(this).next(".contenu").slideToggle(500);
var title = $('.show');
if (title.text() == 'Montrer') title.text('Cacher');
else title.text('Montrer');
});
});





style.css

CHANGER L'ANCIEN CODE PAR :

 /* AJOUTER || SPOILER
 ----------------------------------------------------------------*/
div.spoiler {
	margin: 0 0 5px 0;
 }

div.teaser {
	padding: 5px 10px;
	margin-bottom: -5px;
	cursor: pointer;
	position: relative;
	background-color: rgb(35, 35, 35);
	border-top: 5px solid rgb(48, 206, 0);
	width: 7.5%;
 }
 
p.show {
	color: rgb(48, 206, 0);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0px;
 }

p.hide {
	color: rgb(48, 206, 0);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	padding: 0px;
 }

div.contenu {
	padding: 5px 10px;
	background-color: rgb(35, 35, 35);
	color: white;
	border-top: 5px solid rgb(48, 206, 0);
 }

/!\ Petit Problème /!\ :

petit problème, la balise ne suis pas le texte,
si on centre le texte ne suis pas.

Exemple :

Amicalement.

Dernière modification par alex83270 (18-01-2014 20:33:17)