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

evol-colorpickerマイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」前のページ

水平・垂直に対応したVanilla JSによるタイムライン実装「Timeline」次のページTimeline

関連記事

  1. Animocons

    JavaScript

    アイコンに素敵なアニメーションを実装できる「Animocons」

    Animoconsはアイコンにさまざまなアニメーションを加えることがで…

  2. JavaScript

    画像の一部をカッコよく拡大したりできるjQueryプラグイン「Loupe」

    こうゆうプラグインは初めて使ってみたんですが、とても面白いですね。Lo…

  3. Slinky

    JavaScript

    モバイルライクなナビゲーションメニューを実装できる「Slinky」

    Slinkyは軽量でレスポンシブに対応したモバイルライクなナビゲーショ…

  4. Touch-Tabs-jQuery

    JavaScript

    イベントやカスタマイズが可能な拡張性の高いタブシステム「Touch-Tabs-jQuery」

    Touch-Tabs-jQueryは、イベント設定やカスタマイズが可能…

  5. jquery.adaptive-backgrounds.js
  6. ClassyCountdown

    JavaScript

    スタイリッシュな円形カウントダウンのjQueryプラグイン「ClassyCountdown」

    ClassyCountdownはシンプルでスタイリッシュな円形カウント…

最近の記事

  1. シービージャパン 耐熱ボウル
  2. メンソレータム リップスティック
  3. スイデンテラス 濃厚バターチキン
  4. ドトール マンデリン

アーカイブ

PAGE TOP