jQuery Inline Footnotes

JavaScript

ホバーで脚注を表示できる「jQuery Inline Footnotes」

jQuery Inline Footnotesはホバーすることで脚注のコンテンツをインラインで表示できるjQueryプラグインです。設定した特定のポイントにホバーすることで、わざわざページ下部などにある脚注までスクロールしなくてもその場所で脚注のコンテンツを確認できるのでとても便利ですね。

jQuery Inline Footnotes

デモ

デモでは脚注の1または2と書かれている数字にホバーすると、ページ下部にある脚注がホバーしたその場所に表示されます。アニメーションなどは特になく、脚注を確認したい時にパッと表示してくれるのでとても便利ですね。

長文記事などで、脚注を見るためにわざわざページ下部などまで行かなくてもいいので集中力を切らすことなく記事を読み進めていけそうです。

使い方もかなりシンプルで、手軽に実装できるのもグッドです。また、jQuery Inline Footnotesにはオプションもいくつか用意されています。主なオプションは、boxMargin、hideDelay、hideFromContent、maximumBoxWidth、boxIdです。各オプション項目のデフォルト値は、boxMarginが20、hideDelayが200、hideFromContentが”[rev=footnote]”、maximumBoxWidthが500、boxIdが”footnote_box”になります。

サポートブラウザは、IE 6.0+、Firefox 2.0+、Safari 3.0+、Opera 9.0+、Chromeとのこと。

jQuery Inline Footnotes

関連記事

  1. Lightense Images
  2. Motion Blur Effect with SVG

    JavaScript

    ブラーエフェクトを効果的に取り入れる「Motion Blur Effect with SVG」

    Webページ内でブラーエフェクトを効果的に取り入れることができる「Mo…

  3. Data Img

    JavaScript

    ブラウザ幅に応じて画像を切り替えれるレスポンシブ対応のjQueryプラグイン「Data Img」

    Data Imgはブラウザ幅に応じて最適なサイズの画像を切り替えて表示…

  4. no-image

    JavaScript

    SVGによるドーナッツ状(円形)のチャートを実装できる「donutty」

    donuttyはSVGによるドーナッツ状(円形)のチャートを実装できる…

  5. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  6. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP