NoShade.net est en vente — Contactez nous si vous êtes intéressé
Le siteTutoriauxInterviews
icone RSS NoShade.net

Accueil » Tutoriaux » Css » Créer un mini-site avec jQuery

Créer un mini-site avec jQuery


jQuery est devenu indispensable pour tout développeur web. Ce petit bout de code magique simplifie la création d'effets divers sur votre site, de requêtes AJAX et plus simplement, il facilite la vie du développeur ! Voyons ensemble comment créer un mini-site avec jQuery ! :-)



OK, voilà brièvement à quoi va ressembler notre mini-site :

À l'endroit de votre choix sur votre disque dur, créer un dossier "mini-site". C'est là dedans que nous allons construire notre mini-site de test.
A préciser également qu'il vous faut avoir JavaScript d'activé sur votre navigateur web, jQuery nécessitant JavaScript pour fonctionner.
Il vous faut ensuite télécharger deux choses :
- Premièrement, récupérez ici notre fichier "styles.css", car nous n'allons pas détailler les CSS de notre "mini-site" qui sont très simples. Enregistrez le code dans un fichier "styles.css" dans le votre dossier "mini-site".
- Deuxièmement, allez sur le site de jQuery, vous trouverez à droite un gros bouton "Download jQuery", choisissez bien la version "production" et non "development" du code, puis téléchargez le.
Vous voilà avec un fichier "jquery-1.3.2.min.js" (le numéro de version sera amené à évoluer dans le futur), que vous pouvez renommer plus simplement en "jquery.js". Placez ce fichier dans un dossier "js" dans votre dossier "mini-site".

Créons ensuite un document html de base, en XHTML 1.0 Transitional, dans un fichier "index.html", à la racine de votre dossier "mini-site" :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>Mon mini-site avec jQuery - Par NoShade.net</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>

</body>
</html>


Voilà à quoi ressemble notre dossier "mini-site" :

Nous allons donc joindre notre fichier "jquery.js" à notre page html en ajoutant cette ligne de code entre les deux balises :
<script src="js/jquery.js" type="text/javascript"></script>


Côté html, dans notre page, ajoutons une zone de titre (celle-ci est mise en page grace au fichier "styles.css") :
<div id="titre">
<div class="centrage">
  <h1>Mon mini-site avec jQuery</h1>
  <h2>Par NoShade.net</h2>
</div>
</div>


Puis le contenu de la page :
<div id="page">
<div class="centrage">

  <div id="menu">
    <a href="#" onclick="AfficheTexte('accueil'); return false;" class="onglet">Accueil</a>
    <a href="#" onclick="AfficheTexte('actualites'); return false;" class="onglet">Actualités</a>
    <a href="#" onclick="AfficheTexte('nos_produits'); return false;" class="onglet">Nos produits</a>
    <a href="#" onclick="AfficheTexte('nous_contacter'); return false;" class="onglet">Nous contacter</a>
    <div style="clear: both;"></div>
  </div>

  <div id="contenu">
    <div id="bloc_accueil" class="bloctexte" style="display: block;">
      <h3>Texte de la page d'accueil</h3>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
    </div>
    <div id="bloc_actualites" class="bloctexte" style="display: none;">
      <h3>Texte de la page des actualités</h3>
      Ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing.
    </div>
    <div id="bloc_nos_produits" class="bloctexte" style="display: none;">
    <h3>Page de présentation des produits</h3>
      Ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum.
    </div>
    <div id="bloc_nous_contacter" class="bloctexte" style="display: none;">
      <h3>Page de contact</h3>
      Volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div>
  </div>
</div>
</div>


Détaillons la composition de nos 4 liens :
- L'attribut href="#" : le lien ne pointe pas vers une page, on indique un simple dièse
- L'action onclick= : c'est une action JavaScript, au clic de la sourie, on exécute l'action ou la fonction qui suit
- AfficheTexte('accueil'); : Il s'agit de la fonction qui est appelée lors du clic de la sourie. la fonction "AfficheTexte" contient une valeur qui est "accueil", il s'agit du nom de la page que l'on souhaite ensuite afficher. Cette valeur change donc pour chacun des 4 liens!
- return false; : annule l'effet normal d'un lien, si vous aviez mis par exemple dans l'attribut href="page_accueil.html", le navigateur ne cherchera pas à aller sur la page "page_accueil.html"
- class="onglet" : c'est simplement la classe CSS appliquée à ce lien pour le formater en un bloc orange

Côté contenu, nous avons donc 4 blocs, chacun avec un "id" pour l'identifier, vous remarquerez que leur id correspond aux valeurs dans les fonctions des 4 liens.
- le lien "Accueil" du menu a dans la fonction "AfficheTexte" la valeur "accueil", et le bloc du texte d'accueil à comme id "bloc_accueil".
- le lien "Actualités" du menu a dans la fonction "AfficheTexte" la valeur "actualites", et le bloc du texte d'accueil à comme id "bloc_ actualites".
Et il en est de même pour les deux autres liens/blocs ! :)

OK, à noter également que nous voulons afficher le bloc de la première rubrique par défaut, nous avons donc masqué les trois autres en leur attribuant un petit style="display: none;" tout simplement !

A ce stade, vous pouvez déjà prévisualiser votre page en ouvrant le fichier "index.html" dans votre navigateur web préféré. Les liens du menu ne marchent pas encore, mêm'pas la peine d'essayer! =)

