Présentation

Le tag tabgroup crée un groupe d'onglets, parmi lesquels un seul onglet sera sélectionné (et sélectionnable).

Ce tag utilise MooTools? et fait appel au fichier js/taglib/tabgroup.js.

Forme Smarty

{* Génère un groupe d'onglet avec deux onglets qui affichent et masquent deux DIVs. *}
{tabgroup 
  id="monGroupDOnglets" 
  tabs="tab1=>Premier onglet;tab2=>Deuxième onglet"|toArray 
  default=tab1
  onSelect="$('div_'+tabId).setStyle('display', '');"
  onUnselect="$('div_'+tabId).setStyle('display', 'none');"
}
<div id="div_tab1" style="display:none">
Contenu du premier onglet.
</div>
<div id="div_tab2" style="display:none">
Contenu du second onglet.
</div>

Forme PHP

<?php
_eTag('tabgroup', array(
  'id' => 'monGroupDOnglets',
  'tabs' => array(
    'tab1' => 'Premier onglet',
    'tab2' => 'Deuxième onglet',
  ),
  'default' => 'tab1',
  'onSelect' => '$("div_"+tabId).setStyle("display", "");',
  'onUnselect' => '$("div_"+tabId).setStyle("display", "none");'
));
?>
<div id="div_tab1" style="display:none">
Contenu du premier onglet.
</div>
<div id="div_tab2" style="display:none">
Contenu du second onglet.
</div>

Paramètres

id

Identifiant de l'élément DOM que constituera le groupes d'onglets, généré aléatoirement si omis.

tabs

Obligatoire : liste des onglets. Ce doit être un tableau associatif dont les clefs sont les identifiants des onglets et les valeurs sont les libellés des onglets.

default

Identifiant de l'onglet sélectionné par défaut.

groupClass

Nom d'une classe CSS à ajouter à la balise du groupe d'onglet, en plus de la classe "CopixTabGroup?".

tabClass

Nom d'une classe CSS à ajouter à la balise de chaque onglet, en plus de la classe "CopixTab?".

selectedClass

Nom de la classe CSS à ajouter à la balise de l'onglet sélectionné ; valeur par défaut : "CopixSelectedTab?".

onSelect

Code Javascript à executer lorsqu'un onglet est sélectionné. Ce code peut faire référence à une variable locale tabId qui contient l'identifiant de l'onglet sélectionné.

Ce code est ajouté comme listener de l'événement "tabSelected".

onUnselect

Code Javascript à executer lorsqu'un onglet est désélectionné. Ce code peut faire référence à une variable locale tabId qui contient l'identifiant de l'onglet désélectionné.

Ce code est ajouté comme listener de l'événement "tabUnselected".

Evénéments Javascript

Les événements suivants sont déclenchés sur l'élément DOM constituant le groupe d'onglets.

tabSelected

Condition : un nouvel onglet est sélectionné.

Paramètres : l'identifiant de l'onglet sélectionné et l'élément DOM qui le représente.

Exemple d'utilisation :

<?php
CopixHTMLHeader::addJSDOMReadyCode("
  $('monGroupDOnglets').addEvent('tabSelected', function(tabId, tabElement) {
    alert('Onglet '+tabId+' sélectionné');
  });
");
?>

tabUnselected

Condition : l'onglet sélectionné perd la sélection.

Paramètre : l'identifiant de l'onglet désélectionné et l'élément DOM qui le représente.

Exemple d'utilisation :

<?php
CopixHTMLHeader::addJSDOMReadyCode("
  $('monGroupDOnglets').addEvent('tabUnselected', function(tabId, tabElement) {
    alert('Onglet '+tabId+' désélectionné');
  });
");
?>