jQuery プラグイン Tocify 動的ノードはディレクトリ メニューを実装します

今回は、ディレクトリ メニューを実装するための jQuery プラグイン Tocify 動的ノードについて説明します。 jQuery プラグイン Tocify 動的ノードでディレクトリ メニューを実装するための 注意事項 は次のとおりです。一見。

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

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

Tocify は現在 Twitter Bootstrap

CSSと

ファイルを紹介しますcssファイル

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

<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>

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

<p id="toc"></p>

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

Javascript

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

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

オプション設定

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

この記事の事例を読んだ後は、その方法を習得したことになります。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

jQuery プラグインを使用してアップロードされるファイルのサイズと形式を制限する方法

XML ファイルを解析して js ファイルを動的に追加する jQuery を実装する方法

の詳細な説明jQuery による XML ファイルの読み取りと分析の手順

以上がjQuery プラグイン Tocify 動的ノードはディレクトリ メニューを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。