今日の人気記事

  1. マウスオーバーで画像を拡大(ズーム)「EasyZoom」
  2. ExcelのようにTableが編集できちゃう「Handsontable」
  3. 画像の拡大・縮小と移動(パン)「pan and zoom 」
  4. 画像スライドショー「Bare Bones Slider」豊富なオプションで簡単設定!
  5. 指定した数値から折れ線グラフを描画「SimpleChart」

脚注や参考サイトのリストを作成「referenceSection」 - jQueryプラグイン

スポンサーリンク

参考サイトや脚注を作成するプラグイン「Flow Chart」を紹介します。

referenceSection

このプラグイン使えば、文章中の脚注や参考サイトのリストを作成することができます。

学術論文やWikipediaの脚注のようなリストをサイト上で簡単に実装できるので、おもしろいですね。

デモをご覧ください。

「referenceSection」のデモ

スポンサーリンク

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="referenceSectionのデモでーす。">
<title>referenceSection - jQuery Plugin Demo</title>
<body>
<h1>referenceSectionのデモでーす。</h1>
<p>当サイトでは、便利な<a class="rs" href="https://webkaru.net/jquery-plugin/" data-info="便利なプラグインを紹介してるよ。">jQueryプラグイン</a>を紹介しています。</p>
<p>また、セレクターの使い方などのjQueryの基礎を解説した「<a class="rs" href="https://webkaru.net/jquery/" data-info="豊富なデモもあるよ。">jQuery入門</a>」もありますので、合わせてご覧ください。</p>
<p>作成したWebサービスを公開する場合は、「<a class="rs" href="https://webkaru.net/rental-server/" data-info="豊富なデモもあるよ。">レンタルサーバー比較</a>」を参考にしてください。</p>
  
</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.referencesection.min.js"></script>
<script>
$( document ).ready(function() {
  $("body").referenceSection();
});
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)