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

サイト構築 -JavaScript

Post on:2011年12月2日

Hovercardの特徴

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

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

Hovercardのデモ

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

デモページ：Basic

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

デモページ：open on left

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

デモページ：over a hovercard

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

デモページ：with callback functions

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

[ad#ad-2]

デモページ：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>