Tocify: 動的ノード ディレクトリ メニューgenerator_html/css_WEB-ITnose

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

デモのダウンロード ソース コードを表示します

Tocify は現在、Twitter Bootstrap と jQueryUI Themeroller の 2 つのテーマ スタイルをサポートしています。さらに、実際のプロジェクトに応じていずれかのスタイルを選択できます。 jQuery 1.7 以降および 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 構造

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

选项	说明	默认值
context	任意可用的jQuery选择器	"body"
selectors	文章节点，可以关联生成目录	"h1,h2,h3"
showAndHide	是否展示二级目录结构	true
showEffect	目录展示效果："none", "fadeIn", "show", or "slideDown"	"slideDown"
showEffectSpeed	目录展示速度："slow", "medium", "fast", 或数字(毫秒)	"medium"
hideEffect	目录隐藏效果："none", "fadeOut", "hide", "slideUp"	"none"
hideEffectSpeed	目录隐藏速度："slow", "medium", "fast", 或数字(毫秒)	"medium"
smoothScroll	当点击目录节点菜单时，是否平滑滚动到文章对应的节点内容	true
smoothScrollSpeed	平滑滚动速率，可以是数字(毫秒) or String: "slow", "medium", or "fast"	"medium"
scrollTo	当页面滚动时，页面顶端与目录之间的间隔	0
showAndHideOnScroll	当滚动页面时，是否显示和隐藏目录子菜单	true
theme	内容展示风格，可以是"bootstrap", "jqueryui", or "none"	"bootstrap"

Tocify は、オプション パラメータをそれぞれ設定および取得するための setOptions() および option() も提供します。 Tocify のコンテンツの詳細については、興味のある方は Tocify プロジェクトの公式 Web サイトを参照してください: http://gregfranko.com/jquery.tocify.js/