26 août
Par Clément dans Javascript
La fonctionnalité que l’on retrouve de plus en plus dans le web 2.0 et dans les wiki est la présence de cette icone
annonçant un lien externe.
Je vous ai donc préparer un petit tips permettant d’ajouter dynamiquement cet icône pour les liens externes avec jQuery :
$(document).ready(function() { // On verifie que la page est chargé
/* on prend tout les liens et on vérifie si on a un nom d'hôte
et si le nom d'hôte est différent du nom d'hôte du lien.
Ensuite, on ajoute l'image à la suite du lien.
*/
$('a').filter(function() {
return this.hostname && this.hostname !== location.hostname;
}).after('
');
});
Cette fonction utilise les méthodes filter et after de jQuery. La méthode after permet d’ajouter un contenu à la suite d’un élement javascript et la méthode filter permet de supprimer les éléments qui ne respecte pas la condition écrite dans la fonction.
L’AJAX est de plus en plus présent de nos jours dans les applications web dites « 2.0″. Il y a quelque temps, j’avais expliquer comment utiliser AJAX avec Prototype JS et aujourd’hui je vais vous apprendre comment utiliser les requêtes AJAX avec jQuery.
jQuery tente de s’imposer dans le monde du web2.0 et à entièrement réussi son paris (plutôt osé), son code est très simple, intuitif et vraiment efficace.
Le principe de jQuery est d’écrire moins mais pour faire plus (comme le dis le slogan) et je vais vous démontrer que cela est possible avec l’AJAX.
De nos jours, avoir une liste d’éléments dans un tableau est courant mais très peu de site propose de trier chaque colonne et d’avoir une pagination digne de ce nom !
jQuery, la librairie javascript orienté objet, va nous offrir une solution (vous pouvez tout à fait réaliser un tableau dynamique trié et paginé avec PHP ou Ruby mais c’est plus contraignant, surtout quand vous allez voir le nombre de ligne de code dont on a besoin avec le Javascript).
Ajax Librairies est un module développé par Google pour permettre de simplifier les appels aux différents framework Javascript les plus connus comme :
Google simplifie largement le travail car, pour appeler une librairie, il faut utiliser :
Et ensuite :
google.load("jquery", "1.2.3");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");
Dans le premier paramètre de la méthode load, vous mettez le nom de la librairie voulue et dans le deuxième, la version.Simple non?
De plus, vous pouvez spécifier le mode de compression de la librairie voulue (uniquement pour Mootools, Dojo et jQuery).
Pour avoir la version non compressé, il suffit de rajouter :
google.load("jquery", "1.2.3",{uncompressed:true});
google.load("mootools", "1.11",{uncompressed:true});
google.load("dojo", "1.1.1",{uncompressed:true});
Google à mis cela au point pour simplifier les accès au framework Javascript et pour facilité le versionning.