Actions

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

From Joomla! Documentation

(adding in example options usage)
Line 3: Line 3:
 
===Options for JHtmlTabs===
 
===Options for JHtmlTabs===
  
'''onActive''': A callback function when a tab is activated
+
'''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
 
'''onBackground''': A callback function when a tab is backgrounded
Line 13: Line 13:
 
===Example===
 
===Example===
 
<source lang="php">
 
<source lang="php">
echo JHtml::_('tabs.start', 'tab_group_id');
+
$options = array(
 +
    'onActive' => 'function(title, description){
 +
        description.setStyle("display", "none");
 +
        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.
 +
);
 +
 
 +
echo JHtml::_('tabs.start', 'tab_group_id', $options);
  
 
echo JHtml::_('tabs.panel', JText::_('PANEL_1_TITLE'), 'panel_1_id');
 
echo JHtml::_('tabs.panel', JText::_('PANEL_1_TITLE'), 'panel_1_id');

Revision as of 10:47, 5 April 2012

This article covers usage of JHtmlTabs in your Joomla! component for Joomla! versions 1.6 and greater. If you are using 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", "none");
        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.
);
 
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');