1

Red Boxに似た JQuery で何かしようとしています。テーブル内のエントリにカーソルを合わせると、データベースから取得したそのエントリに関する情報を表示するボックス ポップアップが表示されるようにしたいと考えています。

私がこれまでに持っているのは、テーブル内の特定の要素を選択し、それらの要素にカーソルを合わせると警告する機能です:)

だから私の質問は次のとおりです:jqueryホバーからポップアップするテキストボックスにデータベース情報を表示するにはどうすればよいですか(コールバックを使用していると思います)。

ありがとう、
マイケル

4

4 に答える 4

5

適切な JSON を返すことができるサーバー側アプリケーションがあると仮定すると、実装は次のようになります。

$(".item").mouseenter(function(){
    var postUrl = $(this).href;
    // Get the JSON From server, and format the data into the box
    $.getJSON(postUrl, function (data) {
        showInfoBox(data);
    });
});

showInfoBox = function(data) {
    var ibox = $("#divInfoBox");
    $(".name", ibox).html(data.name);
    $(".description", ibox).html(data.description);
    // More data injection here

    ibox.show();

};

関連する HTML は次のようになります。

<div id="divInfoBox">
    <h3 class="name"></h3>
    <p class="description"></p>
</div>

<.......>

<!-- list of the item that need database data !-->
<ul id="itemList">
    <li><a href="/url/to/data?id=1">1</a></li>
    <li><a href="/url/to/data?id=2">2</a></li>
    <li><a href="/url/to/data?id=3">3</a></li>
</ul>
于 2009-07-09T15:35:12.270 に答える
1

ページ生成中に各アイテムの非表示を作成し<div>（データが大きくない場合）、そのデータをポップアップボックスにプルすることもできます。このdivはjQueryで非表示にすることができます。つまり、javascriptを持たない人（つまり、googleのクローラーとテキストリーダー）でも「完全な説明」データを取得できます。

<div>次に、ホバーしたときにポジショニング/表示の問題になります。ホバーチップは良いスタートのようです。

AJAX呼び出しを介してデータを要求する必要がないため、ページの応答性が向上します。

于 2009-07-09T15:39:48.190 に答える
0

うまくいけば、この要約された説明が役立ち、xandyが投稿したコードと一緒に行く必要があります：

JSONを提供する動的ページを作成します。このページは、そのデータを引き戻すことができるようにするための重要な情報を取得します。次に、ホバーされている製品に関する情報をJSONに渡すホバーイベントを作成します。データが戻ってきたら、その情報をDIVに入力するか、モーダルまたはツールチッププラグインを使用して情報を表示します。

于 2009-07-09T15:37:49.037 に答える
0

これを実現するための非常に簡単な方法は、クライアント側のテンプレートを使用することです。これについて詳しくは、このブログ投稿を参照してください。要約すると、クライアント側のテンプレートの基本的な意味は次のとおりです。

  1. ページにホバー表示要素を表すHTMLフラグメントがあります
  2. 次に、jqueryを使用して、サーバーに対してAJAX呼び出しを行い、表示するデータを取得します。
  3. AJAX呼び出しからデータを受信したら、jqueryを使用してhtmlフラグメントのクローンを作成します。
  4. 最後に、受信したデータを複製されたHTMLフラグメントに挿入して表示します。

それがあなたを助けることを願っています。

于 2009-07-09T15:37:53.497 に答える