web-dev-qa-db-ja.com

Bootstrapを使用してJHtmlTabsのオプションを設定する方法

コンポーネントでのJHtmlTabsクラスの使用 によると、レンダリングされるタブにいくつかのオプションを指定できます。ただし、例を使用すると、イベントは発生せず、最初の「startOffset」も「useCookie」も尊重されません。このコードが存在するかどうかに関係なく、ページは同じように動作し、JSエラーは表示されません。

$options = array(
    'onActive' => 'function(title, description){
        console.info("Fired OnActive");                // Never fires
        description.setStyle("display", "block");
        title.addClass("open").removeClass("closed");
    }',
    'onBackground' => 'function(title, description){
        console.info("Fired OnBackground");            // Never fires
        description.setStyle("display", "none");
        title.addClass("closed").removeClass("open");
    }',
    'startOffset' => 4,                                // No tabs are active 
    'useCookie' => true,                               // Last active tab is not rememberd
    'active'    => 'myTabName'                         // Not in docs, but DOES work
);

更新

Bootstrapでタブを使用していることに気付き、コードはJHtmlで異なります

// This works, per the docs, and using `tabs.start`, etc.
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');

// This does NOT work, using `bootstrap.` 
echo JHtml::_('bootstrap.startTabSet', 'tab_group_id', $options);
echo JHtml::_('bootstrap.addTab', JText::_('PANEL_1_TITLE'), 'panel_1_id');
echo 'Panel 1 content can go here.';
echo JHtml::_('bootstrap.endTab');
echo JHtml::_('bootstrap.addTab', JText::_('PANEL_2_TITLE'), 'panel_2_id');
echo 'Panel 2 content can go here.';
echo JHtml::_('bootstrap.endTab');

echo JHtml::_('bootstrap.endTabSet');

誰かが$optionsおよびBootstrap ??

cookiesjhtml
4
GDP

これは質問への回答ではありませんが、jQuery Cookie Plugin を使用して質問を促した問題の解決策です。

jQuery(document).ready(function($) {
    var listItems = $("#tab_group_idTabs li");
    var prefix = 'myID-';
    listItems.each(function(li) {
        var a = $(this).children().first("a");
        var Word = a.attr('href').replace('#','');
        a.attr('id',prefix+'A-' + Word);    // Add an ID to the A
        a.addClass('myTabClass');           // Add a dashboard class to the A
    });

    var activeTab = $.cookie("activeTab");  // Get the last active tab for the page
    if(activeTab === undefined){
        var activeTab = "#myID-A-tab3";     // Specify the default Tab ID here
    }
    $.cookie("activeTab", activeTab);       // Store the last active tab
    $(activeTab).click();                   // Activate the active tab

    $(".myTabClass").click(function(){      // Click event to store last active tab
        var clickedTab = '#'+$(this).attr('id');
        $.cookie("activeTab", clickedTab);
    });
});
2
GDP

単にこれは私のために働く

<?php 
$options = array(
'active'    => 'tab1_id'    // Not in docs, but DOES work
); ?>


<?php echo JHtml::_('bootstrap.startTabSet', 'ID-Tabs-Group', $options);?> 

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab1_id', JText::_('COM_BOOTSTRAPTABS_TAB_1')); ?> 
<p>Content of the first tab.</p> 
<?php echo JHtml::_('bootstrap.endTab');?> 

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab2_id', JText::_('COM_BOOTSTRAPTABS_TAB_2')); ?> 
<p>Content of the second tab.</p> 
<?php echo JHtml::_('bootstrap.endTab');?> 

<?php echo JHtml::_('bootstrap.endTabSet');?>
2
Anant

jHtml :: _（ 'behavior.tabstate'）;を追加します

https://www.web357.eu/blog/news/how-to-remember-tab-with-a-session-at-joomla-backend

0
Oleg Gorilyk