Voici le code php/html/javascript complet. Pour le faire fonctionner, il faut placer le fichier de la librairie jquery avec comme nom "jquery.js" dans un dossier "includes". Ceci pour clairement séparer dans le dossier les pages html des autres éléments. Le script php ne sélection que les pages html, mais tout de même, c’est plus propre.
Le dossier zippé reprend tout ça.
<!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>Presentation technique et technologie - Stéphane Noël</title>
<script type="text/javascript" src="include/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="include/styles.css"/>
<script type="text/javascript">
$(document).ready(function(){
// quand la page est entierement chargee
// on ajoute un script qui se déclenche lorsque l'on change la valeur du selecteur
$("#selecteur").change(function(){
var lien=$("#selecteur option:selected").attr("value");
pompe(lien);
});
// au démarrage de la page rien n'est charge,
// alors on sélectionne le premier element du menu deroulant
var lien=$("#selecteur option:first").attr("value");
pompe(lien);
});
function pompe(lien){
// requete ajax
$.ajax({
url: lien,
cache: false,
success: function(html){
// si c'est reussi, la page est dans la variable html
// recupere le titre avec la fonction split et une expression reguliere
var stitre = new RegExp('<title[^>]*>|</title>', 'gi');
var titre = html.split(stitre);
document.title = titre[1];
// recupere le contenu de body avec la fonction split et une expression reguliere
var regcorps=new RegExp('<body[^>]*>|</body>', 'gi');
var corps=html.split(regcorps);
$("#visualisateur").html(corps[1]);
// place le selecteur au bon endroit
$('#selecteur option:selected').selected=false;
$("#selecteur option[@value='" + lien + "']").attr("selected","selected");
}
});
}
function next() {
// prend dans le selecteur la valeur de l'option suivant
var lien=$("#selecteur option:selected").next().attr("value");
if(lien){
pompe(lien);
}
}
function prec() {
// prend dans le selecteur la valeur de l'option precedent
var lien=$("#selecteur option:selected").prev().attr("value");
if(lien){
pompe(lien);
}
}
</script>
</head>
<body>
<div id="headselection">
<?php
// read all html file in the current directory
if ($dh = opendir('./')) {
$files = array();
while (($file = readdir($dh)) !== false) {
if (substr($file, strlen($file) - 5) == '.html') {
array_push($files, $file);
}
}
closedir($dh);
}
// on trie les fichiers
sort($files);
// on affiche le menu
echo "<select name='selecteur' id='selecteur'>\n";
foreach ($files as $file) {
$title = Title($file);
// on liste un lien par option en filtrant le nom a afficher
echo "<option value=\"$file\">$title</option>\n";
}
echo "</select>\n";
// Function to get a human readable title from the filename
function Title($filename) {
$title = substr($filename, 0, strlen($filename) - 5);
$title = str_replace('-', ' ', $title);
$title = str_replace('_', ' ', $title);
$title = ucwords($title);
return $title;
}
?>
<a href="javascript:prec();">Précédent</a> - <a href="javascript:next();">Suivant</a>
</div>
<div id="visualisateur"></div>
</body>
</html>