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.

2 comments

  1. john diffol

    Bonsoir Olivier,
    en cherchant une solution à mon problème, je suis tombé sur ton site et donc… ben je me tourne vers toi vue que tu a l’air de maîtriser le sujet.
    j’utilise un menu basé sur jquery : original sur http://ldbglobe.fried-rice.net/public/2007/06/jQuery.imageMenu/

    le lien du site( en construction) est : http://www.elips-batiment.fr

    voilà le pb : il faudrait que j’utilise le fameux # pour que le menu fonctionne correctement (image correspondante à la page dépliée)
    mais dans ce cas je n’arrive plus a passer ma variable en php (l’ID de la page)

    dans l’absolu, j’aimerais avoir mapage.html (avec url rewriting par htaccess)
    mais je me contenterais de 5.mapage.html
    5 étant le numéro du menu (#menu5)

    aurais-tu une solution à ce pb ???
    sinon j’abandonnerai ce menu (mais ça m’embêterais, vu qu’il est trop beau) 😉
    merci pour la réponse… même si y a pas de solution

    si je pouvais me passer du dièse

    sinon sympa le site… j’ai 2 filles de 9 et 13 ans…. j’ai bien aimé certains commentaire .. lol
    a+

    • Olivier Pons

      Bonjour,

      C’est extrêmement facile.
      – tu as des liens du genre :
      <a title="Demandez-nous un devis gratuit"
        href="#4.demande-devis.html"
        rel="nofollow"></a>

      – pour chaque lien, ajoute lui un identifiant unique par exemple :
      <a title="Demandez-nous un devis gratuit"
        href="#4.demande-devis.html"
        rel="nofollow"
        id="id_demande_devis" ></a>

      Il faut que, en jQuery, tu rajoute « dynamiquement », c’est à dire un script en fin de page, par exemple, l’évenement « onclick » sur le lien et lorsqu’on cliquera dessus, tu redirigeras vers la bonne page en jQuery

      $('#target').click(function() {
      alert('Handler for .click() called.');
      });

      Tu pourras trouver plus d’informations par ici : jQuery onClick

      Surtout n’hésite pas à donner ta solution ici, pour la faire partager à tout le monde !

      Olivier

Poster un commentaire

Vous devriez utiliser le HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>