2

私は素晴らしいcluetipプラグインを使用しています。私はAjaxを使用してプラグインにデータを入力していますが、ajaxコールバックからタイトルを設定する方法について（ドキュメントまたは例では）どこにもできません。

cluetipでajaxからのタイトルの更新はサポートされていますか？

更新注：

したがって、以下の提案は、タイトルを作成できるという意味で機能しますが、この場合、閉じるボタンはタイトルに表示されません。下の画像を参照してください。

ここに画像の説明を入力してください

4

5 に答える 5

6

実は、単純な角度から見ればかなり簡単です。

最初に注意することは、ドキュメント内のすべての手がかりは、すべてのヒントを表示するために1つのマークアップレイアウトのみを使用することです。新しい手がかりがトリガーされるたびに、マークアップレイアウトが更新されて表示されるだけです。

試していることを回避する方法の例を見てみましょう

これにはデモを使用しました。したがって、マークアップは次のとおりです。

注：複数の手がかりを持つケースをシミュレートするために、2つの手がかりを使用しています

<a class="title" title="hello" href="http://plugins.learningjquery.com/cluetip/demo/ajax3.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax3.html">This example</a>

<a class="basic" href="http://plugins.learningjquery.com/cluetip/demo/ajax.html" rel="http://plugins.learningjquery.com/cluetip/demo/ajax.html">Basic</a>

正しく整列するように、スタイルに小さな変更を加えましょう

.cluetip-close { float: right; margin-top: -40px; }

さて、私たちのスクリプト、両方の手がかりのヒント。

  var title;
  $('a.title').cluetip({
      closePosition: 'top',
      sticky: true,
      closeText: '<img src="http://plugins.learningjquery.com/cluetip/demo/cross.png" alt="close" width="16" height="16" />Close',            
      ajaxCache: false,
      ajaxSettings:  {
        success: function(data) {
            title = "Your new Title";            
            $(this).attr("title", title); //just set the title for consistency
        }
      },
      onShow : function(ct,c) {
          $(".cluetip-title").text(title); //update the title class with the title
      }
  });

  $('a.basic').cluetip(); //While definning another tip, it is NOT affected by previous one

終わった

フィドルはそれを表示しないかもしれませんが。私はそれをテストしました、そしてそれは働きます。

于 2012-03-27T01:08:16.053 に答える
2

Cluetipは、最初に作成されたときにタイトルをキャッシュします。そのため、onShowオプションで変更する必要があります。ajaxProcessステップで変更しようとすると、変更が上書きされます。

ただし、ajax設定オプションを使用して、必要なタイトルを取得し、そのタイトルを変数に格納することができます。

cluetipはデフォルトでajaxの結果をキャッシュすることに注意してください。これを変更するには、ajaxCache：falseを設定できます。

これがいくつかのサンプルコードです

var title;
$('a.clue').cluetip({
    ajaxSettings:  {
        success: function(data) {
            // GET Title here
            title = 'new title';
        }
    },
    ajaxCache: false,
    onShow : function(ct,c) {
         $("#cluetip-title").text(title);
    }
});

ajaxProcessオプションを使用することもできますが、スクリプトタグとスタイルタグが確実に削除されるように、そのオプションのデフォルトを呼び出していることを確認する必要があります。

于 2011-11-04T23:15:00.673 に答える
1

あなたはこのようなことをすることができます：

$('a.basic').cluetip({
    ajaxProcess: function(data) {
        // Suppose the data come with the following structure:
        data = { title: "Another title", body: "Blah blah blah blah" };

        $(this).attr("title", data.title);
        return data.body;
    },
    onShow: function(ct, c) {
        ct.find(".cluetip-title").text(
            $(this).attr("title")
        );
    }
});

ここで実際の動作を確認してください：http：//jsfiddle.net/A9EQ5/20/

于 2011-11-05T16:44:17.297 に答える
1 
  $('a.basic').cluetip({
      sticky: true,
      closePosition: 'title',
      ajaxCache: false,
      ajaxProcess: function(data) {
        data = {title: "AjaxTitleGoesHere", body:"AjaxBodyGoesHere"};
        $(this).attr("title", data.title);
        return data.body;
      },
      onShow: function(ct, c) {
        ct.find(".cluetip-title").append(
            $(this).attr("title")
        );
      }
  });
于 2012-03-22T12:12:09.627 に答える
-1

タイトルはいつでも非表示にして、ajax応答を使用してシミュレートできます。

于 2011-11-01T01:05:07.610 に答える