QA@IT

JQueryプラグインのbaloonを使いマウスオーバー時に取得したIDを基に、動的にHTMLコンテンツを吹き出し表示したいです。

7459 PV

リンクをマウスオーバーしたとき、リンクのhrefの値を取得して吹き出ししたいHTMLのidを割り出します。そしてhtml()メ
ソッドでasideタグ以下の要素を取得し、それをtooltip用プラグインであるballoonのcontents属性にセットして動的に表示
するHTMLを変えたいと思っています。(アイデア1)では一時変数contentにmouseoverイベント時に取得したhtmlを格
納し、それをbaloonで表示したいと思いました。しかしこのメソッドチェーンでは動いてくれません。(アイデア2)では
balloon実行時に無名関数を利用しquotelinkクラスからhrefを取得したいと思ったのですが、$(this)ではquotlinkクラスオ
ブジェクトが取得できません。

みなさんのお知恵をお貸しください。よろしくお願いします。

■画面に吹き出し表示したい箇所のHTML

<aside id="q56" style="padding-top: 40px; margin-top: -40px;">
<div id="reply" >
<div>
<span class="filecaption">1390245737775.jpg (75KB, 661x720)</span>
<a id="reply_image" href="/uploads/fullsize/1390245737775.jpg" target="_blank">
<img src="/uploads/thumbs/1390245737775.jpg" alt=""></a>
<blockquote class="postMessage">
たたたたああああああああああああああ<br>
</blockquote>
</div>
</div>
</aside>

■マウスオーバーする箇所
<a href="/threads/international/22#q56" id="c56" class="quotelink">56</a>

■javascript:
(アイデア1)
var content;
$('.quotelink')
.on("mouseover", function () {
var link = $(this).attr("href");
var num = String(link).split("#");alert('num = ' + num);
content = $("aside#" + num[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
}).balloon({
showDuration: 0,
hideDuration: 0,
minLifetime: 0,
tipSize: 0,
offsetY: 50,
contents: content,
css: {
opacity: "1.0"
}
})
});

(アイデア2)
var content;
$('.quotelink').balloon({
showDuration: 0,
hideDuration: 0,
minLifetime: 0,
tipSize: 0,
offsetY: 50,
contents: function() {
var link = $(this).attr("href");
var num = String(link).split("#");alert('num = ' + num);
content = $("aside#" + num[1]).html();
content = content.replace(/\r\n/g, "");//IE
content = content.replace(/\n/g, "");//Firefox
alert('content = ' + content);
return content;
},
css: {
opacity: "1.0"
}
})
});

回答

.balloon() だと balloon の側でイベントがハンドリングされるので、自前でハンドリングするなら showBalloon/hideBalloon を使うと良いと思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="jquery.balloon.js"></script>
<script>
$(function(){
    $('.quotelink')
        .on("mouseover", function () {
            var link = $(this).attr("href");
            var num = String(link).split("#");
            var content = $("aside#" + num[1]).html();
            content = content.replace(/\r\n/g, ""); // IE
            content = content.replace(/\n/g, ""); // Firefox

            $(this).showBalloon({
                showDuration: 0,
                hideDuration: 0,
                minLifetime: 0,
                tipSize: 0,
                offsetY: 50,
                contents: content,
                css: {
                    opacity: "1.0"
                }
            });
        })
        .on("mouseout", function () {
            $(this).hideBalloon();
        })
    ;
});
</script>
</head>
<body style="margin: 100px 0 0 200px">
    <aside id="q56" style="padding-top: 40px; margin-top: -40px;">
        <div id="reply">
            <div>
                <span class="filecaption">1390245737775.jpg (75KB, 661x720)</span>
                <a id="reply_image" href="/uploads/fullsize/1390245737775.jpg" target="_blank">
                    <img src="/uploads/thumbs/1390245737775.jpg" alt="1390245737775.jpg">
                </a>
                <blockquote class="postMessage">????????????????????????????????????<br></blockquote>
            </div>
        </div>
    </aside>
    <aside id="q57" style="padding-top: 40px; margin-top: -40px;">
        dummy dummy dummy dummy dummy dummy dummy
    </aside>
    <hr>
    <a href="/threads/international/22#q56" id="c56" class="quotelink">56</a>
    <a href="/threads/international/22#q57" id="c57" class="quotelink">57</a>
</body>
</html>
編集 履歴 (0)
  • ご回答ありがとうございました。無事実装することができました。
    そこでもう一つお聞きしてもよろしいでしょうか? 表示されたツールチップが画面の左右からはみ出ることがあるのですが、画面内にきちんと表示をおさめるにはどうしたらいいのでしょうか? 理想は動的に幅を調整してくれて、はみ出た分のテキストなどは改行して表示されるのが理想なのですが・・・ もしよろしければお力をお貸し願えませんでしょうか?
    -
  • demo とかを見た感じそういう機能は無いと思います。
    もしくは showAnimation で表示時に要素を弄れるようなのでそれでどうにかするか。
    -
  • 別の質問を立てたほうが回答は付きやすいと思いますよ -
  • はい ありがとうございます。質問を新たにたててお聞きしてみようと思います。 -

もしくは .quotelink のすべての要素で別々に .balloon() を適用し、$(this) の代わりに一段上のスコープで束縛された self = $(this) を使います。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="jquery.balloon.js"></script>
<script>
$(function(){
    $('.quotelink').each(function () {
        var self = $(this);
        self.balloon({
            showDuration: 0,
            hideDuration: 0,
            minLifetime: 0,
            tipSize: 0,
            offsetY: 50,
            contents: function() {
                var link = self.attr("href");
                var num = String(link).split("#");
                var content = $("aside#" + num[1]).html();
                content = content.replace(/\r\n/g, ""); // IE
                content = content.replace(/\n/g, ""); // Firefox
                return content;
            },
            css: {
                opacity: "1.0"
            }
        })
    });
});
</script>
</head>
...略...
編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。