ホーム エントリーへ戻る

「AutoAnchors jQuery Plugin」動作確認用ページ

メモ

AutoAnchors jQuery Plugin

このページは日本語環境動作確認のためだけに設置したデモページです。詳細につきましては、リンク先の公開ページをご覧ください。 エントリーはこちら から。

Demo Usage Styling Compatibility Changelog

Demo

In this demo, a div with three headers (h3), each one of them followed by some lorem ipsum filltext, gets an automatic anchor navigation on those headers (check the source to see how the original content looks like):

H2タイトル

H2テキスト内容。JavaScript分かんねェーッ!

Test Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non congue metus. Nam auctor vehicula velit, ac luctus metus molestie quis. Nulla urna ligula, tincidunt sed posuere ut, viverra in augue. Curabitur et dolor orci, a volutpat mi. Praesent porta fringilla nulla at dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque libero. Aliquam luctus sodales nisi, et ultricies quam volutpat vitae. Nullam sit amet gravida mauris. In non arcu nec lectus tincidunt pulvinar. Nullam sed nisi felis. Suspendisse volutpat ultrices felis, vitae lobortis nisi porttitor non. Nunc congue, ante in porta aliquet, lorem enim porta dolor, vitae sollicitudin urna nisi sit amet nunc. Nam et lorem a mauris consectetur faucibus.

Another Test Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non congue metus. Nam auctor vehicula velit, ac luctus metus molestie quis. Nulla urna ligula, tincidunt sed posuere ut, viverra in augue. Curabitur et dolor orci, a volutpat mi. Praesent porta fringilla nulla at dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque libero. Aliquam luctus sodales nisi, et ultricies quam volutpat vitae. Nullam sit amet gravida mauris. In non arcu nec lectus tincidunt pulvinar. Nullam sed nisi felis. Suspendisse volutpat ultrices felis, vitae lobortis nisi porttitor non. Nunc congue, ante in porta aliquet, lorem enim porta dolor, vitae sollicitudin urna nisi sit amet nunc. Nam et lorem a mauris consectetur faucibus.

A last one

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non congue metus. Nam auctor vehicula velit, ac luctus metus molestie quis. Nulla urna ligula, tincidunt sed posuere ut, viverra in augue. Curabitur et dolor orci, a volutpat mi. Praesent porta fringilla nulla at dictum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel neque libero. Aliquam luctus sodales nisi, et ultricies quam volutpat vitae. Nullam sit amet gravida mauris. In non arcu nec lectus tincidunt pulvinar. Nullam sed nisi felis. Suspendisse volutpat ultrices felis, vitae lobortis nisi porttitor non. Nunc congue, ante in porta aliquet, lorem enim porta dolor, vitae sollicitudin urna nisi sit amet nunc. Nam et lorem a mauris consectetur faucibus.

Usage

This is how the above demo is created:

$(document).ready(function(){
  $("div.demo").autoAnchors( 
    {
      anchor: 'h3',
      title: '<h3>Content</h3>',
      numbering: true
    }
  );
});

You can use the plugin with default options like this:

$(document).ready(function(){
  $("div.demo").autoAnchors();
});

Default options are: anchor: 'h2', title: '', numbering: false

You can put more than one anchor navigation on the same page, just make sure that if you invoke them a second time with different options, that the link titles should be different or it can result in two anchors named the same.

Styling

Here's how the demo was styled:

div.autoanchors {
	float: right;
	background: #f2f2f2;
	border: 1px #ccc solid;
	padding: 8px;
	margin-left: 8px;
	margin-bottom: 8px;
}

div.autoanchors h3 {
	padding: 0px;
	margin: 2px;
	background: #39f;
	color: #fff;
	padding: 2px;
	padding-top: 4px;
	padding-left: 6px;
	padding-right: 6px;
	text-align: center;
}

div.autoanchors ul {
	margin: 0px;
	padding: 0px;
}

div.autoanchors li {
	list-style: none;
	padding: 0px;
	margin: 2px;
}

div.autoanchors li a {
	text-decoration: none;
	background: #e6e6e6;
	padding: 2px;
	padding-top: 4px;
	padding-left: 6px;
	padding-right: 10px;
	display: block;
	color: #333;
}

div.autoanchors li a:hover {
	background: #39f;
	color: #fff;
}

span.numbering {
	background: #aaa;
	color: #fff;
	padding: 2px;
	padding-bottom: 1px;
	padding-right: 5px;
	padding-left: 5px;
	margin-right: 8px;
}

As you can see, the navigation is an ul list inside a div with class "autoanchors" and the numbering is a span with the class "numbering".