1

私はjQuery UIが初めてです。

選択可能なjQuery UI ツールチップを作成しようとしています。ツールチップは、ページ上のリンクに関連付けられています。

リンクがテキストだけで囲まれている場合は、正常に機能します。しかし、隣り合うリンクがほとんどない場合、機能が重複し、ツールチップがスムーズに表示されなくなります。

コードはhttp://jsfiddle.net/zumot/Hc3FK/2/にあります。

JavaScript コードの下

$("[title][data-scan]").bind("mouseleave", function (event) {
event.stopImmediatePropagation();
var fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
$(".ui-tooltip").click(function () {
    alert("I am clickable");
    return false;
});
$(".ui-tooltip").hover(
function () {
    clearTimeout(fixed);
},
function () {
    $("[title][data-scan]").tooltip("close");
});}).tooltip({
items: "img, [data-scan], [title]",
content: function () {
    var element = $(this);
    if (element.is("[data-scan]")) {
        var text = element.attr("href");
        return "<a href='http://www.google.com'>You are trying to open a tooltip  <span>" + text + "</span></a>";
    }
    if (element.is("[title]")) {
        return element.attr("title");
    }
    if (element.is("img")) {
        return element.attr("alt");
    }
},
position: {
    my: "right center",
    at: "left center",
    delay: 200,
    using: function (position, feedback) {
        $(this).css(position);
        $("<div>")
        .addClass(feedback.vertical)
            .addClass(feedback.horizontal)
            .appendTo(this);
    }
}});
4

1 に答える 1

1

問題を解決するための私の試みは、変数をfixedグローバルにし (他の jQuery UI プロパティからアクセスできるようにするため)、Openイベント時に、以前に開いた他のツールチップを非表示にし、fixed変数に保存されているタイムアウト ID をクリアすることでした。

http://jsfiddle.net/zumot/dVGWB/で解決策を見つけることができますが 、コードが正しく機能していることを確認するには、ブラウザーで直接実行する必要があります。

これが固定コードのスナップショットです。

    // Make the timeout id variable global
    var fixed = 0;

$("[title][data-scan]").tooltip({
    items: "img, [data-scan], [title]",
    content: function () {
        var element = $(this);
        if (element.is("[data-scan]")) {
            var text = element.attr("href");
            return "<a href='http://www.google.com'>You are trying to open a tooltip  <span>" + text + "</span></a>";
        }
        if (element.is("[title]")) {
            return element.attr("title");
        }
        if (element.is("img")) {
            return element.attr("alt");
        }
    },
    open: function (event, ui) {
        // When opening a new div, hide any previously opened tooltips first.
        $(".ui-tooltip:not([id=" + ui.tooltip[0].id + "])").hide();
        // clear timeout as well if there's any.
        if (tf > 0) {
            clearTimeout(tf)
        };
    },
    position: {
        my: "right center",
        at: "left center",
        delay: 200,
        using: function (position, feedback) {
            $(this).css(position);
            $("<div>")
                .addClass(feedback.vertical)
                .addClass(feedback.horizontal)
                .appendTo(this);
        }
    }
}).bind("mouseleave", function (event) {
    // stop defeulat behaviour
    event.stopImmediatePropagation();
    fixed = setTimeout('$("[title][data-scan]").tooltip("close")', 100);
    $(".ui-tooltip").hover(

    function () {
        clearTimeout(tf);
    }, function () {
        $("[title][data-scan]").tooltip("close");
    })
});
于 2013-03-19T11:32:08.680 に答える