このページは日本語環境動作確認のためだけに設置したデモページです。詳細につきましては、リンク先の公開ページをご覧ください。 エントリーはこちら から。
Demo Usage Styling Compatibility Changelog
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テキスト内容。JavaScript分かんねェーッ!
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.
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.
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.
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.
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".