Actions

Difference between revisions of "Using the JHtmlTabs class in a component"

From Joomla! Documentation

Line 22: Line 22:
 
         title.addClass("closed").removeClass("open");
 
         title.addClass("closed").removeClass("open");
 
     }',
 
     }',
     'useCookie' => 'true', // note the quotes around true, since it must be a string. But if you put false there, you must not use qoutes otherwise JTabs will handle it as true
+
     'useCookie' => 'true', // note the quotes around true, since it must be a string. But if you put false there, you must not use qoutes otherwise JHtmlTabs will handle it as true
 
);
 
);
  

Revision as of 04:42, 30 April 2012

This article covers usage of JHtmlTabs in your Joomla! component for Joomla! versions Joomla 1.6 through Joomla 2.5 and greater. If you are using Joomla! Joomla 1.5, see How_to_use_the_JPane_classes_in_a_component.

Options for JHtmlTabs

onActive: A callback function when a tab is activated with two params. 'title' is the tab itself, and 'description' is the tab content.

onBackground: A callback function when a tab is backgrounded

startOffset: The default tab to start with (zero based index).

useCookie: Whether or not to use cookies to store tab active state. (true | false)

Example

$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");
    }',
    'useCookie' => 'true', // note the quotes around true, since it must be a string. But if you put false there, you must not use qoutes otherwise JHtmlTabs will handle it as true
);
 
echo JHtml::_('tabs.start', 'tab_group_id', $options);
 
echo JHtml::_('tabs.panel', JText::_('PANEL_1_TITLE'), 'panel_1_id');
echo 'Panel 1 content can go here.';
 
echo JHtml::_('tabs.panel', JText::_('PANEL_2_TITLE'), 'panel_2_id');
echo 'Panel 2 content can go here.';
 
echo JHtml::_('tabs.end');