Tutorial bien sympa trouvé sur le blog 9lessons : « Twitter like Search with jQuery and Ajax » (« recherche à la twitter avec JQuery et Ajax »). Ce tuto permet donc de créer un formulaire de recherche tout en Ajax. Les résultats sont donc affichés directement sur la même page que le formulaire.
Une démo est disponible directement sur le blog 9lessons.
Voir la démo
A noter que l’on également télécharger les scripts expliqués dans le tutorial. On y retrouve le JQuery, le PHP, l’HTML et même un peu de CSS. Le tuto est bien complet, l’effet de recherche en Ajax est toujours classe. J’espère juste pour toi que tu comprends l’anglais… 
tags : événement live, JQuery, tutorial
Avec le passage de JQuery à la version 1.3 (actuellement 1.3.2), est apparu un nouvel événement : live.
Live permet d’ajouter des listeners (‘écouteurs’ d’événements) sur des éléments du DOM générés en JQuery. Avant la création de cet événement, il fallait redéfinir, pour chaque élément du DOM, les écouteurs d’événement. Cet événement est surtout pratique pour l’utilisation d’AJAX, pour ajouter des controlleurs sur du code retourné par l’appel AJAX.
Voici un exemple (celui donné par la documentation officielle) :
1 2 3 | $("p").live("click", function(){ $(this).after("<p>Another paragraph!</p>"); }); |
Ici, à chaque clic sur un paragraphe, un nouveau paragraphe est créé. Grâce à l’événement live, on peut également cliquer sur les paragraphes générés par JQuery. On remarque aussi que l’appel à l’événement live requiert deux paramètres : le premier correspond au nom de l’événement que l’on veut assigner à live (ici on ajoute l’événement « click » aux paragraphes) et en second le code qui doit être exécuté à l’événement.
catégorie : JQuery
Tutorial pour JQuery vu ce matin sur le blog sohtanaka.com. Le tutorial propose une manière de créer des colonnes « intelligents » avec JQuery & CSS.
Le CSS permet ici de gérer l’affichage des colonnes par défaut, de définir leur taille, les marges entre les colonnes… Et le JQuery permet de répartir les colonnes s’il reste de l’espace sur le côté, de gérer dynamiquement l’affichage (si la taille de la fenêtre est modifiée).
Tout le code nécessaire est donné dans le tutorial. Il peut permettre un bon gain de temps, plus besoin de calculer la taille au pixel entre les colonnes, les marges, les paddings et le conteneur ! 
catégorie : HTML / CSS, JQuery
tags : JQuery, plugin JQuery, tutorial
Pour le retour des tutoriels JQuery pour l’utilisation de plugins, je propose aujourd’hui de coupler 2 plugins (JCarousel et Lytebox) pour faire une petite galerie photo.
Lytebox n’est pas à proprement parler un plugin JQuery, il est totalement indépendant du framework. Il permet d’afficher les photos en grand format à l’écran, devant le contenu du reste du site.
Voir la démo de Tutorial JQuery : galerie photo avec JCarousel et Lightbox
Après avoir télécharger les 2 plugins, il faut les importer dans la page HTML où tu souhaites créer ta galerie photo :
1 2 3 4 5 6 | <link href="css/jquery.jcarousel.css" rel="stylesheet" type="text/css" /> <link href="css/lytebox.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script> <script type="text/javascript" src="js/lytebox.js"></script> |
Le deux premières lignes permettent d’importer les 2 feuilles de style des plugins, chacune étant nécessaire au bon fonctionnement des plugins. On pourrait les fusionner dans un seul fichier pour optimiser le temps de chargement de la page, mais dans un soucis de clarté je les ai laisser séparé. Les lignes 4 à 6 permettent d’importer tout d’abord JQuery, le plugins JQuery JCarousel et enfin Lytebox.
Il faut ensuite préparer le code HTML pour permettre l’affichage du caroussel de photos (en miniature). Pour que le plugin JCarousel fonctionne, il faut créer une liste non-ordonnée (>ul<) avec pour chaque élément (&ht;li<) une image. Enfin pour permettre l’agrandissement des photos avec Lytebox, j’ai crée un lien sur les miniatures pointant vers l’adresse de la grande photo correspondante. Il faut aussi ajouter l’attribut « rel » (avec la valeur « lyteshow » pour lance un diaporama) sur les liens pour que le lien fonctionne avec la Lytebox.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <ul class="jcarousel-skin-tango"> <!-- la classe correspond au skin choisi pour le plugin JCarousel --> <li><!-- on créé un élément de la liste --> <a href="images/1-2.jpg" rel="lyteshow" title=""><!-- lien pointant vers la photo en gran format, ajouter une valeur à l'attribut title pour afficher une légende --> <img src="images/1.jpg" alt="" /><!-- on affiche la miniature --> </a><!-- on ferme le lien ;) --> </li><!-- on ferme l'élément de liste pour en ouvrir d'autres après --> <li><a href="images/2-2.jpg" rel="lyteshow" title=""><img src="images/2.jpg" alt="" /></a></li> <li><a href="images/3-2.jpg" rel="lyteshow" title=""><img src="images/3.jpg" alt="" /></a></li> <li><a href="images/4-2.jpg" rel="lyteshow" title=""><img src="images/4.jpg" alt="" /></a></li> <li><a href="images/5-2.jpg" rel="lyteshow" title=""><img src="images/5.jpg" alt="" /></a></li> <li><a href="images/6-2.jpg" rel="lyteshow" title=""><img src="images/6.jpg" alt="" /></a></li> <li><a href="images/7-2.jpg" rel="lyteshow" title=""><img src="images/7.jpg" alt="" /></a></li> <li><a href="images/8-2.jpg" rel="lyteshow" title=""><img src="images/8.jpg" alt="" /></a></li> <li><a href="images/9-2.jpg" rel="lyteshow" title=""><img src="images/9.jpg" alt="" /></a></li> <li><a href="images/10-2.jpg" rel="lyteshow" title=""><img src="images/10.jpg" alt="" /></a></li> <li><a href="images/11-2.jpg" rel="lyteshow" title=""><img src="images/11.jpg" alt="" /></a></li> <li><a href="images/12-2.jpg" rel="lyteshow" title=""><img src="images/12.jpg" alt="" /></a></li> <li><a href="images/13-2.jpg" rel="lyteshow" title=""><img src="images/13.jpg" alt="" /></a></li> </ul> |
On peut bien sûr personnaliser l’affichage en modifiant les fichiers CSS des deux plugins. Il est bien entendu nécessaire de modifier le CSS du plugin JCarousel si tu as des miniatures qui ont un autre format, mais le plugin fonctionne mieux avec des images carrées (ou juste l’élément du liste avec un « overflow:hidden »). Pour comprendre les modifications, je te conseille de partir des exemples donnés avec le plugin JQuery JCarousel ou partir de mon exemple disponible en téléchargement ici.
catégorie : JQuery
Série de tutoriels sur JQuery que je continue ici. L’idée est de commencer de zéro (les premiers tutoriels ne sont donc pas adaptés aux connaisseurs de JQuery). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !
J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !
Retrouve le premier tutorial : installation et Hello World !
——————-
Pour le deuxième tutorial de la série « découvrez JQuery », je vais parler des sélecteurs disponibles dans JQuery. En effet pour faire des animations de la mort qui tue, il faut pouvoir sélectionner et pointer les bons éléments.
Et c’est déjà que l’on peut voir la puissance de JQuery, plein de type de sélecteurs différents existent. Comme tu as pu le voir avec le premier tutorial JQuery, les sélecteurs ressemble au premier abord à des sélecteurs CSS.
Par exemple, pour sélectionner un lien possédant un id (et pour détecter le click sur ce lien) il suffit de faire :
1 2 3 | $("#idDuLien").click(function() { // code à exécuter au click sur le lien ayant pour id "idDuLien" ( <a href="url-du-lien.html" id="idDuLien">Lien</a> ) }); |
Ensuite avec du contenu dynamique (généré, par exemple, en PHP) on n’a pas forcément des id partout. Les sélecteurs marchent également avec les classes (il suffit de remplacer le # par un .). Pour les exemples qui suivent, on va se mettre dans le cas d’une liste d’éléments ayant tous la même classe.
1 2 3 4 5 6 7 8 9 10 11 12 | <div class="bloc"> Honoratis nullum adhibens modum nec licentia licentia disseminata adhibens modum iam vexabat iam honoratis vexabat. </div> <div class="bloc"> Nosmet amicitia amicum erga amicis termini se De termini tanti sunt fiat erga quanti amicis ipse in se ut pariter. </div> <div class="bloc"> Suspicionum blanditiae simulantium ubi suspicionum exclamabant salute asperitati amplitudo eius vocibus dicebatur vel proximorum amplitudo imperii statum proximorum statum asperitati si statum exclamabant cruentae ubi laesa enim et dolere laesa. </div> |
Pour le premier cas, on ne veut sélectionner que le premier élément, pour cela pas besoin de se prendre la tête, il suffit de faire son sélecteur sur la classe comme d’habitude et ajouter « :first », comme ceci :
1 2 3 | $("div.bloc:first").mouseover(function() { // code à exécuter au survol du premier bloc ayant pour class "bloc" }); |
Il existe plusieurs sélecteurs de ce type, voici quelques exemples :
- :first – pour sélectionner le premier élément.
- :last – pour sélectionner le dernier élément.
- :nth-child(5) : pour sélection le 5ème élément (bien entendu tu peux mettre le nombre que tu souhaites !).
- :even – pour sélectionner les éléments pairs à partir de zéro. C’est-à-dire le 0ème, le 2ème, le 4ème… Idéal pour coloriser une ligne sur deux d’un tableau.
- : odd – pour sélectionner les éléments impairs.
- :visible – pour sélectionner les éléments visibles qui ne sont pas en « display:none », en « opacity:0″ ou en « visibility:hidden ».
- :hidden – pour sélectionner les éléments non-visibles.
- :contains(texte) – pour sélectionner les éléments qui contiennent le texte passé en paramètre (attention cette fonction peut être gourmande en ressource).
- :checked – pour sélectionner seulement les élément coché (pour les checkbox)
Déjà avec ces différents sélecteurs, il y a de quoi s’amuser ! Après on peut également préciser le sélecteur en fonction de la valeur d’un attribut. Cela peut être utile pour sélectionner un input en fonction de son attribut « name » :
1 2 3 | $("input[name=prenom]").mouseover(function() { // code à exécuter au survol du champ de texte ayant l'attribut name égal à "prenom" }); |
On peut utiliser des jokers pour le test :
- [name^=val] : la valeur de l’attribut name doit commencer par « val ». Par exemple : « valeur ».
- [name$=val] : la valeur de l’attribut name doit finir par « val ». Par exemple : « laval ».
- [name*=val] : la valeur de l’attribut name doit contenir « val ». Par exemple : « avaliser ».
Il existe d’autres façons encore de préciser les sélecteurs avec JQuery. Mais il y a déjà de quoi faire avec ce qu’on vient de voir. Pour plus de détails sur les sélecteurs, je t’invite à aller faire un tour sur la documentation JQuery sur les sélecteurs (en français). Ramassage des copies dans 5 minutes
Pour le prochain tutorial de la série (qui devrait être en fin de semaine ou en début de semaine prochaine), je développerai les différents événements qui existent et on pourra par la suite commencer à faire nos premières animations avec JQuery !
catégorie : JQuery
Série de tutoriels sur JQuery que je commence ici. L’idée de de commencer de zéro (donc si tu connais un peu JQuery, ce premier tutoriel sera inutile pour toi). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !
J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !
——————-
JQuery est un framework JavaScript. C’est-à-dire un ensemble de bibliothèques JavaScript. Il propose tout un environnement pour faire du JavaScript le plus simplement possible et le plus rapidement possible. Ce n’est pas pour rien si la devise de JQuery est :
« Write less, do more. »
en français : « Ecrivez moins, faîtes-en plus. »
JQuery en est actuellement à la version 1.3.2. Il est disponible en téléchargement sur le groupe code.google de JQuery. La version minifiée (minified en anglais) ne fait que 55 Kio et se présente sous la forme d’un simple fichier JavaScript.
Commençons par le commencement. Pour l’installer, il faut au préalable télécharger JQuery puis l’uploader sur le serveur de ton site. Ensuite, il suffit tout simplement d’importer le fichier JavaScript comme tu le ferais pour un fichier JavaScript quelconque. Le code suivant est à placer entre les balises <head> et </head> de la page (dans le cas où le fichier se trouve dans un dossier nommé « js ») :
<script type="text/javascript" src="js/jquery.1-3-2.js"></script>Voilà JQuery est installé !
Ensuite le code JavaScript que l’on va rédiger est à insérer dans un fichier JavaScript comme n’importe quel fichier (ou insérer le code directement dans le fichier html, je ne traiterai pas cette méthode ici). Il faut donc également importer ce second fichier JavaScript (contenu également dans le dossier « js » et nommé « script.js ») dans la page que tu souhaites. Il faut bien faire attention à l’ordre et bien penser à charger le framework avant les scripts perso.
On se retrouve donc avec ces deux lignes dans la page html :
<script type="text/javascript" src="js/jquery.1-3-2.js"></script> <script type="text/javascript" src="js/script.js"></script>
La première chose que l’on va faire, c’est afficher un message d’alerte sur au clic sur un lien. On va donc ajouter le lien dans la page html. Il faut bien penser à mettre un id ou une classe sur ce lien pour pouvoir le distinguer des autres liens éventuellement présents sur la page :
<a id="monLien" href="http://blog.arnaud-k.fr">Lien vers mon blog</a>
Nous allons donc enfin utiliser JQuery ! Le code qui suit sera donc à mettre dans le fichier script.js.
En JavaScript pur, pour ajouter l’événement il aurait fallu ajouter l’attribut « onclick » directement dans la balise html. Avec JQuery, la logique est différente, tout va se passer dans le fichier script.js.
La première chose à faire est de dire à JQuery d’exécuter le code que quand le DOM (la structure de la page) est entièrement chargé. Dans le cas contraire, il peut se produire des erreurs si on essaie d’atteindre un élément qui n’a pas encore été chargé. C’est l’équivalent de l’attribut « onload » qui était placé dans le code de la balise . Au final, on retrouvera le petit bout de code qui suit dans tous les fichiers de scripts qui utiliseront JQuery :
$(document).ready(function() { // code JQuery à exécuter quand la page est chargé // encore plus de code... });
On va donc devoir détecter si le lien ayant pour id « monLien » a été cliqué. Avec JQuery, toutes les fonctions JavaScript natives ayant des noms à rallonge telles window.document.getElementById deviennent inutiles. Maintenant pour sélectionner un élément, on utilise la fonction « $ » qui prend en paramètre un sélecteur (voir le tutoriel qui va suivre sur les différents types de sélecteurs). Les sélecteurs de type CSS peuvent aussi être utilisés.
Pour détecter un clic, on utilise l’événement « click ». Tu auras forcément remarqué que l’intitulé de l’événement a changé par rapport au JavaScript pur (« onclick »). On se retrouve donc avec ceci dans le fichier script.js :
$(document).ready(function() { $("a#monLien").click(function() { // si le lien ayant pour id "monLien" est cliqué, on exécute le code à la suite // code à exécuter quand le lien est cliqué // encore du code à exécuté le lien est cliqué }); });
Si la logique de ce code est comprise, je pense que c’est gagné ! 
. Tous les événements se passe ainsi (avec juste le sélecteur ou le nom de l’événement qui change).
Une fois le lien cliqué, on va afficher une simple boîte d’alerte (la fonction alert() en JavaScript) pour voir si le code est bien exécuté au clic sur le lien :
$(document).ready(function() { $("a#monLien").click(function() { // si le lien ayant pour id "monLien" est cliqué, on exécute le code à la suite alert("Hello World"); }); });
Comme tu as pu le constater, c’est maintenant un mélange de JQuery et de fonction JavaScript normal, tout ceci fonctionne parfaitement car c’est le même langage de programmation, JQuery n’étant qu’un framework JQuery !
Voilà, je pense que c’est déjà pas mal pour le premier jour de JQuery même s’il y a encore du boulot ! 
. Dans le prochain épisode, on va aller un peu plus loin avec les sélecteurs et commencer à manipuler le DOM 
catégorie : JQuery
Petite astuce toute simple pour faire apparaître facilement le favicon sur tous les liens externes présent sur la page.
Le code JQuery onstruit simplement l’URL de l’icone (de type http://www.example.com/favicon.ico) et l’affiche à côté du lien. Pour que l’affichage fonctionne, il faut absolument que le site en question est un favicon nommé favicon.ico à la racine du site (en théorie sur tous les sites possédant un favicon, si ceux-ci sont bien faits !). L’affichage se fait ensuite facilement : il faut définir le fond du lien et préparer la class CSS définissant le padding et empêchant le fond de se répéter.
1 2 3 4 5 6 7 8 9 | $(document).ready( function () { jQuery('a[href^="http://"]').filter(function(){ // on détecte tous les liens ayant l'attribut href commençant par http:// return this.hostname && this.hostname !== location.hostname; // il faut que le domaine soit différent du domaine du site (on veut traiter que les liens externes) }).each(function() { // pour chacun des liens externes var link = jQuery(this); // on met les propriétés du lien dans une variable var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico'; // on construit l'url du favicon (de type http://www.example.com/favicon.ico) $(this).addClass("favicon").css("background-image", "url("+faviconURL+")"); // on ajoute la class CSS "favicon" au lien (pour le padding par exemple) et on définit le fond du lien }); }); |
Et c’est tout !
En exemple, je met également le code de la class CSS que j’ai utilisée pour la démo :
1 2 3 4 5 | a.favicon { padding-left:20px; background-position:0 50%; background-repeat:no-repeat; } |
catégorie : JQuery