Dradra - Forum de test~


 

Partagez | 
 

 Script Spoiler façon FAQ - HTML

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
avatar
► La noble de Serdaigle ◄


Messages : 92
Date d'inscription : 02/01/2008
Localisation : Québec

Feuille de personnage
bla bla: lksdlksajnd
jsjhdkd: dfdsfsdgfg
ddfddd:

MessageSujet: Script Spoiler façon FAQ - HTML   Lun 10 Aoû - 16:45

Tuto pour créer un système de spoiler façon la FAQ - HTML -
Dans un widget, le message d'accueil, une page html, description d'un forum


* Tout d'abord copier-coller simplement tel quel dans un premier temps, histoire de se familiariser avec les tables.
Ensuite rien n'empêche de personnaliser ce tuto, ou juste de le personnaliser avec les balises standards du html.
* Le tout a été divisé en parties bien distinctes, à vous de remplir les titres, le contenu, d'aligner, de colorer, même de mettre des couleurs ou des images en fond des tables.
Code:
<script src="/js_58/collapsible_faq.js"></script>

<table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td class="catHead" height="28" align="center"><span class="softtitle">TITRE DE LA CATEGORIE 1</span></td>
</tr>
<tr>
<td class="row1" valign="top">
<div onclick="return CFAQ.display('faq_a_1', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_1', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 1.1</b>
</span>
</div>
<div id="faq_a_1" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 1.1<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="row2" valign="top">
<div onclick="return CFAQ.display('faq_a_2', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_2', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 1.2</b>
</span>
</div>
<div id="faq_a_2" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 1.2<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>
</table><br clear="all" />

<table class="forumline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td class="catHead" height="28" align="center"><span class="softtitle">TITRE DE LA CATEGORIE 2</span></td>
</tr>
<tr>
<td class="row1" valign="top">
<div onclick="return CFAQ.display('faq_a_3', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_3', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 2.1</b>
</span>
</div>
<div id="faq_a_3" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 2.1<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>

<tr>
<td class="row2" valign="top">
<div onclick="return CFAQ.display('faq_a_4', false);" style="width: 100%; cursor: pointer; cursor: hand;">
<span class="gen">
<a class="postlink" href="javascript:void(0)" onclick="return CFAQ.display('faq_a_4', true);" onfocus="this.blur();">
<b>TITRE CHAPITRE 2.2</b>
</span>
</div>
<div id="faq_a_4" style="display: none;">
<table class="bodyline" width="100%" cellspacing="1" cellpadding="0" border="0" align="center">
<tr>
<td valign="top"><span class="postbody">CONTENU 2.2<br />
</span></td>
</tr>
</table>
</div>
</td>
</tr>
</table><br clear="all" />

* Le principe est simple :
- c'est un tableau sous forme de catégorie
- contenant des tables sous formes de chapitres
- qui contiennent le contenu sous formes de lignes
* Dans l'exemple il y a deux catégories contenant deux chapitres (tables) qui contiennes deux contenus (textes, images, ou les deux).
* Pour les plus avancés, et même pour les moyens (j'y suis bien arrivée), vous pouvez nuancer les couleurs des tables en alternance, bref, plein de possibilités.
* Ne fonctionne pas dans un post, et ne s'ouvre pas en étant dans une catégorie s'il est en description d'un forum, dans ce cas précis, que sur l'index du forum.



Bien du plaisir.

EDIT : Petite astuce : Coller d'abord ce code tel quel dans une page html ainsi on peut faire des prévisualisations et mieux travailler sur le reste.



Tout d'abord, pour ceux qui auraient déjà copier le script, plus haut, il est juste mais par pure coïncidence et il vaut mieux le rendre conforme (comme je viens de le faire avec celui plus haut), si vous voulez vous y retrouvez plus tard avec un autre de ces tableaux.
C'est en fait un point logique, de numération des tables qui constituent ce script.


* Il y a trois fois faq_a_X par table (X = le numéro de la table).
Ce numéro ne peut pas être le même d'une table à l'autre (plus, je crois bien sur la même page), mais il doit être le même sur les trois paramètres de la même table.
Ici, il y a 4 ouvertures, et donc ça se termine par 4.
Si vous voulez insérer un autre tableau, il faudra commencer en continuant avec 5 (ou autre).
* L'autre point, est le numéro du script (tout au début du tuto).
Vérifiez bien que c'est aussi le 58 comme pour FA.
Pour ça, vous prenez le code source d'une page de votre forum (par le clic droit ou Ctrl U avec MF) et cherchez .js juste à gauche vous aurez le numéro.
* Il faut être très concentré sur les fermetures des balises !
Sinon vous pouvez planter le tout.



Voilà, là c'est exhaustif.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://tempsnouveau.forumotion.com
 

Script Spoiler façon FAQ - HTML

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Dradra - Forum de test~ :: Catégorie 3 :: 
Forum 3.1
-