[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard

さまざまなHTMLのエレメントのホバー時にカード状のインフォメーションをアニメーションで表示するjQueryのプラグインを紹介します。

ただのツールチップとは違い、カードのインフォメーションに更にカードを表示したり、Facebook, Twitterと連携したり、コールバック関数も備えています。

サイトのキャプチャ

Hovercard

Hovercardの特徴

Hovercardは軽量のjQueryのプラグインで、リンクをはじめとするさまざまなHTMLエレメントにホバーするとそれに関連したインフォーメーションを表示することができます。

  • スムーズなアニメーションでインフォメーションを表示することができます。
  • 外部スタイルシートではなく、最小のCSSを使用します。
  • 表示されるHTMLはフルコントロールが可能です。
  • Twitter, Facebookとの連携が可能です。
  • コールバック関数をサポートしています。

Hovercardのデモ

デモではHovercardのさまざまな利用法が紹介されています。

デモのキャプチャ

デモページ:Basic

レッドのテキストをホバーすると、それに関連したインフォメーションをアニメーションで表示します。

デモのキャプチャ

デモページ:open on left

カードを表示するスペースが十分ではない場合は、表示位置を変更します。

デモのキャプチャ

デモページ:over a hovercard

表示したカードから、更にカードを表示します。

デモのキャプチャ

デモページ:with callback functions

コールバック関数にも対応しています。
用意されているのは、「onHoverIn」「onHoverOut」です。

デモのキャプチャ

デモページ:with ajax

カードに表示するコンテンツはAJAXにも対応しています。

デモのキャプチャ

デモページ:as In Place Editor

元のレッドのテキストを編集することも可能です。

デモのキャプチャ

デモページ:Built-in Facebook Card

Facebookと連動することが可能です。

デモのキャプチャ

デモページ:Built-in Twitter Card

Twitterとも連動することが可能です。

Hovercardの実装

デモのBasicを例に実装方法を紹介します。

HTML

レッドのテキスト(John Resig)をlabel要素で実装します。

<p>
jQuery by <label id="demo-basic">John Resig</label> is a cross-browser JS library designed to
simplify the client-side scripting of HTML. It was released in January of 2006 at BarCamp NYC. Used by 
over 46% of the 10,000 most visited websites, it's the most popular JavaScript library in use today.
</p>

外部ファイル

jquery.js」と当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.hovercard.js"></script>

JavaScript

カードに表示するインフォメーションやカードのデザインはスクリプトで記述します。

<script type="text/javascript">
$(document).ready(function () {
    var hoverHTMLDemoBasic = '<p>' +
                        'John Resig is an application developer at Khan Academy. He was a ' +
                        'JavaScript tool developer for the Mozilla Corporation. He is also the' +
                        'creator and lead developer of the jQuery JavaScript library.<p>';

    $("#demo-basic").hovercard({
        detailsHTML: hoverHTMLDemoBasic,
        width: 400,
        cardImgSrc: 'http://ejohn.org/files/short.sm.jpg'
    });
});
</script>

top of page

©2017 coliss