2009-07-03 10 views
0

グリッド内の行にホバー状態を提供するための最も優れたスクリプトを探しています。グリッドは、いくつかの細胞は、内部テーブルを持って、標準テーブルであるJQuery - グリッド行のハイライトベストプラクティス

ホバー:ユーザーの

90%がIE6のクライアントがので、私はCSSに依存しているカントがあります。

私はもともとmouseoverとmouseoutで.liveメソッドを使用していましたが、イベントがドキュメントのマウスオーバーに委任されたときに、グリッドのないページの部分にマウスを移動すると、これは大量のCPUの影響があります。

私は個々のtrにバインドしたくありません。

現在、私はtbodyでイベントデリゲーションを使用していて、.parentsメソッドを使用してターゲットノードツリーの最後のテーブル行を取得しています。私はこの理由で最も近い( 'tr')を使用することはできません。

ラフ現在の実装:

//event hookup 
$('table.grid>tbody') 
    .mouseover(rowenter) 
    .mouseout(rowleave); 

function rowenter(ev){ 
    ev.stopPropagation(); 
    var $parentTr = $(ev.target).parents('tr:last'); 
    if (! $parentTr.is('.hover')){ 
     $parentTr.addClass('hover'); 
    } 
} 

歓迎任意のより良い実装。

あなたはCSSでこれを行うことができますIE6から離れてすべての最新ブラウザで
+0

なぜ彼らはまだIE6を使用していますか?どのような時間の無駄。 IE6との互換性を保つためにページを書く人が少なくなるほど良いでしょう。これらの人々を将来に向けて蹴散らす。 – Sneakyness

+0

政府のユーザーは、アップグレードを容易にするために何百万もの費用がかかります – redsquare

+0

実際には、私はこれを投票していませんでしたが、私はあなたの質問と回答のすべてを投票して下さってありがとうございます:) – doomspork

答えて

-1

私の質問からの解決策は、ネイティブイベント委任を使用して、最も速い実装です。

+0

うわー、自分の投稿を正しいものとしてマークする... – doomspork

2

tr:hover (background-color:yellow) 

これは、すべてのパフォーマンスの問題を回避する必要があります。

+0

ユーザーの90% – redsquare

+1

その場合、私はイベントの委任を使うのは、おそらくそれが得られるほど良いと思います。あなたはまだより良いパフォーマンスが必要な場合は、jQueryやIE6の.htcビヘイビアファイルを使用しないでください。残念なことにIE6 +テーブル+ js =パフォーマンスの問題:-( – edeverett

関連する問題