web-dev-qa-db-ja.com

JHtmlを使用して垂直タブを作成する方法

この標準のJHtmlコードを使用して、Horizo​​ntalタブ（上部）を問題なく生成できます。私は$options配列をいじって設定してきましたが、JHtmlがたくさん変更しているようで、取得する設定の秘密の組み合わせを見つけることができないようです代わりに垂直タブ。

enter image description here

レンダリングするJHtmlHorizo​​ntalタブ

$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

<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>

設定する必要があるのは$optionsの何かですか、それともJHtmlで一緒に使用する必要があるものですか？

jhtml
6
GDP

まず、タブを追加するためにJoomla 3.0メソッドを使用しています。 Joomla 3.1には、残念ながらAPIページ以外にまったくドキュメント化されていない新しいメソッドがあります。

新しいタブメソッドを使用すると、divを特定のクラスで次のようにラップするだけです。

$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>';

Joomla 3.3.6でテストおよび動作

更新：

形や形など、何らかの方法でタブのスタイルを設定したい場合は、次のようにdivラッパーにクラスを追加するだけです。

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

aまたはli要素をスタイルするには、次のように使用します。

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