J3.x

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

From Joomla! Documentation

(Marked this version for translation)
(One intermediate revision by the same user not shown)
Line 1: Line 1:
{{version/tutor|3.x}}
+
<noinclude><languages /></noinclude>
===Overview===
+
 
 +
{{Joomla version|version=3.0|time=and after|comment=<translate><!--T:1-->
 +
releases</translate>}}
 +
<translate>
 +
===Overview=== <!--T:2-->
 
JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.
 
JHtmlTabs has 3 static methods that can be used to create tabed menus. All functions return strings.
===Options for JHtmlTabs===
+
</translate>
 +
 
 +
<translate>
 +
===Options for JHtmlTabs=== <!--T:3-->
 
These are the options that can be passed to the <code>JHtmlTabs::start()</code> function in the form of an array.
 
These are the options that can be passed to the <code>JHtmlTabs::start()</code> function in the form of an array.
 +
</translate>
 +
 +
<code>onActive</code><translate><!--T:4-->
 +
: A callback function when a tab is activated with two params. 'title' is the tab itself, and 'description' is the tab content.</translate>
  
<code>onActive</code>: A callback function when a tab is activated with two params. 'title' is the tab itself, and 'description' is the tab content.
+
<code>onBackground</code><translate><!--T:5-->
 +
: A callback function when a tab is backgrounded.</translate>
  
<code>onBackground</code>: A callback function when a tab is backgrounded
+
<code>startOffset</code><translate><!--T:6-->
 +
: The default tab to start with (zero based index).</translate>
  
<code>startOffset</code>: The default tab to start with (zero based index).
+
<code>useCookie</code><translate><!--T:7-->
 +
: Whether or not to use cookies to store tab active state. (boolean) (true | false) // This is not a string. Don't use quotes.</translate>
  
<code>useCookie</code>: Whether or not to use cookies to store tab active state. (boolean) (true | false) // This is not a string. Don't use quotes.
+
<translate>
 +
===Example=== <!--T:8-->
 +
</translate>
  
===Example===
 
 
<source lang="php">
 
<source lang="php">
 
$options = array(
 
$options = array(
Line 38: Line 53:
 
echo JHtmlTabs::end();
 
echo JHtmlTabs::end();
 
</source>
 
</source>
<noinclude>[[Category:Development]][[Category:Joomla! 3.x Development]]</noinclude>
+
 
 +
<noinclude>
 +
<translate>
 +
<!--T:9-->
 +
[[Category:Development]]
 +
[[Category:Joomla! 3.x Development]]
 +
</translate>
 +
</noinclude>

Revision as of 07:34, 14 February 2015

Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français
Joomla! 
≥ 3.0
releases

Overview[edit]

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

Options for JHtmlTabs[edit]

These are the options that can be passed to the JHtmlTabs::start() function in the form of an array.

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();