Mots-clé : jquery

Mathieu Robin et jQuery : un site à voir

J’ai laissé quelques commentaires sur un site que j’ai trouvé sympa, et depuis j’ai parlé plusieurs fois avec le créateur du site. Il a de très bonnes idées et fait plein de choses, et surtout en ce qui me concerne car j’aime les nouveautés, il suit de très près tout ce qui concerne jQuery.
Si, vous aussi, vous voulez suivre ça de très près, allez jeter un coup d’oeil, c’est lisible et sympa. Il m’a en plus mis dans les sites à visiter alors, hein, bon. Cliquez sur l’image pour y aller :

Olivier Pons en marque page chez Mathieu Robin

Hint et tips jQuery

Voici quelques astuces toutes bêtes mais qui vont vous faire gagner beaucoup de temps si vous démarrez avec jQuery :

  1. Dans d’autres librairies JavaScript (prototype pour ne pas la nommer), le symbole $(« Xx ») va chercher l’objet de votre document (DOM) en fonction de son Id. Donc, ici $(« Xx« ) ira chercher l’objet déclaré avec la propriété Id= »Xx ».
    Avec jQuery, ce n’est pas la même chose : si on veut chercher par Id, il faut ajouter le dièse (#). Donc le code équivalent précédent, mais pour jQuery, serait : $(« #Xx« ).
    J’espère que cette astuce vous fera déjà gagner quelques minutes / heures.
  2. Il y a deux possibilités de mettre du code au chargement de la page :
    1. Lorsque votre document a fini d’être chargé, mais pas forcément le reste : c’est le code suivant :
      $(document).ready(function() {
        // code lorsque le DOM a tout juste fini
        // (la page n'est pas encore visible !)
      });
    2. Lorsque la page au complet, avec toutes les images et tout ce que vous avez déclaré dans la page, a fini d’être chargée : c’est le code suivant :

      $(window).bind('load', function() {
        // code lorsque toute la page a fini
        // d'être chargée
      });

    L’intérêt de ça me direz-vous ? Voilà ce que vous pouvez faire :

    • Créer une page XHTML entièrement valide, mais qui ne cache rien de manière à ce que n’importe quel navigateur, y compris un navigateur destiné à lire en mode texte (lynx, par exemple), afin que des personnes handicapées puissent tout lire sans problème ;
    • Créer un évènement qui, dès le chargement de la page, alors qu’elle n’est pas affichée, cache la plupart des éléments afin d’afficher un message pour patienter ;
    • Créer un évènement qui, une fois que toutes les images et la totale sont chargées, affiche le menu et ce qu’il y a derrière.

    Vous pouvez éventuellement penser que c’est un retour en arrière, à savoir qu’il y a quelques années, on n’affichait la page que lorsque tout était chargé, et puis on s’est dit : « le monde va vite, très vite, il faut afficher des choses dès que l’on peut ». Donc maintenant la plupart des navigateurs, dès qu’ils ont le minimum de choses à afficher, le mettent visuellement devant l’Internaute. Du point de vue élégance, je trouve ça laid et si vous voulez faire quelque chose de moderne, affichez uniquement un texte en fondu qui affiche « patientez, chargement », et vous verrez que le fait d’afficher la page en entier uniquement lorsqu’elle est téléchargée est vraiment sympa et démarque des autres sites. Vous pouvez aussi ne cacher que certains menus qui ne sont pas vraiment présentables tant que les images qui vont avec ne sont pas affichées, et ne pas cacher le reste. Bon bref c’est quelque chose de vraiment utile, de pouvoir gérer ces deux événements qui sont déclenchés à des moments cruciaux.