This page has been robot translated, sorry for typos if any. Original content here.



  • [1] Générateur de carte de site automatique
  • [2] Arborescence de dossiers basée sur une liste statique


  • Générateur de carte de site automatique



    Générateur de carte de site automatique



    Générateur de carte de site automatique [ Générateur de carte de site automatique ] [ Générateur de carte de site automatique ] [ Générateur de carte de site automatique ]

    Il arrive souvent que le développement de votre site se fasse lentement, il devient assez difficile pour un webmaster de "suivre" toutes les pages de son site. En conséquence, l'utilisateur qui s'est connecté au site peut rechercher longtemps l'information dont il a besoin ou ne pas la trouver du tout (bien que, en fait, il soit présent sur le site).


    Pour éviter ces "incidents", en règle générale, sur les sites de plusieurs dizaines de pages, l'utilisation de la carte du site est une pratique - une page spéciale du site sur laquelle toutes les pages du site sont présentées (généralement sous la forme d'un arbre hiérarchique). Mais, si le site contient plus d'une centaine de pages, alors maintenez manuellement "en état de marche" La carte du site est plutôt gênante.


    Script gratuit "Générateur de plan du site" est conçu pour créer automatiquement une page "Plan du site" sur le site, sur laquelle, sous la forme d'un arbre structuré, des pages html sont affichées sur le site.


    ATTENTION! Ne pas confondre avec SiteMap, qui est conçu pour que les moteurs de recherche indexent le site!


    Téléchargez et décompressez l'archive sur votre ordinateur.


    Entrez vos paramètres dans le fichier makesitemap.php :

    • $ workDir - spécifie le chemin d'accès au disque pour les fichiers du site (par défaut, le site entier est indexé).
    • $ exceptionFileList - noms des fichiers qui ne seront pas indexés et inclus dans l'arborescence du site.
    • $ exceptionDirList - noms des dossiers qui ne seront pas indexés et inclus dans l'arborescence du site.
    • $ outFile - le nom du fichier et le chemin vers lequel le résultat de la génération de la carte du site sera enregistré.
    • $ headerFile - le nom du fichier et son chemin, dont le contenu sera ajouté au fichier résultant devant l'arbre.
    • $ footerFile - le nom du fichier et son chemin d'accès, dont le contenu sera ajouté au fichier résultant après l'arborescence.


    En fait, il suffit d'ajouter $ dossiers et fichiers exceptionFileList, $ exceptionDirList , qui ne doivent pas être inclus dans le fichier map final.


    Copiez les fichiers dtree.css, dtree.js et le répertoire img_sm dans le répertoire où se trouvera le fichier sitemap.html résultant.


    Copiez le fichier makesitemap.php à n'importe quel endroit.


    Afin de ne pas être confus, je recommande de télécharger tous les fichiers et le répertoire img_sm à la racine du site.


    Veillez à définir les autorisations sur le fichier sitemap.html sur CHMOD 777 .


    Initialement, le fichier sitemap.html est vide, mais après l'exécution du script, il est rempli avec le contenu de $ headerFile, $ footerFile et l'arborescence elle-même.


    Pour générer un sitemap, exécutez le fichier script makesitemap.php (pour cela, tapez le chemin d'accès à ce fichier dans la ligne du navigateur, par exemple: http: //mysite/makesitemap.php ).


    Le fichier sitemap résultant sera situé dans le fichier sitemap.html .


    Les restrictions suivantes s'appliquent:

    • Seules les pages html statiques sont indexées.
    • ATTENTION! Pour indexer un dossier, il doit contenir le fichier index.html.


    Cela semble tout. Utilisez-le! :)






    Arborescence de dossiers basée sur la liste statique

    C'est une arborescence de dossiers basée sur une liste. Ce que vous devez faire est de créer une liste <UL> <LI> . Le script va ensuite créer l'arbre basé sur cette liste. Le script utilise des cookies. Il inclut également des fonctions pour développer / réduire tout. Vous pouvez ajouter et supprimer des nœuds dynamiquement.

    Dossier basé sur une liste statique Dossier basé sur une liste statique ] [ Dossier basé sur une liste statique ] [ Dossier basé sur une liste statique ]

    Configuration:

    Construire un arbre

    Le menu est basé sur HTML. <UL> <LI> liste Vous créez l'arbre en construisant un imbriqué.
    Exemple:

    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a></li>
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    </ul>
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a></li>
    <li><a href="#">Main item</a>
    <ul>
    <li><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    <li><a href="#">Main item</a>
    <ul>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Sub menu item</a></li>
    <li><a href="#">Sub menu item</a></li>
    </ul>
    </li>
    </ul>
    Il est important que vous donniez un identifiant à vos arbres. Dans le code ci-dessus, vous verrez que je lui ai donné l'identifiant
    dhtmlgoodies_tree Vous devez être affecté à la classe CSS
    dhtmlgoodies_tree Exemple:
    <ul id="dhtmlgoodies_tree" class="dhtmlgoodies_tree">

    Configuration Javascript

    Vous devez créer une référence à votre arborescence (s) en utilisant Javascript. Ceci est fait en créant un tableau de l'ID (s) de vos arbres. Exemple:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; Dans la démo, j'ai deux arbres de dossiers. L'identifiant du premier est
    dhtmlgoodies_tree alors que mon deuxième arbre a l'ID
    dhtmlgoodies_tree2 Vous trouverez l'ID dans la balise <UL> principale. Exemple:
    <ul id="dhtmlgoodies_tree"> Vous trouverez ce code de tableau en haut de la section <SCRIPT type = "text / javascript">.

    Icônes

    L'arborescence utilisera l'icône définie dans la variable Javascript folderImage par défaut. Cependant, vous pouvez le remplacer en déclarant une classe dans votre <LI>. exemple:
    <li class="dhtmlgoodies_sheet.gif"> Ici, l'image "dhtmlgoodies_sheet.gif" sera utilisée à la place de l'icône par défaut.

    Variables et fonctions Javascript

    Vous avez ces variables disponibles en haut de votre section <SCRIPT>:
    var idOfFolderTrees = ['dhtmlgoodies_tree','dhtmlgoodies_tree2']; var imageFolder = 'images/'; // Path to images
    var folderImage = 'dhtmlgoodies_folder.gif'; // Default folder image
    var plusImage = 'dhtmlgoodies_plus.gif'; // [+] icon
    var minusImage = 'dhtmlgoodies_minus.gif'; // [-] icon
    var useAjaxToLoadNodesDynamically = true;
    var ajaxRequestFile = 'writeNodes.php';
  • idOfFolderTrees = Un tableau des arbres sur votre page
  • imageFolder = Chemin d'accès au dossier de votre image
  • folderImage = Nom du fichier image du dossier
  • plusImage = Nom du fichier - plus l'icône
  • minusImage = Nom du fichier - icône moins
  • useAjaxToLoadNodesDynamically = Utiliser AJAX pour charger les sous-nœuds dynamiquement?
  • ajaxRequestFile = Nom du fichier côté serveur, c'est-à-dire que le fichier Ajax envoie des requêtes à
  • Vous pouvez appeler pour développer ou réduire tout. La fonction "expandAll ()" développe tous les nœuds, tandis que la fonction "collapseAll ()" réduit tous les nœuds. Envoyez l'ID de l'arborescence que vous souhaitez réduire ou développer en tant qu'argument de ces fonctions. Exemples:
    expandAll('dhtmlgoodies_tree');
    collapseAll('dhtmlgoodies_tree2');

    Si vous utilisez AJAX

    Si vous utilisez Ajax pour obtenir des nœuds dynamiquement à partir du serveur, vous pouvez suivre cette recette:
    Insérez les noeuds dans votre arbre comme ceci:
    <li><a href="#">Europe</a>
    <ul>
    <li parentId="1"><a href="#">Loading...</a></li>
    </ul>
    </li>
    <li><a href="#">Europe</a>
    <ul>
    <li parentId="1"><a href="#">Loading...</a></li>
    </ul>
    </li>
    Notez que j'ai créé un <LI> avec un paramètre "parentId". La valeur de ce paramètre est envoyée au fichier sur votre serveur (writeNodes.php). Le fichier sur le serveur sortira alors les noeuds où l'ID parent est égal à 1. Cela sera renvoyé au script, et le script remplacera le "chargement .." <LI> par le nouveau contenu du serveur.

    Le fichier "writeNodes.php" produit uniquement du HTML brut. Exemple:

    <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Bergen</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Stavanger</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Trondheim</a></li>
    <li class="dhtmlgoodies_sheet.gif"><a href="#">Oslo</a></li>
    Regardez dans le fichier writeNodes.php pour plus d'informations. Je n'utilise pas de base de données dans cette démo. Si vous utilisez une base de données, le fichier writeNodes.php peut généralement ressembler à ceci:

    <?php
    if(isset($_GET['parentId'])){

    $res = mysql_query("select * from category where parentId='".$_GET['parentId']."'");
    while($inf = mysql_fetch_array($res)){
    echo "<li><a href=\"#\">".$inf["categoryName"]."</a>";

    $resSub = mysql_query("select ID from category where parentId='".$inf["ID"]."'");
    if($infSub = mysql_fetch_array($resSub)){
    echo "<ul><li parentId=\"".$inf["ID"]."\"><a href=\"#\">Loading...</a></li></ul>";
    }

    echo "</li>";

    }
    ?>

    Cookies

    Les cookies sont utilisés pour se souvenir de l'état des nœuds. Cela signifie que lorsque vous revisitez la page, le script va se développer.

    Ajouter / Supprimer des nœuds dynamiquement

    De nouveaux nœuds peuvent être ajoutés et supprimés dynamiquement à partir d'un menu contextuel. Vous pouvez désactiver cette fonctionnalité en définissant la variable JS contextMenuActive sur false en haut de folder-tree-static.js.

    Lorsqu'un nouveau noeud est ajouté, une fonction appelée saveNewNode () est appelée. Vous trouverez cette fonction dans le dossier-tree-static.js. Vous devez activer la partie ajax de cette fonction. Vous devez également ajouter un support sur votre serveur. Lorsqu'un noeud est créé, une requête est envoyée au fichier spécifié dans la variable ajaxRequestFile. Les variables envoyées à ce fichier sont:

  • newNode = Titre du nouveau noeud
  • parentID = ID du noeud parent
  • Tout ce que vous avez à faire est d'avoir une requête d'insertion qui insère ce nouveau noeud dans votre base de données.

    La même chose s'applique également à ce qui se passe lorsque vous supprimez un nœud. Vous devez activer la partie ajax de la fonction deleteNodeOnServer. Cela va envoyer une requête au serveur où le noeud à supprimer est défini dans la variable deleteNodeId

    Mettre à jour

    11 juin 2006 - Ajout du support pour l'ajout et la suppression dynamiques