1

誰かがこれを行う方法を知っているかどうか私はただ興味があります。基本的に私は大きなテーブルを持っており、各tdにはより多くの情報を提供する埋め込みテーブルを備えたqtipがあります。ユーザーが表示している特定のセルであることがわかるように、tdの背景色をqtipに一致するように変更したいと思います。これが私のqtipのJSです：

            $('.resultCell').each(function(){
                $(this).qtip({
                    content: {
                        text:$('table',this)
                    },
                    position: {
                        my: 'top center',
                        at: 'bottom center'
                    },
                    hide: {
                        fixed: true,
                        delay: 500
                    }
                });
            });
4

1 に答える 1

1

コンテンツとその他の設定を変更するだけで済みますが、このコードはtd実際のツールチップを表示する を強調表示します。

このデモと以下のコードを参照してください。

JavaScript

$(function() {
    $("td").each(function() {
        $(this).qtip({
            content: {
                text: "Test IT"
            },
            position: {
                my: 'top center',
                at: 'bottom center'
            },
            events: {
                show: function(event, api) {
                    api.elements.target.addClass("active");
                },
                hide: function(event, api) {
                    api.elements.target.removeClass("active");
                }
            }
        });
    });
});​

HTML

<table>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
</table>

CSS

td {
    border:1px solid #000000;
    padding:5px;
}
table {
    margin: 20px;
}
.active {
    background-color: #FF0000;
}

</p>

于 2012-05-03T20:52:57.933 に答える