de l'utilité du dynamisme des langages serveurs, php ou autres.
<li><a class="active" href="#" title="mars">mars</a></li>
Comment tu vas faire le mois prochain à part modifier à la main ta classe active? Toujours garder à l'esprit que javascript peut être désactivé ou inexistant, bien que ce soit un peu moins courant qu'on veux bien le dire, c'est toujours possible et que ce n'est pas solution à tout.
le code final avec chargement du mois courant avec un lien du genre
mapage.html?mois=mars
Pour les tests utilise
http://localhost/mondossier/mapage.html?mois=mars
à condition évidement d'avoir un serveur local installé. Si tu te lance dans le dev web/internet je te le conseille fortement, wamp, au hasard, tu auras ainsi php/mysql/apache d'un seul coup.
en effet, il est fort probable qu'internet explorer, refuse l'ouverture directe à cause des get. Ou utilise firefox qui lui, autorise une url du genre
C:/Program%20Files/wamp/www/perso/tests/ajax.html?mois=mars
Finalement c'est formateur de répondre à certains posts
J'aurais moi aussi appris quelque chose et récupéré un super plugin tout léger mais vraiment sympà.
Pour l'affichage progressif c'est le fadeIn sur cette ligne :
$(this).fadeIn();
Il n'est pas obligatoire et d'autres effets sont possible, cherche
ici mais c'est de l'affichage, donc, pas tant que çà. On peut faire plus optimisé mais tu as ici toute la base et testée. çà fonctionne
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr-FR" dir="ltr" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>tests jquery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery.extend({
'Q' : window.location.search.length <= 1 ? {}
: function(a){
var i = a.length,
r = /%25/g,
h = {};
while(i--) {
var p = a[i].split('=');
h[ p[0] ] = r.test( p[1] ) ? decodeURIComponent( p[1] ) : p[1];
}
return h;
}
(window.location.search.substr(1).split('&'))
});
switch ($.Q.mois) {
case 'janvier':
urlMois = 'includes/janvier.html';
break;
case 'fevrier':
urlMois = 'includes/fevrier.html';
break;
case 'mars':
urlMois = 'includes/mars.html';
break;
default :
$('#chargement').html('paramètres incorrect');
}
$('#chargement').hide().load(urlMois, function() {
$(this).fadeIn();
});
$('#menud a').click(function() {
var title = $(this).attr('title');
var url = '';
switch(title) {
case 'janv' :
url = 'includes/janv.html';
break;
case 'fev' :
url = 'includes/fev.html';
break;
case 'mars' :
url = 'includes/mars.html';
break;
default :
url = 'includes/mars.html';
}
$('#chargement').hide().load(url, function() {
charge();
$(this).fadeIn();
});
return false;
});
});
function charge() {
var loader = $('<img/>').attr({'src': 'images/loader.gif','alt': 'Chargement en cours... Please wait...'});
$('<div id="loader">'+loader+' Chargement en cours... please wait, load in progress...</div>')
.insertBefore('#chargement')
.ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
}
</script>
</head>
<body>
<div id="corps">
<h1>La recette du mois</h1>
<p>Pour faciliter la recherche, nous avons classé les recettes mois par mois. Vous pouvez également utiliser le moteur de recherche en utilisant le nom d'un ingrédient ou le nom d'une recette par exemple.</p>
<div id="menud">
<ul>
<li><a href="#" title="janv">janvier</a></li>
<li><a href="#" title="fev">février</a></li>
<li><a class="active" href="#" title="mars">mars</a></li>
<li><a href="#" title="avr">avril</a></li>
<li><a href="#" title="mai">mai</a></li>
<li><a href="#" title="juin">juin</a></li>
<li><a href="#" title="juil">juillet</a></li>
<li><a href="#" title="aout">août</a></li>
<li><a href="#" title="sept">septembre</a></li>
<li><a href="#" title="oct">octobre</a></li>
<li><a href="#" title="nov">novembre</a></li>
<li><a href="#" title="dec">décembre</a></li>
</ul>
</div>
<div id="chargement"></div>
</div>
</body>
</html>
[/i]
Modifié par keran (14 Mar 2011 - 22:45)
Bon ben c'est un bug puisque tout est correct. 