Plug-in jQuery Générateur de menu de répertoire de nœuds dynamiques Tocify avec code source download_jquery

Tocify est un plug-in jQuery qui peut générer dynamiquement un répertoire de nœuds d'articles. Si nous avons un long article avec plusieurs nœuds, alors Tocify peut être utilisé pour générer dynamiquement un répertoire d'articles basé sur les éléments du nœud. En cliquant sur le répertoire, vous pouvez faire défiler en douceur jusqu'au nœud correspondant. Bien sûr, lors du défilement de la page, la structure du répertoire. être basé sur la surveillance actuelle. Le nœud passe à l'état actuel du répertoire.

Affichage de l'effet Téléchargement du code source

Tocify prend actuellement en charge deux styles de thème : Twitter Bootstrap et jQueryUI Themeroller. Nous pouvons choisir l'un des styles en fonction du projet réel. De plus, les exigences nécessaires sont jQuery 1.7.2 et jQueryUI Widget Factory 1.8.21. Utilisation sûre sur IE7, un navigateur moderne.

Introduire les fichiers CSS et Javascript

fichier css

<link type="text/css" rel="stylesheet" href="jquery.tocify.css" /> 
<link type="text/css" rel="stylesheet" href="bootstrap.css" /> 

Fichier JavaScript

<script src="jquery-1.7.2.min.js"></script> 
<script src="jquery-ui-1.9.1.custom.min.js"></script> 
<script src="jquery.tocify.min.js""></script> 

Structure HTML

Créez une balise DIV, puis ajoutez un ID ou une classe à cette balise, par exemple : toc

<div id="toc"></div>

Ce div#toc a un contenu vide par défaut. Il est utilisé pour générer dynamiquement un répertoire d'articles. Comment le répertoire d'articles associe-t-il dynamiquement les nœuds d'articles ? Nous devons également faire quelques plans pour les nœuds d'articles, tels que :

<div class="wrap"> 
<h1>Tocify</h1> 
<br /> 
<section> 
<h2>节点1</h2> 
<p>内容</p> 
</section> 
<br /> 
<section> 
<h2>节点2</h2> 
<p>内容</p> 
</section> 
... 
</div>

Pour le code de structure HTML ci-dessus, vous pouvez modifier le fichier CSS de tocify pour répondre aux besoins visuels de votre projet.

Javascript

Utilisez jQuery pour sélectionner notre élément toc, puis appelez le plug-in Tocify via la méthode tocify().

$(function() { 
$("#toc").tocify(); 
});

De cette façon, exécutez la page Web et un répertoire d'articles dynamique sera généré.

Paramètres des options

Tocify fournit une multitude de paramètres d'options et nous pouvons définir différents paramètres d'options en fonction des besoins réels du projet. Ce qui suit est une introduction aux principales options de paramètres :