2

目的

テーブルセルにカーソルを合わせると、テーブルセルの右上隅に小さな虫眼鏡アイコンが表示されます。虫眼鏡アイコンの上にマウスを置いてクリックすると、ダイアログウィンドウが開き、その特定のテーブルセル内のアイテムに関する詳細情報が表示されます。毎回再作成せずに、同じアイコンを何百ものテーブルセルに再利用したいと思います。

部分的な解決策

<span>絶対に配置され、隠されているシングルを持っています。_previewableテーブルセルにカーソルを合わせると、が<span>正しい場所に移動して表示されます。これ<span>もDOM内で移動され、_previewableテーブルセルの子になります。これにより、に接続されたクリックハンドラーが親<span>を検索し_previewable、ダイアログのコンテンツを設定するために使用されるjquery data（）オブジェクトから情報を取得できるようになります。

これが私のHTMLの非常に単純化されたバージョンです：

<body>
    <span id="options">
        <a class="ui-state-default ui-corner-all">
            <span class="ui-icon ui-icon-search"></span>
            Preview
        </a>
    </span>
    <table>
         <tr>
             <td class="_previewable">
                 <img scr="user_1.png"/>
                 <span>Bob Smith</span>
             </td>
        </tr>
   </table>
</body>

そしてこのCSS：

#options {
    position: absolute;
    display: none;
}

このjQueryコードを使用すると：

var $options = $('#options');
$options.click(function() {
    $item = $(this).parents("._previewable");
    // Show popup based on data in $item.data("id");
    Layout.renderPopup($item.data("id"),$item.data("popup"));               
});

$('._previewable').live('mouseover mouseout',function(event) {
    if (event.type == 'mouseover') {
        var $target = $(this);
        var $parent = $target.offsetParent()[0];

        var left = $parent.scrollLeft + $target.position().left 
            + $target.outerWidth() - $options.outerWidth() + 1;
        var top = $parent.scrollTop + $target.position().top + 2;

        $options.appendTo($target);
        $options.css({
            "left": left + "px",
            "top": top + "px"
        }).show();
    }
    else {
        // On mouseout, $options continues to be a child of $(this)
        $options.hide();
    }
});

問題

このソリューションは、テーブルの内容がAJAXを介して再ロードまたは変更されるまで完全に機能します。<span>はからセルの子になるように移動されたため<body>、AJAX呼び出し中にスローされて置き換えられます。したがって、私の最初の考えは、次の<span>ように、テーブルセルのマウスアウトで本体に戻ることです。

    else {
        // On mouseout, $options is moved back to be a child of body
        $options.appendTo("body");
        $options.hide();
    }

ただし、これにより、<span>マウスオーバーするとすぐに消えます。がテーブルセルの子であり、テーブルセルの境界内に完全に表示されている場合でも_previewable、マウスがに移動すると、mouseoutイベントが呼び出されるようです。現時点では、これはChromeでのみテストしています。<span><span>_previewable_previewable

質問

  1. _previewableマウスがまだの境界内にあるのに、なぜmouseoutが呼び出されるの_previewableでしょうか。<span>絶対に配置されているからですか？

  2. <span>各AJAXテーブルの参照でクリックハンドラーを再作成せずに、これを機能させるにはどうすればよいですか？

4

2 に答える 2

5

<body>イベントを変更すると、次のように、（に追加されている）残りのイベントが機能します。

$('._previewable').live('mousenter mouseleave',function(event) {

mouseoverandとは異なりmouseout、mousenterandmouseleaveイベントは、子に移動したり、子から移動したりするときに発生しないため、この場合は希望どおりに動作します。

清潔さのために、私は.live('mouseenter）をバインドし、.live('mouseleave')別々に削除しif()ます。何が起こっているのかを確認する方がはるかに簡単ですが、私だけかもしれません:)

于 2010-04-20T20:20:33.803 に答える
1

これは、各セルに小さな小さな画像が表示されないようにするためだけに、非常に多くの作業のように見えます。要素のインスタンスを1つだけ「再利用」しても、それほど多くは得られません。ブラウザは画像を一度だけダウンロードする必要があります。また、パフォーマンスの観点から、DOMツリーをいじるには、強調表示された要素の表示プロパティを切り替えるだけでなく、より多くのリソースが必要になります。

<span>最も簡単な方法は、印刷するすべてのセルにを入れてから、CSSを使用して非表示/表示することです。

于 2010-04-20T20:18:44.710 に答える