jQuery プラグイン Tocify 動的ノード ディレクトリ メニュー ジェネレーター (ソース コード付き) download_jquery

Tocify は、記事ノードのディレクトリを動的に生成できる jQuery プラグインです。複数のノードを含む長い記事がある場合、Tocify を使用してノード要素に基づいて記事ディレクトリを動的に生成できます。もちろん、ページをスクロールすると、ディレクトリ構造が対応するノードまでスムーズにスクロールします。現在の監視に基づいてノードが現在のディレクトリ状態に切り替わります。

エフェクト表示 ソースコードダウンロード

Tocify は現在、Twitter Bootstrap と jQueryUI Themeroller の 2 つのテーマ スタイルをサポートしています。また、必要な要件は jQuery 1.7.2 と jQueryUI Themeroller です。最新のブラウザである IE7 で安全に使用できます。

CSS と Javascript ファイルの紹介

css ファイル

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

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> 

HTML 構造

DIV タグを作成し、このタグに ID またはクラスを追加します (例: toc

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

この div#toc にはデフォルトで空のコンテンツが含まれています。これは記事ディレクトリを動的に生成するために使用されます。記事ディレクトリは記事ノードをどのように動的に関連付けますか?また、次のような記事ノードについていくつかの計画を立てる必要があります。

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

上記の HTML 構造コードの場合、プロジェクトの視覚的なニーズに合わせて tocify の CSS ファイルを変更できます。

JavaScript

jQuery を使用して toc 要素を選択し、tocify() メソッドを通じて Tocify プラグインを呼び出します。

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

このようにして、Web ページを実行すると、動的な記事ディレクトリが生成されます。

オプション設定

Tocify は豊富なオプション設定を提供しており、プロジェクトの実際のニーズに応じてさまざまなオプション パラメーターを設定できます。以下は、主要なパラメータ オプションの概要です: