Pour démarrer Dev’nsound, je propose un billet plus ou moins technique. Vous vous en douterez (au vu de l’image ci-dessus), je vais parler de la célèbre et extrêmement puissante -pour un poids minime-, jQuery ! De part la simplicité du code produit et la facilité à apprendre, la librairie javascript jQuery connait un fort succès. Mais il est bien beau de la connaître et savoir ce qu’elle fait, il faut aussi des ressources, pour pousser plus loin sa créativité et ses fonctionnalités.
Je vous propose donc plusieurs sites de ressources, à savoir :
- jQuery Style — Un merveilleux site sous forme de galerie de sites utilisant jQuery, avec le type de fonctionnalité utilisée, une capture d’écran et un lien vers le site concerné. Une excellente source d’inspiration pour ceux et celles qui ne savent pas trop comment rendre interactif son site, ou tout simplement être curieux et voir les différentes techniques d’utilisation.
- UseJquery — Un peu comme son camarade d’en haut, une autre galerie de site (showcase) mais cette fois ci avec des options déjà plus intéressantes. En effet, il indique la liste des plugins éventuels utilisés pour réaliser les effets produits sur les sites, propose de voir le nombre de lignes présentes dans le code source javascript utilisé par jQuery et même, consulter la source du code utilisé, afin de ne pas chercher le ou les fichiers utilisés sur le site.
- jQuery List — jQuery List rentre plus dans le cœur du problème en listant un nombre considérable de plugins développés par des contributeurs externes. Nous aurons droit à plus de 200 plugins comme des slideshows, des slides, des rollovers, des formulaires, des systèmes de vote, des onglets, des infobulles, des bords arrondis… Une véritable mine d’or pour les plugins jQuery ! C’est aussi une très bonne solution pour avoir un aperçu rapide de ce qu’on peut faire avec jQuery : à peut prêt tout.
- jQuery sur Delicious – Le simple fait de chercher sur Delicious le tag jQuery vous offrira une source de liens, de plugins et de tout un tas de choses. Un bon départ pour s’initier à la librairie, soit plus de 700 000+ liens bookmarkés !
Sans pousser dans l’initiation à jQuery, voici un exemple d’événement jQuery.
$(document).ready(function(){ // On vérifie que jQuery est bien chargé
$('a.link').click(function(){
//Si on clique sur un lien de classe "link"
$(this).animate({marginTop:'15px', marginLeft:'8px'}, 600).fadeTo(1200, 0.25)
//On fait une translation pendant 0,6sc, puis un fondu vers une opacité de 0,25% pendant 1,2sc
return false; // On annule le lien vide
});
// On clôt l'évènement
});
// On clôt le tout
Mon exemple n’est pas complexe, mais vous remarquerez qu’avec seulement ~55ko de javascript et quelques lignes de code, on peut produire des effets très simplement !
Je sens déjà que vous aimez… ou que vous allez aimer ! Ce premier billet n’est qu’une introduction au parcours que le blog aura concernant jQuery, étant donné que je suis le premier fan de ce blog à aimer, utiliser, et développer (avec) cette librairie. Bien entendu, si vous voulez vous informer un peu plus sur le propos, je vous invite à consulter le (très beau) site officiel, qui liste plugins, démos, bugs, documentation complète, blog, forums… etc !
