JHtml-Registerkarten haben keine IDs - wie kann ich sie angeben?

7

Mit dem folgenden Code kann ich die benötigten Registerkarten erfolgreich erstellen. Die Registerkarten enthalten jedoch keine IDs für bestimmte Styling- oder jQuery-Arbeiten.

Abhängig von der Benutzergruppe usw. gibt es eine variable Anzahl von Registerkarten , von denen die meisten in bestimmten Intervallen mit neuen Informationen aktualisiert werden. Aktualisieren der Inhalt jedes Fenster ist kein Problem , da sie tun IDs haben, aber die entsprechende Registerkarte Adressierung der Benutzer der neuen Informationen zu alarmieren , ist das Problem.

Kann das $optionsArray Spezifikationen für zu generierende IDs enthalten?

// 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-Ansicht der Registerkarten: Firebug-Ansicht

jquery jhtml BIP
quelle

Antworten:

3

Verwenden Sie einfach einen Attributselektor. Sie können das href-Attribut in CSS beispielsweise mit [href = "# tabs_1a"] als Ziel festlegen. Ich habe keine Erfahrung mit jQuery, aber das Beispiel in der Antwort von GDPs verwendet Attributselektoren, um IDs hinzuzufügen. Daher würde jQuery dies vermutlich unterstützen.

Die Quintessenz ist, dass Sie nicht wirklich etwas hinzufügen müssen, sondern nur Attribut-Selektoren verwenden, um auf etwas zu zielen, das bereits vorhanden ist, in Ihrem Fall href.

Manchmal: Das n-te Kind ist eine praktikable Alternative.

Ville Niemi
quelle
2

Wenn Sie sich den Quellcode der Seite ansehen, werden Sie feststellen, dass Joomla jQuery verwendet, um die LI- und A-Elemente zur Laufzeit anzuhängen. Mit derselben Technik können Sie IDs, Klassen, CSS oder andere Attribute hinzufügen, die Sie möglicherweise benötigen.

Verwenden Sie diesen jQuery-Code, um dem Namen der Registerkarte ein Präfix hinzuzufügen, und fügen Sie dann dem Anker das ID-Attribut hinzu.

Hinweis: Stellen Sie sicher, dass der Code ausgeführt wird, nachdem Joomla die Registerkarten erstellt hat. Andernfalls sind sie noch nicht vorhanden, um sie zu bearbeiten.

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);
    });
});
BIP
quelle
Bitte legen Sie jedoch keine Inline-CSS-Stile fest. Das ist nicht cool.
Seth Warburton
Es ist wahr, es ist nur da, um eine unterstützte jQuery-Methode zu demonstrieren
BIP
jQuery(document).ready(function($) { });<< Verwenden Sie diese Option, um Ihren jQuery-Code zu umbrechen, anstatt (function($){und dann zu verwenden $(document).ready(function() {. @ Seth ist richtig, Sie sollten nur jQuery verwenden müssen, um Ihre Klassen hinzuzufügen, und der Rest kann mit reinem CSS erledigt werden.
Lodder
Punkt auf dem CSS genommen, lol .... war nur ein zufälliges Attribut zu demonstrieren.
BIP
Stellen Sie außerdem sicher, dass Sie $('a[href="#tabs_1a"]')und die anderen Objekte zu einer Variablen machen, wenn Sie sie mehr als einmal verwenden, genau wie bei der ersten Registerkarte :)
Lodder
1

Ich habe versucht, einem Tab ico-moon-Symbole hinzuzufügen, und Sie können das a in ein Tag einschließen:

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

Sie können es also auch in eine Zeitspanne einwickeln:

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