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() {
//plugin trouvé ici : http://fr.w3support.net/index.php?db=so&id=439463
// il récupére les variables get, bien sympà
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('&'))
});//fin plugin
// test le mois issu de la variable get
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() {
// récupére le title du lien
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;
//etc, un case par mois
default :
url = 'includes/mars.html';
}
$('#chargement').hide().load(url, function() {
//appel de la fonction facultative
charge();
$(this).fadeIn();
});
return false;
});
});
// fonction facultative, affiche un gif animé pendant l'attente du chargement
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>
<!-- les titles des liens servent de base pour les chargements -->
<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><!-- menud -->
<!-- ici se chargeront les recettes par mois -->
<div id="chargement"></div><!-- chargement attention de ne rajouter de retour à la ligne sur ce div -->
</div><!-- corps -->
</body>
</html>
[/i]
Modifié par keran (14 Mar 2011 - 22:45)
Bon ben c'est un bug puisque tout est correct. 