如何设置一个cluetop提示的从阿贾克斯回调冠军时,粘性:真的吗?

我使用cluetip插件,它是伟大的。 我填充使用Ajax的插件,但我不能在任何地方如何从一个Ajax回调设置标题(文档或例子)。

正在更新从阿贾克斯cluetip支持的称号?

更新注意:

因此,在这个意义上,他们能够创造一个冠军,但关闭按钮并不在这种情况下,标题显示在下面给出工作的建议。 参见下图。

--------------解决方案-------------

其实,如果你从一个简单的角度看这是很容易的。

要注意,第一件事情是,该文档中的所有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

完成

虽然小提琴可能不会表现出来。 我已经测试它它的作品。

Cluetip缓存当第一次创建它的标题。 因此,你必须改变它在昂秀选项。 试图改变它在ajaxProcess一步将导致您的更改被覆盖。

但是,你可以使用AJAX设置选项以获得您想要的标题和标题存储在一个变量。

请记住,cluetip缓存默认情况下,阿贾克斯的结果。 您可以设置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选项,但你需要确保你叫该选项的默认,以确保其剥离脚本和样式标记。

你可以这样做:

$('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/

$('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")
);
}
});

你总是可以隐藏标题和使用Ajax响应模拟。

分类:jQuery的 时间:2012-03-05 人气:0
分享到:

相关文章

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.483 (s). 10 q(s)