web-dev-qa-db-ja.com

JHtmlタブにはIDがありません-どのように指定できますか？

以下のコードを使用して、必要なタブを正常に作成できますが、タブには特定のスタイリングまたはjQuery作業用のIDが含まれていません。

ユーザーグループなどに応じて、可変数のタブがあり、それらのほとんどは新しい情報で一定の間隔で更新されます。 doにはIDがあるため、各ペインのコンテンツを更新することは問題ではありませんが、新しい情報をユーザーに警告するために関連するタブに対処することが問題です。

$options配列には、生成されるIDの仕様が含まれていますか？

// Start Tabs
echo '<div class="tabbable tabs-left">';
echo JHtml::_('bootstrap.startTabSet', 'tab_group_ida', $options);
// Tab 1
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_1a', 'Tab 1');
echo '<p>Pri putant iisque detracto ut.</p>';
echo JHtml::_('bootstrap.endTab');
// Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_2a', 'Tab 2');
echo '<p>Duo delectus vivendum id, sit.</p>';
echo JHtml::_('bootstrap.endTab');
// Tab 3
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_3a', 'Tab 3');
echo '<p>Tamquam constituam an qui, ea.</p>';
echo JHtml::_('bootstrap.endTab');
// End Tabs
echo JHtml::_('bootstrap.endTabSet');
echo '</div>';

タブのFirebugビュー： Firebug view

jqueryjhtml
7
GDP

属性セレクタを使用するだけです。 たとえば、[href = "＃tabs_1a"]を使用してCSSのhref属性をターゲットにできます。私はjQueryの経験はありませんが、GDPの回答の例ではIDを追加するために属性セレクターを使用しているため、jQueryがこれをサポートしていると思います。

要するに、実際には何も追加する必要はなく、属性セレクターを使用して、既存の何かをターゲットにするだけです。

時々：nth-​​childは実行可能な代替手段です。

3
Ville Niemi

ページのソースコードを見ると、JoomlaがjQueryを使用して、実行時にLI要素とA要素を追加していることがわかります。同じ手法を使用して、ID、クラス、CSS、またはその他の必要な属性を追加できます。

このjQueryコードを使用して、タブの名前にプレフィックスを追加してから、ID属性をアンカーに追加します。

注：コードの実行を保証します後Joomlaはタブを作成します。それ以外の場合、操作するためのタブはまだ存在しません。

jQuery(document).ready(function($) {
    var idPrefix = 'myId-';
    $("#tab_group_idaTabs li").each(function(li) {
        var a = $(this).children().first("a");
        var tabname = a.attr('href').replace('#','');
        a.attr('id',idPrefix + tabname);
    });
});
2
GDP

タブにico-moonアイコンを追加しようとしていましたが、タグでaをラップできます。

    // Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_2a', '<i class="icon-info"><i>'.Tab 2');

したがって、スパンでラップすることもできます：

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab2_id', '<span class="icon-signup">'.JText::_('DESCRIPTION').'</span>'); ?>
1
iamrobert