文中に脚注を手軽に加えられるjQueryプラグイン・Footnoted

スポンサーリンク

文中に脚注を加えるスクリプトのご紹介です。プラグインと呼べるかどうか分からないほどシンプルなものですが、手軽に加えられるので長文を扱う時の為に覚えておいて損は無いかも。

Wikipediaっぽいやつです。以下動作サンプルになります。

Footnoted


数字をクリックすると下部にスクロールします。元の場所に戻れるようにもなっています。

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="footnoted.min.js"></script>

本体とスクリプトを読み込みます。

脚注へのリンクは、リンクを起きたい場所に

<sup class="footnoted"></sup>

を置くだけ。

脚注は

<ol id="footnotes">
	<li>国際連合の統計による世界の都市部の人口</li>
        <li>プライスウォーターハウスクーパースによる都市のGDP</li>
        <li>2012 Global Cities Index and Emerging Cities Outlook (2012年4月公表)</li>
        <li>鈴木理生『東京の地名がわかる事典』日本実業出版社、2002年2月、P19。</li>
</ol>

といったようにリストを作るだけ。

手軽で良いですね。

Footnoted

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services