web-dev-qa-db-fra.com

Comment utiliser JHtml pour créer des onglets verticaux

En utilisant ce code JHTML standard, je peux générer des onglets horizontaux horizontaux (en haut) sans problème. J'ai bricolé le $options tableau pour le configurer, mais JHtml semble avoir changé un tas, et je ne semble pas être en mesure de trouver la combinaison secrète de paramètres pour obtenir Vertical onglets à la place.

enter image description here

JHtml qui rend onglets horizontaux 

$options = array(
    'useCookie' => true, // this must not be a string. Don't use quotes.
);
echo JHtml::_('tabs.start', 'tab_group_id', $options);
echo JHtml::_('tabs.panel', 'Tab Heading 1', 'panel_1_id');
echo 'Panel 1 content goes here.';
echo JHtml::_('tabs.panel', 'Tab Heading 2', 'panel_2_id');
echo 'Panel 2 content goes here.';
echo JHtml::_('tabs.panel', 'Tab Heading 3', 'panel_3_id');
echo 'Panel 3 content goes here.';
echo JHtml::_('tabs.end');

HTML qui rend les onglets désirés verticaux 

<div id="my-panels" class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li><a href="#panel_1_id" data-toggle="tab">Tab Heading 1</a></li>
        <li><a href="#panel_2_id" data-toggle="tab">Tab Heading 2</a></li>
        <li><a href="#panel_3_id" data-toggle="tab">Tab Heading 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="panel_1_id">Some Content1</div>
        <div class="tab-pane" id="panel_2_id">Some Content2</div>
        <div class="tab-pane" id="panel_3_id">Some Content3</div>
    </div>
</div>

Est-ce quelque chose dans $options qu'il faut définir, ou est-ce autre chose que je devrais utiliser dans JHtml?

jhtml
6
GDP

Tout d'abord, vous utilisez la méthode Joomla 3.0 pour ajouter des onglets. Il existe une méthode plus récente à partir de Joomla 3.1 qui malheureusement n’est pas documentée du tout en dehors de la page API.

Avec la nouvelle méthode de tabulation, tout ce que vous avez à faire est de l’envelopper autour de div avec une classe spécifique comme ceci:

$options = array(
    'useCookie' => true,
    'active' => 'tabs_1'
);

// Start Tabs
echo '<div class="tabbable tabs-left">';
echo JHtml::_('bootstrap.startTabSet', 'tab_group_id', $options);

// Tab 1
echo JHtml::_('bootstrap.addTab', 'tab_group_id', 'tabs_1', 'Tab 1');
echo '<p>Lorem ipsum dolor.</p>';
echo JHtml::_('bootstrap.endTab');

// Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_id', 'tabs_2', 'Tab 2');
echo '<p>Lorem ipsum dolor.</p>';
echo JHtml::_('bootstrap.endTab');

// End Tabs
echo JHtml::_('bootstrap.endTabSet');
echo '</div>';

Testé et travaillant dans Joomla 3.3.6

Mise à jour:

Si vous souhaitez styler les onglets d'une manière ou d'une autre, vous pouvez simplement ajouter une classe au wrapper div de la manière suivante:

echo '<div class="tabbable tabs-left gdp-tabs">';

puis pour styliser les éléments a ou li, utilisez simplement:

.gdp-tabs li {
   //code here
}
.gdp-tabs li a {
   //code here
}
2
Lodder