Liens multiples (en un seul clic) Bouton_activeLiens multiples (en un seul clic) Bouton_hoverLiens multiples (en un seul clic) Fb-hoverLiens multiples (en un seul clic) Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Liens multiples (en un seul clic) EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Liens multiples (en un seul clic) EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Liens multiples (en un seul clic) EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Liens multiples (en un seul clic) EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Liens multiples (en un seul clic) EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Liens multiples (en un seul clic) EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Liens multiples (en un seul clic) EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Liens multiples (en un seul clic) EmptySam 11 Fév 2023, 06:04 par Krager

-14%
Le deal à ne pas rater :
Lave-linge hublot HOOVER HWP 10 kg (Induction, 1600 trs/min, Classe ...
299.99 € 349.99 €
Voir le deal

Partagez
 

Liens multiples (en un seul clic)

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Radimir
{ Membre actif }
{ Membre actif }

Masculin Messages : 459



Liens multiples (en un seul clic) Empty

Liens multiples (en un seul clic)


Informations générales

Description :
L'idée est de faire que, lorsque vous cliquez sur un lien précis, vous ayez droit à l'ouverture de plusieurs pages menant à différents liens : différents sites web ou vos différents sous-forums par exemple.

L'intérêt réside dans la rapidité d'accès à différentes pages dont le thème est similaire. Si par exemple vous proposez plusieurs liens définissant un seul et même sujet, un clic sur le lien en question suffit au lieu de trois ou quatre.

Démo :
Mise en application ici

Testé sur :
Firefox, Chrome, Safari, Opera, Internet Explorer

Crédits :
Proposé par Radimir le 05/10/2010 | sNipe_sCk

Mise(s) à jour :
23/09/2012 par Espeon

Le tutoriel


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 Smile

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 lors 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() ?:

Mais pourquoi avoir fait 2 parties de script ?:

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. Wink

Pourquoi faire ce tutoriel si on ne conseille pas de l'appliquer ?:

J'espère que cette petite astuce vous amusera et qu'elle vous sera utile !
MessageSujet: Liens multiples (en un seul clic)   Liens multiples (en un seul clic) EmptyMar 05 Oct 2010, 03:27
Revenir en haut Aller en bas
http://www.i-love-harvard.com/
Kaiji
Kaiji
Blanche-Neige
Blanche-Neige

Féminin Messages : 5578



Liens multiples (en un seul clic) Empty
FAQ


Q
//

R
//


Pour toute question sur ce tutoriel, merci de poster une demande d'aide ici :
http://www.css-actif.com/f17-aide-css-xhtml
MessageSujet: Re: Liens multiples (en un seul clic)   Liens multiples (en un seul clic) EmptyJeu 04 Aoû 2011, 05:02
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Liens multiples (en un seul clic) Empty
23-09-2012 - Tutoriel revu et mis à jour
MessageSujet: Re: Liens multiples (en un seul clic)   Liens multiples (en un seul clic) EmptyDim 23 Sep 2012, 09:05
Revenir en haut Aller en bas
Contenu sponsorisé




Liens multiples (en un seul clic) Empty
MessageSujet: Re: Liens multiples (en un seul clic)   Liens multiples (en un seul clic) Empty
Revenir en haut Aller en bas
 

Liens multiples (en un seul clic)

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Liens Multiples (messages)
» [Liens] Liens avec fond coloré
» [Liens] Quelques effets pour vos liens
» Problèmes multiples
» Multiples Textures.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Tutoriels de CSSActif :: ForumActif Pas à pas :: Le Reste-

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Cookies | Forum gratuit | Informatique et Internet | Internet