[JS]これは便利！ 閲覧ページの見出しを抽出するスクリプト -Flexible Nav

Post on:2011年8月5日

自分のページだけでなく、閲覧している他人のページでも見出しを抽出し、ページ内アンカーの機能も与えるjQueryのプラグインを紹介します。

サイトのキャプチャ

Flexible Nav jQuery library
デモページ

抽出した見出しの一覧は、右側に表示されています。

[ad#ad-2]

閲覧中のページで見出しを抽出する方法

まずは、閲覧中の他人のページで見出しを抽出する方法からご紹介。

Flexible Navはブックマークレット版があるので、それを利用します。

ブックマークレット
Flexible Bookmarklet

このブックマークレットをブックマーク（お気に入り）に登録して閲覧ページでクリックしてください。
※上記をクリックすると、このページで適用されます。

サイトのキャプチャ

当サイトでFlexible Navを実行したキャプチャ

Flexible Navを実行すると上記のように、右側に見出しの一覧が表示されます。
※各見出しが見出し要素（h1～3）で実装されている必要があります。

サイトのキャプチャ

見出しの拡大

見出しはページ内アンカーとして機能し、もちろん日本語でも表示されます。
各見出しは、赤はh1要素、紫はh2要素、緑はh3要素になっており、現在表示している箇所はハイライト表示されます。

自分のページの見出しを抽出する方法

自サイトに組み込む際は、見出し要素以外にも適用することができます。

適用要素

  • デフォルトの設定
    h1, h2, h3要素です。
  • title属性
    title属性のテキストと抽出します。
  • navtext属性
    オリジナルのnavtext属性を加え、そのテキストを抽出します。
  • 任意の要素
    指定した要素（例：nav）から抽出します。
  • 任意のclass
    指定したclassから抽出します。

外部ファイル

「jquery.js」と当スクリプト、スタイルシートを外部ファイルとして指定します。

<link rel="stylesheet" media="all" href="flexible-nav.min.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="flexible-nav.min.js"></script>

JavaScript

デフォルトの見出し要素を抽出する方法です。

$(function(){
	new FlexibleNav( new FlexibleNavMaker().make().prependTo('body') );
});

任意のclass（.navtitle）を指定する場合は、jQueryのセレクタで指定します。

var nav = new FlexibleNavMaker().make().prependTo('body');
new FlexibleNav(".navtitle");

[ad#ad-2]

sponsors

top of page

©2024 coliss