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

Toutes les documentations phpBB seront ici.
Verrouillé
Avatar du membre
Dakin Quelia
Webmaster
Webmaster
Messages : 565
Enregistré le : ven. 27 nov. 2009 05:47
Localisation : Belgique
Contact :

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

Message par Dakin Quelia »

» 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é 566 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: 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.

Verrouillé

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 16 invités