2009-02-27 4 views
0

私はオブジェクトのリストからテーブルを生成する必要があります。各行には、各オブジェクトの基本情報のみが含まれます。しかし、ユーザーが特定のセルを移動すると、その特定のオブジェクトのすべての情報が表示されたポップアップが表示されます。たぶん、ポップアップは、何らかの並べ替えのすべての詳細を持つテーブルの形式にする必要がありますか?これをどのように達成するのですか? JQueryを使っていくつかの効果を加えることはできますか?ユーザーが別のテーブルのセルにカーソルを置いたときにデータテーブルを表示するにはどうすればよいですか?

答えて

1

私はjQuery tooltipをこの種のものに使用します。 bodyHandlerオプションを使用してJavascriptを実行して、任意にスタイルを設定できるツールチップペインを埋めることができます。例を参照してください。

0

マウスオーバーイベントリスナーをバインドします。コールバックが呼び出される予定の要素にマウスカーソルを合わせるとそのようになります。コールバックの内部では、適切なjqueryセレクタを使用して行全体の内容を取得するイベント(イベントの場合はtdまたはtr)をトリガした要素にアクセスできます。次に、ダイアログを表示して、ダイアログ内にその内容を表示できるようになりました。

1

うん、jQueryはこの種のものには最適です。

二つの方法がそれに行う(少なくとも)があります。

  1. 事前に設定して(CSS)隠された:それらを配置するためにCSSを使用して、HTMLページの可視セル内のすべてのポップアップディテール表を構築メインレイヤーの上(およびセル外)に、display:noneと入力し、.maincell:hover .detailtable { display:block;}を追加すると、カーソルがメインセルにあるときに表示されます。

  2. AJAX:すべてのメインセルの"mouseenter"/"mouseleave"イベントにバインド機能が、そこには、好ましくは、一定の場所に、配置<div>内のサーバーやディスプレイからディテール表を取得するためにAJAXを使用し、または多分いくつかのピクセルカーソルの右側に表示されます(小さなテーブルの場合)。 jQueryの$("#inspector").load(dataURL)関数は、( 'inspector'は<div>の詳細テーブルを挿入するIDです)どこでも簡単に死んでしまいます。

関連する問題