Onglets

Les onglets permettent de séparer les différentes parties de la page.

Pour pouvoir les utiliser, il faut utiliser une fonction de Dotclear 2, à appeler dans la balise <head> de la page :

<?php echo dcPage::jsPageTabs($default_tab); ?>

On définit $default_tab au début du fichier index.php, dans le bloc d'instructions PHP, cela nous permettra ensuite de changer l'onglet qui s'affiche au chargement de la page.

$default_tab = 'tab-1';
 
if (isset($_REQUEST['tab'])) {
	$default_tab = $_REQUEST['tab'];
}

Onglets interactifs

Les onglets interactifs sont chargés sur la page en même temps, du code Javascript permet de passer de l'un à l'autre facilement. Ils se construisent en créant des <div> avec les attributs suivants :

id pour identifier l'onglet
la classe CSS doit être multi-part
l'attribut title="" est utilisé comme titre de l'onglet

Exemple :

<div class="multi-part" id="tab-1" title="<?php echo __('Tab 1'); ?>">
	<?php echo(__('Hello World!')); ?>
</div>
 
<div class="multi-part" id="tab-2" title="<?php echo __('Tab 2'); ?>">
	<?php echo(__('Hello World!')); ?>
</div>

"Faux" onglets

Les faux onglets nécessitent de recharger la page. Ce sont en fait des liens qui prennent la forme d'un onglet, ils utilisent la classe multi-part et dont le contenu est utilisé comme titre de l'onglet.

<a href="<?php echo($p_url.'&amp;tab=fake-tab'); ?>" class="multi-part">
	<?php echo(__('Fake tab')); ?></a>

Note :

$p_url renvoie l'URL de la page d'administration et fake-tab est l'identifiant de l'onglet

Lorsque le lien est cliqué, $default_tab obtient la valeur fake-tab.

Pour que l'onglet s'affiche à la place du lien, il faut utiliser une condition :

<?php if ($default_tab == 'fake-tab') { /* l'onglet */ ?>
	<div class="multi-part" id="fake-tab"
		title="<?php echo __('Fake tab'); ?>">
		<?php echo(__('Hello World!')); ?>
	</div>
<?php } else { /* le lien */ ?>
	<a href="<?php echo($p_url.'&amp;tab=fake-tab'); ?>"
		class="multi-part">
	<?php echo(__('Fake tab')); ?></a>
<?php } ?>

Vrais et "faux" onglets

On peut utiliser les conditions pour utiliser les différents types d'onglets, n'avoir que des faux onglets ou n'avoir qu'un faux-onglet et plusieurs liens aux chargement de la page.

<?php if ($default_tab == 'fake-tab') { ?>
	<a href="<?php echo($p_url.'&amp;tab=tab-1'); ?>"
		class="multi-part">
	<?php echo(__('Tab 1')); ?></a>
	<a href="<?php echo($p_url.'&amp;tab=tab-2'); ?>"
		class="multi-part">
	<?php echo(__('Tab 2')); ?></a>
	<a href="<?php echo($p_url.'&amp;tab=tab-3'); ?>"
		class="multi-part">
	<?php echo(__('Tab 3')); ?></a>
	<div class="multi-part" id="fake-tab"
		title="<?php echo __('Fake tab'); ?>">
		<?php echo(__('Hello World!')); ?>
	</div>
<?php } else { ?>
	<div class="multi-part" id="tab-1"
		title="<?php echo __('Tab 1'); ?>">
		<?php echo(__('Hello World!')); ?>
	</div>
	<div class="multi-part" id="tab-2"
		title="<?php echo __('Tab 2'); ?>">
		<?php echo(__('Hello World!')); ?>
	</div>
	<div class="multi-part" id="tab-3"
		title="<?php echo __('Tab 3'); ?>">
		<?php echo(__('Hello World!')); ?>
	</div>
	<a href="<?php echo($p_url.'&amp;tab=fake-tab'); ?>"
		class="multi-part">
	<?php echo(__('Fake tab')); ?></a>
<?php } ?>