[JS]ページの全体像を分かりやすくビジュアル化するスクリプト -jQuery.fracs

ページ全体と現在表示しているエリアをビジュアル化するjQueryのプラグインを紹介します。

現在のエリアはハイライトされ、全体表示はページ内アンカーにも対応しています。

jQuery.fracs

[ad#ad-2]

jQuery.fracsのデモ

デモページではさらに詳細なデータが表示されるようになっています。

デモページ

ページをスクロールすると、それに応じて全体マップも変化します。

デモページ

全体マップは全体のサイズをはじめ、定義されたエリアごとの表示位置、表示範囲、占有率なども随時測定されています。

デモページ

jQuery.fracsの実装

分けるエレメントの定義

エレメントはjQueryのセレクタを利用して定義できます。

var fracs = $( selector ).fracs();

全体マップ

全体マップは空のcanvas要素を使用します。

<canvas id="outline" width="200" height="400"></canvas>

全体マップはJavaScriptで設定します。

$( "#outline" ).fracs( "outline", {
	crop: true,
	styles: [
		{
			selector: 'header,footer,section,article',
			fillStyle: 'rgb(230,230,230)'
		},
		{
			selector: 'h1',
			fillStyle: 'rgb(240,140,060)'
		}
	]
} );

callback機能

callback機能も実装されています。

function callback( fracs: FracsResult, previousFracs: FracsResult ) {
	...
	// context variable *this* will be the corresponding HTMLElement
	...
};

$( selector ).fracs( callback );

[ad#ad-2]