Ici, vous allez apprendre comment faire une fenêtre pour indiquer le nombre de lignes et de colonnes pour le BBCode Tableau afin que cela soit généré automatiquement.
Tout d'abord, téléchargez le pack ci-dessous et mettez les fichiers dans le dossier "template" du style.
Attention: avant toute modification, nous vous recommandons de faire une sauvegarde des fichiers que vous allez modifier.
» 1. Création du BBCode
Nous allons ici, vous expliquez comment créer le BBCode via le panneau d'administration et ce qu'il contient. Pour cela, je vous recommande de lire cette documentation concernant la création du BBCode Tableau.
» 2. Modifications du fichier de langue
Ouvrez le fichier « language/fr/common.php ».
Cherchez:
Code : Tout sélectionner
?>
Code : Tout sélectionner
// BBCode Tableau
$lang = array_merge($lang, array(
'BBCODE_TABLE_LINES' => 'Nombre de lignes à insérer',
'BBCODE_TABLE_COLLUMNS' => 'Nombre de colonnes à insérer',
'BBCODE_TABLE_SUBMIT' => 'Insérer dans le message',
'INSERT_TABLE' => 'Insérer un tableau',
'INSERT_TABLE_EXPLAIN' => 'A l’aide de cette fenêtre, vous pourrez insérer un tableau avec autant de colonnes et de lignes souhaités',
));
Dans cette partie, nous allons vous expliquer ce qu'il faut modifier pour avoir une fenêtre modale qui permette d'indiquer le nombre de lignes et de colonnes afin de générer le BBCode adéquat.
Ouvrez le fichier template « styles/{TON_THEME}/theme/content.css ».
A la fin, ajoutez:
Code : Tout sélectionner
/* PopupHelp
----------------------------------------*/
#backgroundPopup {
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:100%;
width:100%;
top:0;
left:0;
background:#000000;
border:1px solid #cecece;
z-index:1;
}
#popupHelp{
display:none;
position:fixed;
_position:absolute; /* hack for internet explorer 6*/
height:384px;
width:600px;
background:#FFFFFF;
border:2px solid #333333;
z-index:2;
padding:12px;
font-size:13px;
}
#popupHelp .image-left {
float: left;
padding-right: 7px;
}
#popupHelp .image-right {
float: right;
padding-left: 7px;
}
#popupHelp h1 {
text-align:left;
color:#000000;
font-size: 1.3em;
border-bottom: 1px dotted #D3D3D3;
padding-bottom:2px;
margin-bottom:20px;
}
#popupHelpClose {
cursor: pointer;
font-size:14px;
line-height:14px;
right:6px;
top:4px;
position:absolute;
color:#000000;
font-weight:700;
display:block;
}
#popupHelp p {
font-size: 0.95em;
text-align: justify;
}
#popupHelp p.special {
font-size: 0.95em;
text-align: justify;
padding-left: 10px;
padding-right: 10px;
}
#popupHelp p.right {
font-size: 0.95em;
text-align: right;
}
#popupHelp p.footer {
font-size: 0.95em;
text-align: right;
margin-top: 170px;
}
Cherchez:
Code : Tout sélectionner
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>
Code : Tout sélectionner
<script type="text/javascript" src="{T_TEMPLATE_PATH}/javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/javascript/windows.js"></script>
Cherchez:
Code : Tout sélectionner
var show_panel = 'options-panel';
Code : Tout sélectionner
/**************************************************
* Fonction insert_table()
* Auteur: Dakin Quelia
***************************************************/
function insert_table()
{
var nb_lines = document.getElementById('nb_lines').value;
var nb_collumns = document.getElementById('nb_collumns').value;
var lines_begin = "[tr]";
var lines_end = "[/tr]";
var collumns = "[td]Ma colonne[/td]";
var table = "[table]";
for (i=0; i<nb_lines; i++)
{
table += lines_begin;
for (j=0; j<nb_collumns; j++)
{
table += collumns;
}
table += lines_end;
}
table += "[/table]";
insert_text (table);
}
Code : Tout sélectionner
<div id="format-buttons">
Code : Tout sélectionner
<div id="popupHelp">
<a id="popupHelpClose">x</a>
<h1>{L_INSERT_TABLE}</h1>
<p>{L_INSERT_TABLE_EXPLAIN}</p>
<form name="table" id="table">
<fieldset class="fields1">
<dl>
<dt><label>{L_BBCODE_TABLE_LINES}:</label></dt>
<dd><input type="text" size="15" name="nb_lines" id="nb_lines" /></dd>
</dl>
<dl>
<dt><label>{L_BBCODE_TABLE_COLLUMNS}:</label></dt>
<dd><input type="text" size="15" name="nb_collumns" id="nb_collumns" /></dd>
</dl>
</fieldset>
<p class="footer">
<br clear="all" /><input type="button" onclick="insert_table()" class="button1" value="{L_BBCODE_TABLE_SUBMIT}" />
</p>
</form>
</div>
<div id="backgroundPopup"></div>
Code : Tout sélectionner
<div id="format-buttons">
Code : Tout sélectionner
<input type="button" class="button1" accesskey="b" name="help" value=" Tableau " style="font-weight: normal; width: 50px" id="help" title="{L_BBCODE_TABLE}" />