1

qtip2 jquery プラグインを使用して、コンテンツを含む小さな tooptips/balloons を作成しようとしています。.js ファイルと .css ファイルは次のとおりです。

http://qtip2.com/download

mysql から php によって取り込まれたテーブルで動作するようにしたい。私はこのようなテーブルをやっています：

 <tbody>
    <?php while($row = MySQL_fetch_array($result)): ?>
        <tr>
            <td title="lname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['last_name'])); ?>
                </div>
            </td>
            <td title="fname" width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['first_name'])); ?>
                </div>
            </td>    
            <td width="100px">
                <div style="width:100px; overflow:hidden;">
                    <?php echo(htmlentities($row['u_name'])); ?>
                </div>
            </td>  
            <td width="100px">
                <div style="width:150px; overflow:hidden;">
                    <?php echo(htmlentities($row['skype_id'])); ?>
                </div>
            </td>
       </tr>
    <?php endwhile; ?>
</tbody>

すべての醜いdivは、より整列して見えるようにするためにあります. とにかく...ツールチップのスクリプトは次のとおりです。

        <script>$('td[title]').qtip({
                    show:'click',
                    hide:'unfocus',
                    content: {
                        text: "<?php echo(htmlentities($row['last_name'])); ?>"
                    }

                }); 
        </script>

問題は...「タイトル」のあるすべてのセルに同じフリギンコンテンツを表示することしかできないことです。各 $row に固有のコンテンツをバルーンに表示したい。どうすればこれを達成できますか？

4

1 に答える 1

1

ドキュメントに従って：

コンテンツを返す関数を指定することもできます。この関数は、連続する各ショー イベントで実行されます。この関数は、静的なテキスト コンテンツ (テキストまたは HTML) または Deferred オブジェクト (以下を参照) の両方を返すことができます。関数は、イベントと API 引数の両方とともに、そのスコープをターゲット要素として実行されます。

だからあなたはこれを行うことができます：

content: {
    text: function() {return $(this).closest("tr").find("[title=lname]").text();}
}

thisアイデアは、であることがわかっているターゲット要素のスコープ ( ) から開始して、td[title]何らかの方法でツールチップのテキストを生成することです。マークアップ内のそのテキストの唯一のインスタンスは 内にあるtd[title=lname]ため、コードはそれを見つけてそのテキストを返します。

于 2013-10-04T13:02:58.363 に答える