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


7

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

ユーザーグループなどに応じて、可変数のタブがあり、それらのほとんどは新しい情報で一定の間隔で更新されます。各ペインのコンテンツを更新することは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ビュー

回答:


3

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

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

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


2

ページのソースコードを見ると、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);
    });
});

ただし、インラインのCSSスタイルは設定しないでください。それはクールではない。
Seth Warburton 2014

確かに、サポートされているjQueryメソッドを示すためだけにあります
GDP

jQuery(document).ready(function($) { });<< (function($){and を使用するのではなく、これを使用してjQueryコードをラップします$(document).ready(function() {。@Sethは正しいです。jQueryを使用してクラスを追加するだけで十分で、残りは純粋なCSSで実行できます。
Lodder

CSSで取り上げられたポイント、lol ...は、単なるランダム属性でした。
GDP

また$('a[href="#tabs_1a"]')、最初のタブと同じように、他のオブジェクトを複数回使用する場合は、それらを変数にしてください:
Lodder

1

私は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>'); ?> 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.