0

jQuery qTip2 が機能するようになりましたが、最後に解決すべきことが 1 つあります。動的コンテンツをツールチップにリンクとして表示することです。（私はこれらすべてに慣れていないので、ご容赦ください。）

qTipを表示するために私が今持っているものは次のとおりです。

$(document).ready(function() {
    $('span[title]').qtip({
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        hide: {
            fixed: true
        },
        style: {
            classes:'ui-tooltip-shadow ui-tooltip-rounded'
        }
    });
});

これが私のerbファイルです：

<li class="article"><span title="<%= author.name %>">
  <%= article.body %>,&nbsp;
</span></li>

レンダリングされた HTML:

<li class="article"><span title="My Name">
  Testing,&nbsp;
</span></li>

私がやりたいことは、作成者の名前とそのプロファイルへのリンクを示す qTip としてリンクを表示することです。次のように、application.js ファイルにリンクを追加できることはわかっています。

    **content: {
        text: '<a href="link">My name</a>'},**

ただし、コンテンツがデータベースから動的に追加されるようにするにはどうすればよいですか? 理想的には、次のようなものが必要です。

    **content: {
        text: '<a href="`<%= article.author.profile %>`">`<%= author.name %>`</a>'},**

以前の回答から、有効な HTML の生成に問題があることを知っています。しかし、誰かがここで私を助けてくれることを願っています。

4

1 に答える 1

2

これを実現する方法の 1 つは、サーバーに対して ajax 呼び出しを実行して、コンテンツに応じてツールチップに表示する動的 HTML を取得することです。apiこれを行うには、次の方法を使用できますonRender。

$(document).ready(function() {
    $('span[title]').qtip({
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        hide: {
            fixed: true
        },
        style: {
            classes:'ui-tooltip-shadow ui-tooltip-rounded'
        },
        api: {
           onRender: function() {
              $.post(urlToContent, function (content) {
                 // Update the tooltip with the dynamic content
                 api.updateContent(content);
              });
           }
        }
    });
});

編集：

ajaxメソッドを使用して、qtip2 でも同じことができます。

$(document).ready(function() {
   $('span[title]').qtip({
        position: {
           my: 'bottom center',
           at: 'top center'
        },
        hide: {
           fixed: true
        },
        style: {
           classes:'ui-tooltip-shadow ui-tooltip-rounded'
        },
        content: {
           text: 'Loading...', // The text to use whilst the AJAX request is loading
           ajax: {
              url: '/path/to/file', // URL to the local file
              type: 'GET', // POST or GET
              data: {} // Data to pass along with your request
           }
        });
    });

ajaxリンクを見て、サーバーからデータを取得する他の方法を確認してください。ただし、上記の例は、基本的な HTML を取得している場合に機能します。

于 2011-09-27T16:03:02.497 に答える