Nous allons donc "JavaScriptiser" un peu. Avant votre balise , placez ce code JavaScript :
<script type="text/javascript">
//<![CDATA[
function AfficheTexte(nom_du_bloc)
{
  var id_du_bloc_a_ouvrir = "#bloc_" + nom_du_bloc;

  $(".bloctexte:visible").slideUp(300, function() {
    $(id_du_bloc_a_ouvrir).slideDown(600);
  });
}
//]]></script>


Voici donc notre fameuse fonction "AfficheTexte".
Dans celle-ci, nous commençons dans une nouvelle variable "id_du_bloc_a_ouvrir", par ajouter "bloc_" devant la valeur transmise par la fonction AfficheTexte de nos 4 liens du menu, ainsi, on passe par exemple de la valeur "nos_produits" à "bloc_nos_produits", soit... L'id du bloc qui contient le texte de la rubrique concernée !

Avec jQuery, nous allons chercher le bloc qui est actuellement visible (par défaut, le premier bloc donc), avec ce code là :
$(".bloctexte:visible")


On va ensuite le faire "remonter" avec la fonction "slideUp", en une vitesse de 300 millisecondes (vous pourrez ensuite réduire ou augmenter ce chiffre pour régler la vitesse de l'effet).
.slideUp(300

Nous avons ensuite ce qu'on appelle un "Callback", c'est à dire une action que l'on veut exécuter seulement une fois que la première à fini d'être exécutée !
En l'occurrence, nous voulons déjà remonter le bloc actuellement affiché, puis dérouler le bloc demandé ensuite.
Pas grand chose à expliquer donc, on identifie le bloc à "remonter" avec son id, contenu dans la variable "id_du_bloc_a_ouvrir", puis on le "déroule" avec la fonction jQuery "slideDown" à une vitesse de 600 millisecondes.

Essayez donc de rafraîchir votre navigateur. C'est chouette, non ! :-)

Pour le côté fun, et pour voir un autre point avec jQuery, nous allons ajouter un petit effet de survol sur chaque liens du menu.
Dans notre encart de script javascript, ajoutons ce code :
$(document).ready(function(){
    $("#menu a").mouseover(function() {
      $(this).fadeTo(300, 0.4);
    });
  $("#menu a").mouseout(function() {
      $(this).fadeTo(900, 1);
    });
  });


Détaillons également ce code. La partie suivante :
$(document).ready(function(){ });

Sert à lancer une série de scripts ou dès que la page est chargée (dès que le DOM est prêt pour être précis).
Là, on identifie donc les liens du menu. Pour rappel, le menu est englobé dans un bloc dont l'id est #menu.
Avec la fonction "mouseover", propre à jQuery également (JavaScript utilise "onmouseover" pour rappel). On va demander à réduire l'opacité (fadeTo) à 0.4, soit 40%. Le terme "this" signifie "cet element" et est propre à JavaScript et à jQuery.

Rafraîchissez votre navigateur web, et essayer de passer votre curseur le long du menu... Cool, non!? :)

Vous pouvez télécharger le code de ce tutoriel, ou en visualiser le résultat !

Vous avez maintenant les bases de jQuery. Pour plus d'informations, demandez à Google, ou fouillez la documentation, qui est très bien fournie, mais en anglais seulement. Le site de jQuery propose tout de même une bonne série de tutoriaux en Français, ce qui est plutôt bien de leur part ! =)

Amusez vous bien avec jQuery !!
Le 15/08/2009 par Legibe

Partager ce tutoriel : icone Scoopeo icone del.icio.us icone Digg icone Facebook icone Technorati icone TwitThis icone Google icone Live icone MySpace icone Wikio icone Mixx icone Reddit icone NewsVine

Vous avez aimé ce tutoriel ?

Faites un don pour nous encourager à en écrire d'autres! :-)

Commentaires :

XeuZ a écrit :

Merci pour ce script...! :D

alex67cv a écrit :

Bonjour,tout d'abord merci pour ce super tuto...
Je découvre et en apprend tout les jours de plus en plus les merveilleuse possibilités de ses langage informatique et qui me fascine...
J'ai donc suivi le tuto et tout va bien,c'est exactement comme il le faut...
Je fais plein d'essais en rajoutant des menus et autres changements CSS...mais une chose que je n'arrive pas,c'est rajouter un menu qui serait placer a gauche de la page et qui agirait exactement comme les menus du haut...?
J'ai essayer divers système mais en vain..
Le menu se situe toujours en dessous des 2 menu du haut...même en mettant dans le css du menu ( float:left;)
Pouvez m'éclaircir svp sur le code java ou css à rajouter pour pouvoir y rajouter des menu identique mais a gauche ou a droite de la page...?
Merci d'avance à vous..et sachez que si je le pouvais et bien je vous ferais volontiers un don...car vous nous permettais d'apprendre et de créer de belles choses grâce à vos connaissances, et que vous le faite partager gracieusement...
Donc encore un grand merci à vous...( on ne le dit jamais assez je trouve..)
Cordialement.

mantolama a écrit :

On va demander à réduire l'opacité (fadeTo) à 0.4, soit 40%. Le terme "this" signifie "cet element" et est propre à JavaScript et à jQuery.

konut projeleri a écrit :

le futur), que vous pouvez renommer plus simplement en "jquery.js". Placez ce fichier dans un dossier "js" dans votre dossier "mini-site".

Ajouter un commentaire sur ce tutoriel

XHTML, HTML, CSS, Transitional, Strict, jQuery, AJAX, JavaScript, Effet, Opacité, slideUp, slideDown
Si vous avez remarqué une erreur (une faute ou tout autre type de problème que nous puissions corriger), n'hésitez pas à nous écrire!
Soyez aussi précis que possible et n'oubliez pas de nous indiquer le tutoriel dans lequel l'erreur se trouve. Merci!! :)