J3.x

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

From Joomla! Documentation

m (version tag)
Line 1: Line 1:
 
{{version/tutor|3.x}}
 
{{version/tutor|3.x}}
−
 
+
===Overview===
−
===Calling the Class===
+
JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.
−
<source lang="php">jimport( 'joomla.html.html.tabs' );</source>
 
−
 
 
−
While importing the class in the way above will bring in the class, it will not function as expected. JHtmlTabs cannot be called directly, even after importing. JHtml::_(tabs) must be called as shown in the example below.
 
−
 
 
 
===Options for JHtmlTabs===
 
===Options for JHtmlTabs===
  
Line 31: Line 27:
 
);
 
);
  
−
echo JHtml::_('tabs.start', 'tab_group_id', $options);
+
//Note that the options argument is optional so JHtmlTabs::start() can be called without it
−
 
 
−
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');
+
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();
 
</source>
 
</source>
 
<noinclude>[[Category:Development]][[Category:Joomla! 3.x Development]]</noinclude>
 
<noinclude>[[Category:Development]][[Category:Joomla! 3.x Development]]</noinclude>

Revision as of 06:31, 12 February 2015

This tutorial is for Joomla! CMS Version(s) Joomla 3.x

Overview[edit]

JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.

Options for JHtmlTabs[edit]

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[edit]

$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();
Retrieved from "https://docs.joomla.org/index.php?title=J3.x:Using_the_JHtmlTabs_class_in_a_component&oldid=158642"