Le script
Avant tout il nous faut mettre en place un petit script, vous vous en doutez sûrement n'est-ce pas ?
Vous pourrez l'ajouter dans
Panneau d'Administration > Modules > Gestion des codes Javascript. Veillez à l'activer sur
toutes les pages de votre forum Voici le premier script, qui est notre fonction qui nous permettra d'ouvrir plusieurs liens en même temps. Placez-le dans un nouveau code que vous nommerez '
multiLiens' par exemple :
- Code:
-
function multiLiens(tableauLiens) {
for(var i=0;i<tableauLiens.length;i++) {
window.open(tableauLiens[i]);
}
}
$(function() {
// Applique notre fonction multiLiens() aux liens ayant un attribut spécifique
var el = $('a[data-links]'); // On crée la variable el pour pointer sur nos liens plus facilement
el.click(function () { // On applique la fonction multiLiens() lors du clic sur notre élément
var links = el.attr('data-links').split(','); // On crée le tableau avec , comme séparateur (modifiable)
multiLiens(links);
});
});
Que veut-il dire ce blabla ?
La première partie du script est une
fonction :
multiLiens()
. Cette fonction prend en paramètre un tableau,
tableauLiens
.
Grâce à une variable
i
faisant office de compteur, on parcourt l'ensemble de ce tableau et on ouvre chaque lien avec la méthode
window.open("URL")
.
Le second partie du script
applique simplement la fonction à notre forum.
Il crée une variable
el
qui va cibler les liens
<a>
ayant un attribut
data-links
, en laissant tranquille les autres.
La variable est juste là pour nous simplifier la vie vu que nous allons réutiliser ce sélecteur après.el.attr('data-links')
va retourner la valeur de l'attribut
data-links
de l'élément
el
pointé.
.split(',')
va transformer la chaîne de caractères en
tableau. Pour cela, on définit un
séparateur. Nous choisissons la
virgule (mais vous êtres libres de modifier ça). Enfin, on enregistre le résultat dans la variable
links
pour la réutiliser ensuite...
... ensuite donc, on passe
links
(notre tableau de liens) en paramètre de la fonction
multiLiens()
.
Et pour finir, on applique l'effet l
ors du clic sur le lien : c'est le rôle de
el.click(function () { ... });
.
Le code
$(function () { ... });
est juste là pour déclencher le script après que la page soit chargée (ce qui est préférable pour repérer les éléments sans craindre de bug).
- attr() ou data() ?:
Pour ceux qui s'y connaissent un peu, nous aurions tout aussi bien pu utiliser data('links')
plutôt que attr('data-links')
.
Pourquoi ce choix ? Et bien pas particulièrement par souci de compatibilité (jQuery gère maintenant très bien la compatibilité de data()
avec les anciens navigateurs. Plutôt par "principe". attr()
est plus général que son homologue car il manipule des attributs, tandis que data()
manipule spécifiquement les attributs de type data. Or ces notions relèvent plutôt du HTML5, et ForumActif n'est pas encore passé au HTML5.
Ça ne poserait bien entendu pas de souci car, comme je l'ai dit, jQuery gère très bien la compatibilité de data()
). Cependant, il est plus "correct" de considérer cela comme un attribut pour les versions antérieures à HTML5, plutôt qu'une donnée.
- Mais pourquoi avoir fait 2 parties de script ?:
Ce n'était effectivement pas nécessaire et nous aurions pu mettre un seul et unique bloc qui aurait eu pour rôle :
- de récupérer les liens multiples des éléments concernés
- d'ouvrir tous ces liens en même temps
Simplement, j'ai préféré en profiter pour vous faire appliquer des bonnes pratiques. Plutôt que d'effectuer l'effet à la volée, nous avons créé une
fonction qui joue son rôle : ouvrir tous les liens du tableau passé en paramètre. Cette fonction se fiche de savoir d'où vient le tableau. Vous pouvez donc la réutiliser sur d'autres effets, en l'appelant simplement.
La seconde partie du script est l'effet concret que nous souhaitons réaliser, spécifique à notre forum, notre cas. Ce script
appelle la fonction que nous avons créée auparavant, nous évitant de devoir la recoder.
Ce genre de pratique (séparation de la logique et du rendu) se veut la base d'une programmation sérieuse, quelque soit le langage. En Javascript, ce que vous voyez là est le prémisse de ce qu'on appelle barbarement une architecture MV*. On en est pas encore là, mais on vient déjà de séparer la fonction d'ouverture (qui s'appparente au
Modèle) de la manipulation du DOM (qui s'apparente à la
Vue).
Ce genre de pratique rend le code plus maintenable, plus testable, plus efficace. Vous pourrez modifier votre fonction plus tard, indépendamment de l'effet, ou bien l'appeller sur d'autres événements... C'est le même principe finalement que la séparation du HTML et du CSS. Voilà pour la petite parenthèse technique, si vous n'avez pas tout saisi, c'est pas bien grave, l'essentiel est dit cependant.
Le HTML
Il nous faut donc créer nos éléments dans notre HTML ! Le principe fonctionnera
sur l'ensemble de votre forum, que ce soit dans vos templates, ou bien dans vos posts (si le HTML est activé).
En fait, il s'agit de rajouter un attribut
data-links
aux liens
<a>
que nous souhaitons voir devenir des liens multiples. Il faut passer en valeur de cet attribut notre
liste de liens séparés par une
virgule, de n'importe quelle taille :
Lien_1,Lien_2,Lien_3, ...
En effet, comme nous récupérons la variable et que nous identifions chaque lien comme étant séparé par une virgule (là encore, c'est modifiable simplement dans le script), on distingue bel et bien chacun de nos liens !
Prenons l'exemple d'un "triple lien" :
- Code:
-
<a href="#" data-links="Lien_1,Lien_2,Lien_3">Votre triple Lien</a>
Il n'y a rien de sorcier. Nous créons donc un lien, tout ce qu'il y a de plus classique :
<a href="URL">TEXTE</a>
.
Cependant, nous ne renseignons pas d'URL externe,
href="#"
pointant simplement sur la page où se trouve le lien (essayez ainsi, le lien vous laisse sur la page).
Mais notre attribut
data-links
sera repéré par notre script. Une fois repéré, le tableau de liens contenu dans l'attribut sera passé en paramètre de la fonction
multiLiens()
... qui réalisera sa mission et l'effet désiré !
Plus de liens ?
Il suffit de renseigner plus ou moins de liens dans le tableau passé en paramètre pour ouvrir ceux-ci lors du clic.
Prenez garde de bien séparer chaque lien correctement par une virgule, ou le séparateur de votre choix (de votre script). :
http://mon-lien-1.fr,http://www.monlien-2.com, ...
Compatibilité ?
En terme de compatibilité,
jQuery se charge d'assurer que les anciens navigateurs fonctionnent avec cet effet.
Si votre forum suit les conventions HTML5 (ce qui est
très peu probable tant que ForumActif ne passera pas en HTML5),
data-links
est tout à fait valide et correspond à une donnée
data-*
.
Sinon, il faut le considérer comme un simple
attribut de votre balise. Ce ne sera pas
forcément valide selon les normes W3C.
CSSActif ne vous le conseille donc pas. Cependant, ça fonctionnera. Il reste à espérer qu'à l'avenir, ForumActif passe au HTML5.
- Pourquoi faire ce tutoriel si on ne conseille pas de l'appliquer ?:
Soyons clair, si je dis qu'on ne le conseille pas, c'est parce-que ce n'est pas valide W3C.
Cela signifie que ce serait mal interprété par certains navigateurs, rendant l'accessibilité pour des personnes handicapées plus complexe (leur navigateur aurait du mal à traduire correctement ce que vous avez fait).
En revanche, l'effet marchera parfaitement, c'est jQuery qui assure cela. Partant de là et parce-que peut-être que dans quelques années ForumActif adoptera les conventions HTML5 (et que ce code deviendra parfaitement valide W3C), il aurait été idiot de corbeiller ce tuto (qui reste LA méthode propre pour faire ce genre d'effet) !
J'espère que cette petite astuce vous amusera et qu'elle vous sera utile !