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.

<ul class="pseudo-tabs">
<li><a href="#">Tab1</a></li>
<li><a href="#">Tab2</a></li>
<li><a href="#">Tab3</a></li>
<li><a href="#">Fake tab</a></li>
</ul>

Les pseudo-onglets permettent d'ajouter des sous-pages qui sont des liens vers d'autres pages, par opposition aux onglets qui sont des sections internes à la page.

Les pseudo-onglets sont à positionner immédiatement après le breadcrumb (ici un hr simule le trait sous le breadcrumb)