0

X個の惑星画像を画面に表示し、各惑星にマウスオーバーツールチップを提供するPHPページがあり、惑星関連の情報がパックされます。可能であれば、すべてのツールチップ データでページ ソースを乱雑にしないようにしたいと考えています。どうにかして隠したい。

ここで、イメージ タグの 1 つを作成し、json でエンコードされた惑星データの配列を完成させます (これは、私の cakePHP コントローラー オブジェクトのセッションに配置されました)。

<?php
    foreach ($game['Planet'] as $planet) {
        echo $this->Html->image('../img/planet/' . $planet['planet_image_file'] .'.png', 
                array('class' => 'planet_img planet_' . $planet['id'], 
                    'id' => 'planet_' . $planet['id'], 
                    'alt' => $planet['planet_name'], 
                    'data-planet' => json_encode(array('planet_name' => $planet['planet_name'],'planet_type' => $planet['planet_type']));
    }

?>

（今のところ2枠ですが、あと30枠ほど増える予定です）

Qtip2 ツールチップを作成する jQuery は次のとおりです。

$(document).ready(function(){
   $('.planet_img').each(function(){
     $(this).qtip({
         content: $(this).data('planet').planet_name,
         position: {
             my: 'top left',
             at: 'right top'
         }
     });
   })
});

ご覧のとおり、現時点では、Qtip のコンテンツを、planet-info JSON 配列のフィールドの 1 つに設定しているだけです。最終的には、すべての惑星データと CSS スタイルを含む適切にフォーマットされた div タグを作成する予定です....

これを行うためのより良い方法はありますか？Qtip が Ajax 呼び出しを介してコンテンツを取得することを考えていましたが、何千ものユーザーが何千もの惑星を常にマウスで操作することになり、MySQL バックエンドに大きな負担がかかることしか想像できません。

惑星の詳細を既に保存しているセッションから Qtip が情報を取得し、PHP ページがどこから情報を取得しているのかについてはどうですか? それが実行可能である場合、私は現在どのように見ることができず、ナッジが必要です.

基本的に、私はここでアドバイスや提案を受け付けています。

4

0 に答える 0