Ca fesait un petit moment que j’attendais la release de cette librairie JavaScript qui offre des effets bien sympathiques et puissants.
Regardez les démos disponibles en ligne, impressionnant. Si vous voulez jouer avec la doc est également disponible.
Avec quelques jours de retard il est là . A l’affiche on trouve:
Jusque là j’ai principalement utilisé jQuery uniquement pour me rendre la tâche plus facile lors de la manipulation dynamique des différents éléments constituant une page XHTML donnée.
Ce soir j’ai trouvé enfin un peu de temps pour aller un peu plus loin pour enfin explorer le moyen de faire du Ajax en passant par ma librairie JavaScript fétiche :P. La tâche a été très simple grâce à la documentation en ligne qui n’est compréhensible pas totalement compréhensible pour les personnes débutant avec la librairie, enfin…
Le but de l’exercice est le suivant:
Comme d’habitude, regardez l’exemple. Si vous regardez le code source, vous oberverez que nous n’allons pas mélanger le XHTML avec le JavaScript et que le formulaire pourra être traité même si le navigateur n’a pas activé le JavaScript.
Brève explication du script:
$(document).ready(function(){
$("#ajax-loader").ajaxStart(function(){
$(this).show();
});
$("#ajax-loader").ajaxStop(function(){
$(this).hide();
});
$("form").submit(function(){
prenom = $("input[@name=prenom]").val();
nom = $("input[@name=nom]").val();
$.ajax({
type: "POST",
url: "jquery.php",
data: "prenom="+prenom+"&nom="+nom,
success: function(){
$("#feedback").html("Formulaire enregistré avec succès");
}
});
return false;
});
});
Le tour est joué en quelques lignes de code, sans prise de tête. Dans le prochain article, nous montrerons comment récupérer des informations du fichier de traitement pour les afficher sur le site.
Loin derrière moi l’époque où je donnais des claques lorsqu’on me parlait de JavaScript… Aujourd’hui les interfaces deviennent de plus en plus riches et souvent les CSS sont trop limitées - enfin, certains navigateurs sont encore à la traine et ne profitent pas pleinement de la technologie - pour permettre à des gens comme moi de tout gérer sans problèmes - sans oublier les obstacles liés à la compatibilité cross-browser.
JavaScript revient en force pour nous aider, grâce aussi à l’explosion du web2.0 qui nous amène à l’utiliser davantage. L’article The future is hybrids – how JavaScript can purify pure CSS solutions est un bonne lecture pour se familiariser avec tout ce bazar et pour faire une integration optimale des deux composantes qui gérent l’aspect visuel de votre site et son comportement. Bonne lecture.
Avant de commencer, quelques liens vers la documentation en ligne de jQuery:
Développer un plugin pour jQuery est particulièrement intéressant car on peut bénéficier d’une librairie JavaScript flexible, légère qui permet d’effectuer facilement des manipulations DOM, des effets et des animations simples ou avancées et surtout du Ajax. La mise en place d’un plugin va vous permettre de l’appliquer facilement a n’importe quel contexte.
En quoi consiste concrètement l’utilisation du DOM et pourquoi l’utiliser? De manière générale, travailler avec le DOM vous permet de parser l’arborescence d’une page (X)HTML et de manipuler les différents objets la constituant. On peut aller encore plus loin notamment en manipulant également les CSS liées à la page.
(more…)
Vous ne connaissez pas Yahoo! UI, aïe. Un article tout beau tout frais vient de sortir sur Think Vitamin dans lequel l’auteur montre ses bidouillage avec la librairie.
En piochant à gauche et à droite, je suis tombé sur un exellent wiki qui documente la librairie et en plus c’est en français, chose rare, très rare 
Un petit coup de DOM et de CSS pour obtenir un résultat bien sympa. Le tout dans l’article Complex Dynamic Lists: Your Order Please de A List Apart.
noneFastclemmy resume la situation actuelle à ce sujet…
none
Ce cours a été initialement présenté à des étudiants de premier cycle de l’Université Pierre et Marie Curie. Il permet d’aborder le DHTML selon un point de vue respectueux des standards. Il ne s’agit pas d’une bibliothèque d’effets “clé-en-main”, mais plutôt de l’exposé des principes permettant la production d’effets les plus portables et adaptables possibles.