javascriptとmicrodata（調査中）その4
前回まででmicrodataのitemtypeとitempropとその中身（itemvalue)を得ることが出来た。
今回はその目的のmicrodataが埋め込まれていた場合に，ポップアップでその中身を表示できるようにすることが目的だ。
まずどのポップアップを使うか。そしてどう認識させるか。
ポップアップも色々なものがあるので，軽量で拡張しやすいものを探すべし。
良さげな例を見つけた。
[jQuery] ヘルプメッセージをポップアップして表示する方法
コードをそのまま引用させて頂きます。（今回はjQuery ver.を使用します。）
(function($) { $.fn.popupHelp=function(config) { /** * marginTop: 表示対象とウィンドウの高さの差分です。 * 0を指定すると、上端が揃います。 * marginLeft: 表示対象とウィンドウの横の差分です。 * 0を指定すると、左端が揃います。 * className: ウィンドウに設定するクラス名です。 * speed: ウィンドウを表示する際の秒数[ms]です。 */ var defaults = { marginTop: 0, marginLeft: 20, className: "popup_help_window", speed: 300 } var options = $.extend(defaults, config); // ヘルプウィンドウのオブジェクトを準備します。 var popupObj = $("<p/>").addClass(defaults.className).appendTo($("body")); // popupObj.appendTo($("body")); return this.each(function() { $(this).mouseover(function() { // 表示対象にマウスが重なった時の処理です。 // ウィンドウにメッセージを設定します。 popupObj.text($(this).attr('data-message')); // ウィンドウのオフセットを計算します。 var offsetTop = $(this).offset().top + defaults.marginTop; var offsetLeft = $(this).offset().left + defaults.marginLeft; // ウィンドウの位置を整え、表示します。 popupObj.css({ "top": offsetTop, "left": offsetLeft }).show(defaults.speed); }).mouseout(function() { // 表示対象にマウスが重なった時の処理です。 // テキストを空にして、ウィンドウを隠します。 popupObj.text("").hide("fast"); }); }); }; })(jQuery);
そしてcssは指定したclassとポップアップwindowについて記述。
.popup_help { padding: 0 3px; color: #66f; font-weight: bold; cursor: pointer; } .popup_help_window { max-width: 300px; position: absolute; padding: 6px 15px; background-color: #fff; border: 5px double #ccc; display: none; color: #63f; font-size: 15px; font-weight: bold; line-height: 1.5em; border-radius: 10px; box-shadow: 5px 5px 5px #ccc; }
そしてhtmlでは上部に先ほどのcssとjavascriptを挿入して $("span.popup_help").でどのタグとclassを使うかを指定，ついでにwindowの位置等を({"marginTop": 20, "marginLeft": 40});で設定して
（以下部分的に抜粋＆一部こちらの環境に変更）body中に，span class="popup_help"を書くとこんな感じ。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title></title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="popup_help.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.popup_help.js"></script> <script> $(function() { // ?マークにマウスを載せるとヘルプメッセージを表示させるようにします。 $("span.popup_help").popupHelp({"marginTop": 20, "marginLeft": 40}); }); </script> </head> <body> <header> <h1 id="header_title">ヘルプメッセージをポップアップして表示するサンプル<br />（プラグイン化）</h1> </header> <div itemscope itemtype="http://schema.org/ScholarlyArticle"> <p> Kanehisa M, et al. Nucleic Acids Res. 40, D109-D114 (2012).</p> [<span class="popup_help" itemprop='entryID' content='pmid:22080510'/ data-message="This is an article"> <a href="http://www.ncbi.nlm.nih.gov/pubmed/22080510">pubmed</a></span>] </div> </body> </html>
タグも"a"に限らないし，良いのではないだろうか。
（ちなみにjQueryプラグインバージョンもあり，ダウンロードも解説ページから出来て至れり尽くせり）
ちなみに実装例は以下の画像のとおりである。マウスでホバーするとにょにょにょーと表示してくれるのだ。
そしてここでは spanというタグとclass="popup_help"を認識しているが，これをmicrodataにしてしまいたいのだけど，んーどういった方法がいいだろうか（続く）
