jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site

jQuery.info

  • JQuery 1.2.4 annoncé pour le 15 mai

    6 mai, par Olivier G.
    John Resig vient d’annoncer sur son twitter que la nouvelle version de jQuery (version 1.2.4) serait sans doute publiée le 15 mai.
    Restez à l’écoute !

  • Facebox

    5 février, par gtraxx
    Un plugin dans la lignée de thickbox et jquerylightbox , développé par Chris Wanstrath sous le nom de facebox.
    Celui-ci permet d’ouvrir vos images, des divs, ou un ensemble de pages distantes.
    Le résultat obtenu avec des photos est étonnant et très rapide, sans oublier la manipulation de chaîne de caractères directement dans l’appel de fonction.
    Pour utiliser facebox, décompressez l’archive et copiez les fichiers dans votre site web. Ensuite chargez le comme ceci :
    Pour initialiser facebox a (...)

  • Joyeux anniversaire jQuery !

    15 janvier, par b_b, John Resig, nat33
    Aujourd’hui jQuery fête ses 2 ans et vous offre une nouvelle version 1.2.2.
    Au menu de cette mise à jour :
    4 fois plus rapide sur les sélections d’éléments comme $(DOMElement)
    Amélioration de la fonction .ready() :
    Utilisation de la technique de Diego Perini qui permet de se passer de document.write() pour Internet Explorer
    les navigateurs attendent que les feuilles de styles soient chargées en plus du DOM.
    la fonction .hover() est séparée en deux fonctions :
    .bind("mouseenter") (...)

  • jQuery 1.2.1 !

    5 octobre 2007, par John Resig, Olivier G.
    Traduction du billet de John Resig : jQuery 1.2.1 : Quick Fixes for 1.2.
    JQuery 1.2.1 est une version corrective de jQuery 1.2. Vous pouvez voir la liste des corrections sur l’outil de suivi des bugs
    Téléchargement
    jQuery 1.2.1 :
    jQuery minimisé (14kb avec la compression GunZip)
    jQuery compressé (26kb)
    jQuery normal (77kb)
    Si vous voulez récupérer l’ensemble de cette version depuis le dépôt Subversion, vous pouvez le faire en suivant les instructions et en utilisant ce code :
    svn co (...)

  • JQuery 1.2 : jQuery.extend("enorme !") ;

    24 septembre 2007, par John Resig, Olivier G.
    Traduction du début du billet de John Resig annonçant la parution de jQuery 1.2.
    Voici une nouvelle version majeure de jQuery, qui était en travaux depuis longtemps — et elle est prête à consommer !
    Nous avons publié les notes de versions de jQuery 1.2 sur une page dédiée, parce qu’il y a beaucoup de choses à y trouver. Rappelez-vous que des fonctionnalités on été retirée dans la version 1.2, donc lisez attentivement les instructions de mise à jour avant de changer de version.
    Comme toujours, il va y (...)

  • jQuery 1.1.4 : plus rapide, plus de tests, prêt pour la version 1.2

    26 août 2007, par John Resig, Olivier G.
    Traduction de l’article jQuery 1.1.4 : Faster, More Tests, Ready for 1.2, par John Resig.
    Nous sommes heureux d’annoncer la dernière version de jQuery : jQuery 1.1.4. Sauf si nous avons commis d’horribles erreurs, cette version sera la dernière de la branche 1.1, ce qui devrait nous permettre de publier jQuery 1.2 en septembre.
    Vous pouvez télécharger cette version sur la page jQuery de Google Code :
    Télécharger :
    jQuery 1.1.4 (compressé, 21KB)
    jQuery 1.1.4 (65KB)
    jQuery 1.1.4 (Documentation, (...)

  • Un ’planet’ jQuery francophone

    13 août 2007, par Olivier G.
    Dans un email du 21 juillet, Richard Worth a annoncé la création d’un ’planet’ francophone dédié à jQuery.
    Il n’y a pour l’instant que deux sites agrégés, mais la liste ne demande qu’à s’étoffer…

  • Connaître la position d’un élément

    10 août 2007, par cam.lafit
    Etendre les possibilités de jQuery afin de connaître les coordonnées X et Y d’une balise HTML.
    Par défaut jquery ne permet pas de connaître la position d’un élément.
    Ce qui est parfois gênant, lorsque, par exemple, on veut positionner un élément vis à vis d’un autre tel que des tooltips
    Utiliser les fonctions natives de javascript
    En cherchant sur le net, nous trouvons assez rapidement ceci :
    function findPos(obj) var curleft = obj.offsetLeft ; 0 ; var curtop = obj.offsetTop ; 0 ; (...)

  • Comment éviter la propagation des événements

    10 août 2007, par cam.lafit
    Comment contrôler la propagation des évenements avec la fonction stopPropagation() et return false
    Objectif
    Lorsque vous déclarez un évènement celui ci est propagé à l’ensemble des éléments correspondants aux critères de sélection ; ainsi si on déclare un évènements click sur $("#id") seule la balise ayant l’identifiant "id" sera concernée. Tandis que si on déclare $("li"), toutes les balises de type seront affectées par l’évènement.
    Si les balises sont imbriquées comme ceci ul > li > ul > li (cas typique (...)

  • Le plugin SearchHighlight

    15 juillet 2007, par Renato, sebgaillard
    Ce plugin met en évidence les mots recherchés lorsqu’on arrive sur une page à partir d’un moteur de recherche.
    Une page de démonstration pour tester les principales options de configuration du plugin
    L’idée qui consiste à mettre en évidence les mots recherchés quand on arrive sur une page à partir d’un moteur de recherche n’est pas du tout nouvelle. Il n’est pas toujours évident de savoir où se trouvent les mots recherchés dans la page, surtout lorsque celle-ci est très longue, où si le (...)

  • Upload de fichiers, pour tester le plugin form.js

    11 juillet 2007, par Fil
    Depuis la version 1.1.3 de jQuery, le plugin form.js permet de gérer l’upload de fichier. Voici une « application réelle » qui m’a permis de tester cette fonction.
    En utilisant le webmail de GMail j’ai remarqué que, parfois, certains fichiers attachés envoyés par mes correspondants étaient illisibles, même une fois téléchargés sur mon bureau. En les ouvrant, j’ai constaté qu’ils étaient encodés au format « appledouble », avec une partie décrivant les propriétés du fichier (son nom etc), et une autre le contenu (...)

  • JQuery 1.1.3 : 8 fois plus rapide, toujours 20 kb

    11 juillet 2007, par John Resig, Olivier G.
    Traduction de l’article jQuery 1.1.3 : 800%+ Faster, still 20KB, par John Resig
    Je suis heureux d’annoncer la publication de jQuery 1.1.3. Après des mois de tests, de développements, et de test supplémentaires, nous avons une nouvelle version disponible au téléchargement. Elle corrige plus de 80 bugs et contient plusieurs améliorations. Notamment :
    Une vitesse accrue, avec une traversée de l’arbre DOM plus de 8 fois plus rapide qu’en 1.1.2 ;
    Un système d’événements réécrit, avec une gestion plus (...)

  • jQuery 1.1.3: 800%+ più veloce, sempre 20KB

    4 luglio 2007, di John Resig, Renato
    Traduzione dell’articolo jQuery 1.1.3: 800%+ Faster, still 20KB di John Resig
    Sono lieto di annunciare il rilascio di jQuery 1.1.3. Dopo molti mesi di test, sviluppo, ed ancora test, abbiamo una versione molto solida disponibile per il download. Sono stati corretti più di 80 bug ed introdotti un buon numero di miglioramenti.
    I più rappresentativi sono:
    Miglioramento della velocità, i selettori DOM sono più veloci di oltre l’800% rispetto a jQuery 1.1.2
    Riscritto il sistema degli eventi, con (...)

  • Recherche d’articles pour le jQuery Magazine 2

    2 juillet 2007, par Olivier G.
    Yehuda Katz à posté sur le blog jQuery un billet concernant le second numéro du jQuery magazine.
    Il demande à la communauté d’écrire des articles (ou des visuels), dans les conditions suivantes :
    L’article doit être au format magazine ou journal ;
    l’article doit avoir un sujet actuel et pertinent pour la communauté jQuery, pour une large audience ;
    l’article ne doit pas être une publicité (mais il peut cependant présenter un plugin que vous avez écrit, s’il peut concerner beaucoup de monde) ; (...)

  • $("#toggg").end() ;

    18 juin 2007, par Olivier G., pascale
    Bonsoir,
    Nous venons d’apprendre une triste nouvelle : la mort soudaine de notre ami Bertrand Gugger, aka Toggg, geek généreux, au tempérament bien trempé, dont le coeur bourru s’est éteint dans la nuit du 16 au 17 juin.
    Il avait 50 ans, des tas de projets en tête et en chantier, notamment comme développeur SPIP, mais pas seulement... http://www.spip-contrib.net/Les-Pro...
    Il laisse 4 enfants, sa compagne et ses copains de SPIP dans un très grand chagrin...
    "ça craint ! "
    Nos pensées vont à (...)

  • Rencontre avec John Resig à Paris le 24 juin

    6 juin 2007, par Olivier G., toggg
    Bonsoir,
    John Resig, le fondateur de jQuery étant à Paris pour le solstice d’été, une rencontre est prévue le dimanche 24 juin.
    C’est une occasion unique que nous avons de pouvoir échanger directement avec lui. Je crois aussi, que c’est un très bon prétexte pour que nous nous rencontrions aussi. Les échanges par octets ont leur charme mais n’auront jamais la réalité d’un face à face.
    En fait, John ne vient pas pour le solstice mais pour un événement Mozilla le samedi. Il sera donc peut-être un peu (...)

  • Aidez à tester jQuery 1.1.3

    28 mai 2007, par Olivier G.
    Traduction du billet de John Resing Help Test jQuery 1.1.3 du 20 mai 2007
    Un version préliminaire de la prochaine version 1.1.3 est disponible à des fins de tests. Nous avons besoin d’être hyper sûrs qu’il n’y a pas eu de régression dans cette version. Pour celà, nous vous demandons de télécharger cette version alpha et de l’essayer à la place de jQuery 1.1.2 (où que vous l’utilisez).
    Télécharger la version de test : jQuery 1.1.3a (non compressée, version de text)
    Voici ce que vous pouvez faire pour (...)

  • The plugin "SearchHighlight"

    22 May 2007, by Renato
    This plugin formats a search results page to highlight the matched keywords.
    Demo a demo page to test all the main configuration options of the plugin.
    The idea
    Highlighting the matched words on a search results page is not a new idea. It is not always obvious where the keywords are in the page, especially if the page is long with a complex structure. Often the page topic does not match the user’s intended search. By highlighting the matched keywords, the user can quickly scan and find (...)

  • jQuery se répand comme le chiendent

    18 mai 2007, par Olivier G.
    Et voici que la version 2.2 du moteur de blog Wordpress utilise jQuery à la place de prototype pour le javascript de l’admin.
    Il rejoint donc le club de moins en moins fermé des CMS qui utilisent notre librairie de fonctions javascript (comme par exemple SPIP, Dotclear, ou Drupal).

  • Il plugin "SearchHighlight"

    17 maggio 2007, di Renato
    Questo plugin evidenzia le parole ricercate quando si arriva su una pagina da un motore di ricerca.
    Demo Una pagina dimostrativa per testare tutte le principali opzioni di configurazione del plugin
    L’idea
    L’idea di evidenziare le parole ricercate quando si arriva su una pagina da un motore di ricerca, non è affatto nuova. Non sempre è evidente dove siano le parole ricercate all’interno di una pagina, soprattutto se questa è molto lunga, oppure se l’argomento della pagina non è proprio quello (...)

  • jQuery.com attaqué par des méchants

    6 mai 2007, par John Resig
    Samedi 5 mai, 18h. jQuery.com vient de subir aujourd’hui une seconde attaque de DDoS, et notre hébergeur nous a demandé de chercher un autre hébergeur. Il a immédiatement fermé tous nos services sur le serveur de jQuery, et nous a demandé de partir. Cela nous a pris complètement par surprise et nous travaillons au mieux pour nous adapter.
    Samedi 5 mai, 23h. Nous avons passé la majeure partie du samedi à récupérer nos fichiers pour les installer sur d’autres serveurs, et à chercher un nouvel hébergeur. (...)

  • resizehandle : une poignée pour agrandir la fenêtre de saisie

    19 mars 2007, par Fil
    L’idée de ce plugin provient du projet Dotclear, qui dispose d’une méthode resize.js permettant d’agrandir les zones de saisie texte (textarea). Après que chtitux a intégré cette méthode dans les Crayons de SPIP, j’ai eu envie de la réécrire en jQuery.
    La première chose à faire est de mémoriser notre textarea, sous forme d’un objet jQuery : var me = jQuery(this) ;.
    Ensuite, nous allons créer la poignée (on l’ajoutera plus tard juste après l’élément qu’on souhaite agrandir) :
    jQuery(’’)
    Un peu de CSS (...)

  • The "TreeMap" plugin

    13 March 2007, by Renato
    A TreeMap is a way to compactly show datas organized hierarchically.
    Demo
    demo
    World population with treemaps
    Google News
    A bit of history
    How many times it happens to you to have few space on your hard disk and to want to know which are the folders that take most of the space? You would surely have liked a tool able to visualize these informations in a way easily understandable. Right for this task, in 1990, a professor from University of Maryland, Ben Shneiderman, created the (...)

  • jQuery 1.1.2

    28 febbraio 2007, di Renato
    Ecco la nuova versione stabile di jQuery : 1.1.2
    jQuery 1.1.2 è stato rilasciato! Questo rilascio ha il solo scopo di correggere dei piccoli bugs. Molti problemi sono stati corretti. Queste correzioni sono state testate a fondo, e quindi non si dovrebbero più verificare delle regressioni (cioè la correzione di un bug che ne provoca uno nuovo) . Il problema più fastidioso che è stato risolto riguarda lo sfarfallio sull’animazione .slideDown.
    Si raccomanda vivamente di aggiornare.
    Come al solito, (...)

  • jQuery 1.1.2

    28 février 2007, par Fil
    Voici la nouvelle version stable de jQuery : 1.1.2
    jQuery 1.1.2 est sortie ! Cette version a pour seul objet la correction de petits bugs. Un grand nombre de problèmes ont été corrigés. Ces corrections ont été fortement testées, ce qui signifie qu’il ne devrait pas y avoir de régression (touchons du bois). Le problème le plus notable concernait un scintillement lors de l’animation .slideDown.
    Il est fortement recommandé de faire la mise à jour.
    Comme d’habitude, si vous avez des questions ou des (...)

  • Il plugin "TreeMap"

    23 febbraio 2007, di Renato
    Una TreeMap è una modalità di visualizzazione compatta di dati organizzati in forma gerarchica.
    Demo
    demo
    Popolazione mondiale con le treemap
    Google News
    Un po’ di storia
    Quante volte vi è capitato di aver poco spazio sul vostro disco rigido e di voler sapere quali sono le cartelle che occupano maggior spazio? Avreste sicuramente desiderato uno strumento in grado di visualizzare queste informazioni in una forma facilmente comprensibile. Proprio a questo scopo, nel lontano 1990, un (...)

  • L’effet pyjama

    7 février 2007, par piif
    Comment modifier l’apparence d’une ligne sur deux dans un tableau
    Pour rendre un tableau plus lisible, il est pratique de mettre un fond de couleur différent pour les lignes paires et les lignes impaires.
    Mais c’est parfois pénible de générer un html contenant des class="pair" ou impair selon le rang de la ligne.
    En jquery, c’est immédiat :
    $(’table.tableau//tr:even’).addClass(’pair’) ; et hop, les lignes paires des tableaux de classe tableau se retrouvent avec la classe pair.
    Facile non ?
    Il y a (...)

  • Un lien vers une page, qui finalement va charger un fragment

    5 février 2007, par Toutati
    jQuery permet facilement à un lien d’inclure des fragments d’une page sans recharger la page entière. Mais si on désactive javascript, c’est le fragment qui est affiché : bof !
    Pour le visiteur comme pour les moteurs d’indexation il y a une solution simple : demander à jQuery de réécrire ce lien. C’est ainsi qu’on va fabriquer un javascript non intrusif !
    Appeler un fragment dans une page
    Mettre une class="load" aux liens qui pointent vers un fragment
    Mettre un id="myid" sur le div récepteur dans (...)

  • Échanger des champs de formulaire avec JQuery

    3 février 2007, par sholby
    Pour une application de recherche d’itinéraire, il peut être intéressant d’échanger à la volée les éléments renseignés pour le départ et ceux de l’arrivée sans passer par un javascript monstrueux.
    NB : Même si le principe énoncé dans cet article reste valable, on trouvera dans le premier article de forum associé une solution plus complète et plus élégante au problème énoncé !
    Dans le cas traité dans cet exemple, les divers champs du formulaire qui concernent le départ et l’arrivée ont tous des identifiants (...)

  • Liste de discussion francophone jQuery-fr@rezo.net

    25 janvier 2007
    jQuery.info ouvre une mailing-liste de discussion et d’entraide, en français, autour de jQuery. Pour s’inscrire il suffit d’envoyer un mail à l’adresse
    jQuery-fr-on@rezo.net
    Toutes les infos et archives de la liste sont disponibles à l’adresse
    http://listes.rezo.net/mailman/list...
    À bientôt !

  • Paie ton FireBug

    25 janvier 2007
    Le meilleur outil pour comprendre ce qui se passe quand on fait du javascript, du DOM (et même du CSS), c’est FireBug. Il vient de sortir en version 1.0, et c’est un must absolu.
    http://www.getfirebug.com/

  • jQuery 1.1.1

    22 janvier 2007, par Fil
    jQuery 1.1 était sortie un peu trop vite, une semaine plus tard voici jQuery 1.1.1 qui corrige les bugs suivants.
    Il était impossible de donner une valeur numérique à une propriété css, par exemple : .css("opacity",0.5) (se produisait aussi avec zIndex, fontWeight)
    Echec des appels à $(…, jqobj) avec un objet jQuery en contexte.
    Tenter d’accéder à une propriété d’un élément inexistant provoquait une erreur. Par exemple : $("#inexistant").attr("id")
    Appeler .load() sans callback provoquait une erreur. (...)

  • Tester la version de développement

    16 janvier 2007, par Fil
    Si un bug de jQuery nous a mordu on veut savoir s’il est encore présent dans la version de développement. Mode d’emploi.
    Pour tester la version SVN de jquery, il faut se munir de deux outils : un client svn, et la ligne de commande make.
    Une fois ces deux outils installés, la manip est relativement simple :
    La première fois, télécharger le répertoire de développement de jQuery :
    # svn co http://jqueryjs.googlecode.com/svn/trunk/ jquery/
    par la suite on se contentera de faire un « update » :
    # svn up (...)

  • Verso jQuery 1.1

    12 gennaio 2007, di John Resig, Renato
    Il 14 gennaio, John Resig rilascerà la nuova versione di jQuery, jQuery 1.1. Per questa versione, ad un anno dalla sua nascita, gli sforzi si sono concentrati verso il miglioramento della velocità di esecuzione della libreria, in special modo riguardo ai selettori degli elementi.
    Ecco alcune delle maggiori novità presenti nella versione 1.1:
    I selettori sono più veloci, da 10 a 20 volte rispetto alla versione 1.0.4;
    La documentazione è stata interamente riorganizzata;
    La complessità dell’API (...)

  • Vers jQuery 1.1

    12 janvier 2007, par Fil, John Resig
    Le 14 janvier, John Resig livrait la nouvelle version de jQuery, jQuery 1.1. Pour cette version — qui marque le premier anniversaire du projet — beaucoup de soins ont été apportés à l’amélioration de la vitesse globale de la librairie, et surtout à la rapidité d’exécution des sélecteurs.
    Voici quelques points remarquables concernant la version 1.1 :
    Ses sélecteurs fonctionnent 10 à 20 fois plus vite que dans la version 1.0.4 ;
    La documentation a été entièrement revue ;
    La complexité de l’API (...)

  • Bandeau d’actualité

    Newsticker

    3 décembre 2006, par allergie
    Texotela propose sur son site un petit script très simple en jQuery pour vous permettre d’afficher dynamiquement des titres de brèves (ou des "objets" de ce que vous voulez d’ailleurs) qui se renouvellent en alternance avec un joli effet de "fading". Voyons ensemble ce que cela donne en Français.
    Source : http://www.texotela.co.uk/code/jque...
    Il existe de nombreuses solutions javascript pour faire défiler un bandeau d’informations ou d’actualités ou pour faire alterner l’affichage d’images dans (...)

  • jQuery Magazine #1

    10 octobre 2006, par Fil
    jQuery Magazine est une publication électronique éditée par Yehuda Katz à New York. Un magazine PDF de 12 pages, dont le premier numéro vient de sortir :
    http://www.visualjquery.com/magazin...
    Et voici la version française !

  • end()

    4 octobre 2006, par toggg
    Pour essayer de comprendre le fonctionnement de end()
    Voici un document très simple : end.html jQuery end()
    $(function()
    $(’body’). find(’div’). end(). find(’span’). css(’border’, ’1px solid green’) ; $(’body’). find(’div’). find(’span’). css(’background’, ’magenta’) ; ) ;
    0 1 On cherche les <div> puis les <span>
    Le premier fait un end() ... donc revient à <body> et encadre en vert tous les <span>.
    Le second enchaine sans end() et ne trouve (...)

  • Danse avec jQuery : quatrième et dernier pas

    2 octobre 2006, par toggg
    Article original : http://jquery.bassistance.de/jquery...
    merci à (c) 2006, Jörn Zaefferer - mise à jour : 2006-09-12.
    La suite de Danse avec jQuery : troisième pas
    Pluggez-moi : écrire son propre plugin
    Écrire vos propres plugins pour jQuery est vraiment facile. Si vous en restez aux règles suivantes, il sera aussi très simple pour les autres d’intégrer votre plugin.
    1 Trouver un nom au plugin, dans l’exemple « foobar ».
    2 Créer un fichier nommé jquery.[yourpluginname].js, ici, jquery.foobar.js
    3 Créer (...)

  • Danse avec jQuery : troisième pas

    2 octobre 2006, par toggg
    Article original : http://jquery.bassistance.de/jquery...
    merci à (c) 2006, Jörn Zaefferer - mise à jour : 2006-09-12.
    La suite de Danse avec jQuery : deuxième pas
    Notez-moi : utilisation d’AJAX
    Dans ce chapitre nous écrivons une petite application AJAX qui permet à l’utilisateur d’attribuer une note à quelque chose, exactement comme sur youtube.com.
    Nous avons besoin de code serveur pour cela. Mon exemple utilise un fichier php qui lit le paramètre « notation » et retourne le nombre de notes et leur (...)

  • Danse avec jQuery : deuxième pas

    2 octobre 2006, par toggg
    Article original : http://jquery.bassistance.de/jquery...
    merci à (c) 2006, Jörn Zaefferer - mise à jour : 2006-09-12.
    La suite de Danse avec jQuery : premier pas
    Trouvez-moi : utilisation des sélecteurs et des événements
    JQuery propose deux approches pour sélectionner des éléments. La première utilise une combinaison de sélecteurs CSS et XPath passés comme chaîne de caractères au constructeur jQuery (comme par exemple $("div > ul a")). La seconde se sert de différentes méthodes de l’objet jQuery. Les deux (...)

  • Danse avec jQuery : premier pas

    2 octobre 2006, par toggg
    Un guide pour jQuery
    Article original : http://jquery.bassistance.de/jquery...
    merci à (c) 2006, Jörn Zaefferer — mise à jour : 2006-09-12.
    Ce guide est une introduction à la bibliothèque jQuery. Il nécessite des connaissances de javascript et du modèle objet des documents (DOM). Il démarre de la base et essaye de donner des détails si nécessaire. Il inclut un exemple simple de type « hello world », les bases de la sélection et du traitement des événements, l’utilisation d’AJAX, des effets (FX), et la (...)

  • L’effet machine à écrire

    18 septembre 2006, par Fil
    Tic tic tic... on affiche notre texte caractère par caractère.
    En réponse à une question posée sur la liste discuss@jquery.info, voici un effet « machine à écrire ». C’est le code le plus complexe de la série jusqu’ici.
    Le fonctionnement est le suivant : au chargement de la page, on lance une fonction .typewriter() sur les blocs de notre choix. Pour définir un plugin, il suffit de l’ajouter aux fonctions de l’objet jQuery ($.fn), sous la forme suivante :
    $.fn.typewriter = function() (...)

  • Une boîte de recherche un peu smart

    14 septembre 2006, par Fil
    Les jolies boîtes de recherche de Safari ne sont pas compatibles XHTML. Qu’à cela ne tienne !
    D’abord un peu de contexte : Safari, le navigateur d’Apple, a introduit un nouveau type de balise dédiée aux moteurs de recherche.
    Ses avantages, entre autres :
    elle est joliment stylée (coins arrondis, interface cohérente) ;
    elle se souvient de l’historique des mots entrés précédemment ;
    elle fonctionne correctement hors de Safari, se comportant alors comme un normal.
    Son gros inconvénient :
    cette (...)

  • Racchiudere il contenuto di un elemento... in un altro elemento

    12 settembre 2006, di Renato
    Una semplice tecnica utile ad inserire tra un elemento ed il suo contenuto, un altro elemento, ad esempio un link.
    Il nostro obiettivo è di trasformare questo frammento di HTML vorrei essere un link! in vorrei essere un link!
    Creeremo una funzione che riceve in argomento il codice HTML che andrà a racchiudere il contenuto degli elementi a cui la applicheremo.
    Supponiamo di avere nella variabile this l’elemento a cui vogliamo applicare la trasformazione.
    Memorizziamo in un’altra (...)

  • Jouer à Shanghaï

    9 septembre 2006, par Fil
    Chacun connaît le jeu de solitaire appelé Shanghaï, qui se joue avec des pièces de Mah-jong qu’on doit retirer du plateau, par paires. On en programme ici une version (très limitée) en jQuery.
    L’objectif, sur le plan technique, est double :
    faire une interface qui ne se limite pas à des effets visuels ;
    gérer des données qui sont présentes dans la page HTML, et pas dans des globales javascript.
    Installation du plateau de jeu
    Notre script d’initialisation se lance dès que la page est prête, et (...)

  • jQuery Cheat Sheet

    3 septembre 2006, par Fil
    Sur une page à imprimer, toutes les fonctions de jQuery.
    Bravo à Nilesh Patel pour avoir préparé cette feuille à télécharger sur son site et à imprimer (au format horizontal).
    Mise à jour : il y a désormais une seconde page.

  • Le code révélé

    31 août 2006, par Fil
    Les techniques dites AJAX permettent à une page HTML, déjà chargée dans le navigateur, d’aller chercher sur le même site un fragment de HTML et de l’insérer quelque part. jQuery possède tout ce qu’il faut pour faire cela.
    Ici, nous allons employer $.get(), qui charge une URL et, une fois l’URL chargée, appelle une fonction en lui passant le contenu chargé.
    Notre fonction prendra donc le contenu en question (variable c), transformera les symboles en < — c.replace(/ —, et insérera le résultat (...)

  • sedna

    31 août 2006, par Fil

  • Cloner des éléments

    27 août 2006, par piif
    Comment prendre une certaine liste de nœuds du DOM, et les manipuler en les recopiant (clonage), et en modifiant certaines de leurs propriétés.
    On va essayer de modifier les liens présents dans une page afin de créer dynamiquement des variantes.
    Pour cela, on commence par lister les liens qui nous intéressent (ici ceux ayant le titre « perdu ») : $("a[@title=’perdu’]")
    Pour chacun d’eux, on applique une fonction qui va nous permettre de les tripoter tranquillement : .each(function(i) ... ) ;
    C’est (...)

  • Ajouter une image dans une page

    26 août 2006, par Fil
    Comment charger (en javascript) une image dans un document.
    Sur la mailing-list de jquery, sDisk donnait un script permettant d’ajouter une image dans un document, et lancer une action (ici, une alerte) quand l’image a fini de charger.
    Le problème du code proposé est qu’il ne fonctionnait pas sur Safari, je l’ai donc un peu réécrit.
    Ce qui est intéressant — outre la question du chargement d’une image dans le DOM —, c’est que ce script est écrit comme un plugin de jQuery. Une première partie du (...)

  • Un repas équilibré

    26 août 2006, par Fil
    CSS ne permet pas directement d’équilibrer la hauteur de différentes boîtes. Un coup de javascript et c’est réglé... avec jQuery c’est en trois lignes.
    Notre document est composé d’une , laquelle contient plusieurs sous-éléments qu’on veut équilibrer (c’est-à-dire à qui on va donner la hauteur de l’élément le plus haut).
    On commence par indiquer ce qui doit se passer lorsque la page est prête :
    Ici, tout élément portant la classe .equilibre va se voir appliquer une fonction. Cette fonction consiste à (...)

  • Jour j

    26 août 2006, par Fil
    Mise à jour : j+1
    Je ne vais pas suivre le rythme de sortie des nouvelles versions de jQuery. La version 1.0 n’est en tout cas déjà plus la dernière version stable en date.
    Le samedi 26 août, un an après que John Resig en ait annoncé l’idée, la version finale 1.0 de jQuery est sortie.
    http://jquery.com/
    On peut télécharger cette version à partir des adresses suivantes :
    http://jquery.com/src/jquery-1.0.js pour la version « lisible ».
    http://jquery.com/src/jquery-1.0.pack.js pour la version compressée (...)

  • Le plugin « form »

    23 août 2006, par Fil
    Un plugin permet d’envoyer le contenu d’un formulaire et d’afficher le résultat dans une div de la page. C’est form.js, développé par Mark Constable
    Pour faire un peu Web 2.0, il faut que les formulaires ne rechargent pas la page, mais seulement un fragment de celle-ci. Pour cela, on compose notre formulaire comme d’habitude, sans rien y changer.
    On appelle jQuery et le plugin form.js dans notre page :
    (Ici j’ai mis la version SVN de jQuery car l’habituelle latest.js avait un bug.)
    Puis le (...)

  • Géolocaliser Lille

    20 août 2006, par Fil
    Le microformat geo sert à indiquer une localisation géographique. On va en faire quelque chose d’utile.
    Tout d’abord, un peu de background sur le microformat geo : c’est un petit morceau de HTML dans lequel sont indiquées des coordonnées géographiques (latitude, longitude).
    Un tag geo est constitué d’un élement quelconque possédant la classe .geo, et contenant deux éléments de type , l’un portant la classe latitude et un title indiquant la valeur numérique de latitude, l’autre portant la classe (...)

  • Le plugin « editable »

    19 août 2006, par Fil
    Des interfaces très fluides, c’est possible !
    Voici enfin une révolution dans les interfaces Web : l’édition « en place » de contenu, sans passer par une page spécifique avec un formulaire d’édition. Dylan Verheul a écrit un plugin pour jQuery qui permet de faire ça en quelques lignes de code. Impressionnant !
    Son code est disponible à l’adresse :
    http://www.dyve.net/jquery/ ?editable
    J’ai fait aussi un exemple complet, directement tiré du sien, qui montre les données telles qu’elles sont reçues par (...)

  • Comment installer jQuery, et quelle version choisir ?

    19 août 2006, par Fil
    jQuery existe en plusieurs versions, et son développement est permanent. Comment s’y retrouver ?
    Pour installer jQuery dans une page de son site (ou mieux, dans un template ou un squelette SPIP), il suffit d’une ligne, à ajouter dans l’entête (la partie ... de la page HTML) :
    On peut donc attraper une copie du fichier jquery.js, l’installer sur son site, dans le répertoire /js/ par exemple, et faire :
    Mise à jour :
    jQuery 1.0 est sortie le 26 août 2006. On peut télécharger cette version à (...)

  • Joli code

    19 août 2006, par Fil
    Ouvrir le code de jQuery, c’est se plonger tout d’abord dans une mer de perplexité :
    http://jquery.com/src/latest/
    Certains trouvent ça beau ! (J’en fais partie... hum !)
    Evidemment c’est du code qui n’a pas été tapé comme ça par un humain, mais par un script de compression qui analyse et réécrit le code source de manière à ce qu’il occupe le moins de place possible (ce qui permet de le charger et de l’exécuter plus vite).
    Le code non compressé est élégant lui aussi : (...)

  • Un paragraphe trop à l’étroit

    17 août 2006, par Fil
    Manipulons gaiement les styles
    Ce serait bien sympa de pouvoir agrandir à volonté un élément, par exemple pour le faire croître en fonction de son âge.
    Voici une méthode qui choisit le même paragraphe que l’article précédent (Ajouter une boîte à coucou), et l’étire un peu.
    $("#texte > p:nth-child(1)") .prepend("coucou !") .css(width : "120px") ;
    Notez la syntaxe de la commande .css(), qui prend la déclaration des styles non pas sous forme de texte, mais sous la forme d’un tableau (...)

  • Ajouter une boîte à coucou

    17 août 2006, par Fil
    L’idée est d’ajouter dans la page, à un endroit bien choisi, une .
    Tout d’abord, choisir l’endroit qui convient : disons, par exemple, au début du deuxième paragraphe du texte de la page.
    Nous repérons le texte comme étant la , avec $("#texte").
    Ensuite, pour repérer le deuxième paragraphe, on utilise l’expression jQuery correspondante :
    $("#texte/p:nth-child(2)")
    #texte va sélectionner l’élement (ici, une ) dont l’id est texte ; ensuite, avec #texte/p on considère les paragraphes appartenant (...)

  • Transformer tous les liens d’une page

    15 août 2006, par Fil
    Notre objectif pour ce premier article est de voir comment jQuery peut nous permettre d’agir sur toutes les balises de notre page.
    Tout d’abord, il faut ajouter dans les entêtes de la page HTML un appel à la librairie jquery.
    .....
    Ensuite, le contenu de notre page :
    .... Voici le lien 1. Et le lien 2.
    Le script ci-dessous — que nous allons insérer dans l’entête de la page — attend que celle-ci soit « prête » (complètement chargée), et appelle ensuite l’ensemble des (...)


Derniers commentaires

Nouveautés sur le Web