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

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

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

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

Tocify は現在 Twitter Bootstrap

と jQueryUI Themeroller の 2 つのスタイルをサポートしています。また、必要な条件は jQuery 1.7 です。 .2以降およびjQueryUI Widget Factory 1.8.21以降。最新ブラウザである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構造

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

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

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

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

プロジェクトの視覚的なニーズを満たすために、上記の HTML 構造コードを cify の CSS ファイルに変更できます。

Javascript

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

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

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

オプション設定

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

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

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

推奨読書:

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

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

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

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