我正在使用cluetip plugin which很棒。我使用Ajax填充插件,但我不能在任何地方(在文档或示例中)如何从ajax回调设置标题。
是否正在从cluetip支持的ajax更新标题?
因此,下面给出的建议可以创建标题,但在这种情况下,关闭按钮不会显示在标题中。见下图。
答案 0 :(得分:6)
实际上,从简单的角度看,这很容易。
首先要注意的是,文档中的所有cluetips,只使用一个标记布局来显示所有提示。每次触发新的cluetip时,它只会更新其标记布局并显示它。
我使用了这个演示。标记是:
注意:我使用两个cluetips来模拟一个有多个cluetips的案例
<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
虽然fiddle可能无法显示。我已对其进行了测试,可行。
答案 1 :(得分: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选项,但您需要确保调用该选项的默认值以确保它删除脚本和样式标记。
答案 2 :(得分: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/
答案 3 :(得分: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")
);
}
});
答案 4 :(得分:-1)
您可以随时隐藏标题并使用ajax响应进行模拟。