J3.x

Utilisation de la classe JHtmlTabs dans un composant

From Joomla! Documentation

This page is a translated version of the page J3.x:Using the JHtmlTabs class in a component and the translation is 100% complete.
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français
Joomla! 
≥ 3.0
versions

Présentation

JHtmlTabs propose 3 méthodes statiques pouvant être utilisées pour créer des menus avec onglets. Toutes les fonctions renvoient des chaînes de caractères.

Options pour JHtmlTabs

Voici les options pouvant être transmises par la fonction JHtmlTabs::start() sous la forme array.

onActive : une fonction de rappel lorsqu'un onglet est activé avec deux paramètres. 'title' correspond à l'onglet lui-même et 'description' correspond au contenu de l'onglet.

onBackground : une fonction de rappel lorsqu'un onglet est mis en arrière-plan.

startOffset : l'onglet par défaut (index de base de zéro).

useCookie : utiliser ou non les cookies pour stocker l'état de l'onglet actif. (boolean) (true | false) // Ce n'est pas une chaîne de caractères. N'utilisez pas de guillemets.

Exemple

$options = array(
    'onActive' => 'function(title, description){
        description.setStyle("display", "block");
        title.addClass("open").removeClass("closed");
    }',
    'onBackground' => 'function(title, description){
        description.setStyle("display", "none");
        title.addClass("closed").removeClass("open");
    }',
    'startOffset' => 0,  // 0 starts on the first tab, 1 starts the second, etc...
    'useCookie' => true, // this must not be a string. Don't use quotes.
);

//Note that the options argument is optional so JHtmlTabs::start() can be called without it

echo JHtmlTabs::start('tabs_id',$options);
echo JHtmlTabs::panel("Panel Title 1",'panel-id-1');
    echo "<h2>Content of first panel goes here!</h2>";
    echo "<p>You can use JLayouHelper to render a layout if you want to</p>";
echo JHtmlTabs::panel(JText::_('CUSTOM_PANEL_TITLE'),'panel-id-2'); //You can use any custom text
    echo "<h2>Content of second panel goes here!<h2>";
echo JHtmlTabs::end();