Forum de Discussions

» BBCode Tableau avec fenêtre modale

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.

bbcode_tableau.zip: (24.14 Kio) Téléchargé 569 fois

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

?>

Avant, ajoutez:

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',
));

» 3. Modifications de fichiers templates et CSS

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;
}

Ouvrez le fichier template « styles/{TON_THEME}/template/overall_header.html ».

Cherchez:

Code : Tout sélectionner

<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

Après, ajoutez:

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>

Ouvrez le fichier template « styles/{TON_THEME}/template/posting_buttons.html ».

Cherchez:

Code : Tout sélectionner

	var show_panel = 'options-panel';

Après, ajoutez:

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);
	}

Cherchez:

Code : Tout sélectionner

<div id="format-buttons">

Avant, ajoutez:

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>

Cherchez à nouveau:

Code : Tout sélectionner

<div id="format-buttons">

Après, ajoutez:

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}" />

N'oubliez pas de rafraîchir le thème et le template et de vider le cache.

Forum de Discussions

[phpBB 3.0.x] BBCode Tableau avec fenêtre modale

[phpBB 3.0.x] BBCode Tableau avec fenêtre modale