web-dev-qa-db-fra.com

Les onglets JHtml n'ont pas d'identifiant - comment puis-je les spécifier?

En utilisant le code ci-dessous, je peux créer avec succès les onglets dont j'ai besoin. Cependant, les onglets ne contiennent aucun ID pour un style spécifique ou un travail jQuery.

Il existe un nombre variable d'onglets , en fonction du groupe d'utilisateurs, etc., et la plupart d'entre eux sont mis à jour à un intervalle avec de nouvelles informations. La mise à jour du contenu de chaque volet n'est pas un problème car ils ont un ID, mais le problème est d'adresser l'onglet approprié pour alerter l'utilisateur de la nouvelle information. .

Est-ce que le $options Le tableau contient-il des spécifications pour les identifiants à générer?

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

vue Firebug des onglets: Firebug view

jqueryjhtml
7
GDP

tilisez simplement un sélecteur d'attributs. Vous pouvez cibler l'attribut href dans css avec, par exemple, [href = "# tabs_1a"]. Je n'ai aucune expérience de jQuery, mais l'exemple de GDPs answer utilise des sélecteurs d'attributs pour ajouter des identifiants. Je suppose donc que jQuery prend cela en charge.

L'essentiel est que vous n'avez pas vraiment besoin d'ajouter quoi que ce soit, utilisez simplement des sélecteurs d'attributs pour cibler quelque chose qui existe déjà, dans votre cas href.

Parfois: le nième enfant est une alternative viable.

3
Ville Niemi

Si vous examinez le code source de la page, vous verrez que Joomla utilise jQuery pour ajouter les éléments LI et A au moment de l'exécution. Vous pouvez utiliser la même technique pour ajouter des identifiants, des classes, des CSS ou tout autre attribut nécessaire.

Utilisez ce code jQuery pour ajouter un préfixe au nom de l'onglet, puis ajoutez l'attribut ID à l'ancre.

Remarque: Assurez-vous que le code est exécuté après Joomla crée les onglets, sinon ils n'existeront pas encore.

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

J'essayais d'ajouter des icônes ico-moon à un onglet et vous pouviez envelopper le a dans un tag:

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

afin que vous puissiez aussi l'envelopper dans une durée:

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