Un navigateur automatique avec opendir et jquery

Une application simple, melant php et jquery, permettant avec un seul fichier de naviguer dans les pages html d’un dossier. Ce script fabrique un menu déroulant comprenant toutes les pages html trouvées dans le dossier où il est déposé avec php, et permet d’afficher le contenu de ces pages sans rechargement grâce à jquery.
Ce code a été produit pour un besoin personnel, il n’est pas dégradable.

Précédent | 11/14 | Suivant

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>