トップ  >  2011年  >  2011.01.15 [jQuery] 目次を自動生成
features
[jQuery] 目次を自動生成
2011.1.15記
今回はjQueryを使って、目次を自動生成してみたいと思います。

以下のサイトのプラグインを利用しました
http://d.hatena.ne.jp/cyokodog/20090531/jQueryExTOC01
そしてここのサイトの説明を参考にしました
http://www.j1nn.com/archives/51628455.html
ありがとうございます

↓サンプルはじまり

[jQuery] 目次を自動生成

サンプル

はじめに

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

第1章

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

第2章

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

承承

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

第3章

転転

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

転転転

TENTENTEN
てん

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

てんてん

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

てんてんてん

(内容)(内容)(内容)(内容)(内容)(内容)(内容)

第4章

(内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容)

結結

(内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容) (内容)(内容)(内容)(内容)(内容)(内容)(内容)

↑サンプルおわり

CSSとJavaScript部分のHTML
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
<script src="extoc_1_0.js"></script>
<script type="text/javascript">
jQuery(function($){
	var toc = $('h2').exTOC({
		headFrom : 3,
		headTo : 6,
		insertMethod : 'after',
		numberingHead : true,
		numberingFrom : 2,
		numberingTo : 4
	});
	toc.getTOC().before('<div id="TOC"><b>目次(↓この部分が自動で生成されます)</b></div>')    
	$('h3').append('<a href="#TOC" class="return_mokuji">▲目次へ</a>');
});
</script>
この場合、<h3>〜<h6>タグの部分が目次として自動生成され、<h4>〜<h6>の部分に目次にナンバリングが入ります。
どんどん変更が追加されるような「FAQ」などで利用する場合に便利そうです。
前
2011.02.15 液晶テレビ(32インチ以上)
カテゴリートップ
2011年

PAGE TOP 
メニュー
サイト内検索
ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
Copyright(C) 1999-2017 keibunsya all right reserved.