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

オプション	説明	デフォルト値
コンテキスト	利用可能な jQuery セレクター	「本体」
セレクター	記事ノードを関連付けてディレクトリを生成できます	"h1,h2,h3"
表示と非表示	二次ディレクトリ構造を表示するかどうか	本当
showEffect	ディレクトリ表示効果: "none"、"fadeIn"、"show"、または "slideDown"	「スライドダウン」
showEffectSpeed	ディレクトリの表示速度: "遅い"、"中"、"速い"、または数値 (ミリ秒)	「中」
非表示効果	ディレクトリの非表示効果: 「なし」、「フェードアウト」、「非表示」、「スライドアップ」	「なし」
hideEffectSpeed	ディレクトリの非表示速度: "遅い"、"中"、"速い"、または数値 (ミリ秒)	「中」
スムーズスクロール	ディレクトリノードメニューをクリックしたときに、記事に対応するノードコンテンツまでスムーズにスクロールするかどうか	本当
スムーズスクロール速度	スムーズなスクロール速度。数値 (ミリ秒) または文字列で指定できます: "slow"、"medium"、または "fast"	「中」
スクロールして	ページがスクロールするとき、ページの先頭と目次の間の隙間	0
showAndHideOnScroll	ページをスクロールするときにディレクトリのサブメニューを表示または非表示にするかどうか	本当
テーマ	コンテンツの表示スタイルは、「bootstrap」、「jqueryui」、または「none」のいずれかです	「ブートストラップ」