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

Accueil du site > AJAX > Un lien vers une page, qui finalement va charger un fragment

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

lundi 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 lequel doit se loger le fragment
  • avoir le fragment de page mapage_fragment.html

Voici le premier code qui, lors d’un click et pour tous les liens ayant class="load" insère le fragment dans le div id="myid" puis empêche le rechargement de la page par un return false;

Ce jquery est intrusif, voir l’exemple (en activant/désactivant javascript dans votre navigateur)

Afficher la page brute si le javascript est désactivé

Ajoutons maintenant un replace pour modifier le lien et la page complète mapage.html vers lequel pointe le lien.

Ce jquery est non intrusif, voir l’exemple (en activant/désactivant javascript dans votre navigateur)

De cette manière, si javascript est désactivé, le lien fonctionnera normalement ; si javascript est actif, le lien est réécrit par jQuery pour appeler le fragment.

Les moteurs pourront référencer plusieurs pages complètes, et vous pourrez éventuellement proposer à vos visiteurs de marquer la vraie page dans leurs favoris.

P.-S.

On ne saurait trop conseiller l’usage de l’extension firefox web developer pour ici activer et désactiver javascript facilement.

Voici les recettes de ma cuisine de codes jQuery dont certains déjà présentés sur jquery.info et dont j’ai extrait certaines possibilités
- Afficher un fragment dans "Le code révélé" http://www.jquery.info/spip.php?art...
- Modifier la propriété d’un élément dans "Cloner des éléments" http://www.jquery.info/spip.php?art...
- Pour corser le tout, je voulais aussi un effet d’affichage comme avec http://interface.eyecon.ro/demos/if...

Visible avec plusieurs effets sur http://ecrantotal72.com/

Documents joints

Répondre à cet article

7 Messages de forum

  • (logo)

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

    2 mars 2007 17:58, par toutati

    Avec les dernières versions de JQuery, voici un exemple qui marche

    Répondre à ce message

    • (logo)

      Ici le visiteur ne voit pas le lien transformé en javascript puisque renommage et appel se font au moment du click

      Avec ré initialisation possible :

      Répondre à ce message