Actions

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

From Joomla! Documentation

(adding example for JHtml::_('tabs'))
 
m (Adjusted link after page move)
(13 intermediate revisions by 4 users not shown)
Line 1: Line 1:
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]].
+
This article covers usage of JHtmlTabs in your Joomla! component for Joomla! versions {{JVer|1.6}} through {{JVer|2.5}} and greater. If you are using Joomla! {{JVer|1.5}}, see [[Using the JPane classes in a component]].
  
 
===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
 +
 
'''startOffset''': The default tab to start with (zero based index).
 
'''startOffset''': The default tab to start with (zero based index).
'''useCookie''': Whether or not to use cookies to store tab active state. (true|false)
+
 
 +
'''useCookie''': Whether or not to use cookies to store tab active state. (boolean) (true | false) // This is not a string. Don't use quotes.
  
 
===Example===
 
===Example===
 
<source lang="php">
 
<source lang="php">
echo JHtml::_('tabs.start', 'tab_group_id');
+
$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.
 +
);
 +
 
 +
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');
Line 20: Line 36:
 
echo JHtml::_('tabs.end');
 
echo JHtml::_('tabs.end');
 
</source>
 
</source>
 +
<noinclude>[[Category:Development]]</noinclude>

Revision as of 18:20, 3 July 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 Using 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. (boolean) (true | false) // This is not a string. Don't use quotes.

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");
    }',
    '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.
);
 
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');