jQuery プラグイン Tocify 動的ノードはディレクトリメニューを実装します-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-04-23 11:46:07

オリジナル

2234 人が閲覧しました

今回は、ディレクトリメニューを実装するための 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	二次ディレクトリ構造を表示するかどうか	true
showEffect	ディレクトリ表示効果: "none"、"fadeIn"、"show"、または "slideDown"	「スライドダウン」
showEffectSpeed	ディレクトリの表示速度: "slow"、"medium"、"fast"、または数値 (ミリ秒)	"medium"
hideEffect	ディレクトリの非表示効果: "none"、"fadeOut"、 "非表示"、"スライドアップ"	"なし"
hideEffectSpeed	ディレクトリの非表示速度: "低速"、"中"、"高速"、または数値 (ミリ秒)	"中"
smoothScroll	ディレクトリノードメニューをクリックしたときに、記事に対応するノードコンテンツまでスムーズにスクロールするかどうか	true
smoothScrollSpeed	スムーズスクロール速度 (数値 (ミリ秒) または文字列): "遅い"、"中"、または "速い"	"中"
scrollTo	ページがスクロールするとき、ページの上部と目次の間のギャップ	0
showAndHideOnScroll	ページをスクロールするときに、ディレクトリのサブメニューを表示または非表示にするかどうか	true
テーマ	コンテンツの表示スタイル。「bootstrap」、「jqueryui」、または「none」にすることができます	「bootstrap」