我正在使用qtip2 ajax-tooltips。这是脚本(http://jsfiddle.net/craga89/L6yq3/):
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: 'http://qtip2.com/demos/data/owl',
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
要使用该脚本,我需要ajax文件的链接:
<a href='http://qtip2.com/demos/data/snowyowl'>Snowy Owl</a>
我想调用没有链接的ajax文件,但是使用data-id属性,所以它看起来像:
<a href="#" data-id="1">Snowy Owl</a>
如何制作?
为了更清楚,像这样的代码:
var urlFormat = "/content/web/tooltip/ajax/ajaxContent{0}.html";
$(document).ready(function() {
$("#products").qtip({
filter: "a",
content: {
url: "/content/web/tooltip/ajax/ajaxContent1.html"
},
width: 520,
position: "top",
requestStart: function(e) {
e.options.url = qtip.format(urlFormat, e.target.data("id"));
}
});
$("#products").find("a").click(false);
});
答案 0 :(得分:0)
我认为你所追求的是:
// Create the tooltips only when document ready
$(document).ready(function()
{
// MAKE SURE YOUR SELECTOR MATCHES SOMETHING IN YOUR HTML!!!
$('a').each(function() {
$(this).qtip({
content: {
text: 'Loading...',
ajax: {
url: $(this).data('id'),
loading: false
}
},
position: {
viewport: $(window)
},
style: 'qtip-wiki'
});
});
});
请注意,我更改了固定网址的url参数,以使用hovered链接中的data-id属性。 url: $(this).data('id'),
它甚至似乎有效:http://jsfiddle.net/L6yq3/492/
修改强>
你可以自己构建网址,然后在那里添加id。这样的事情:
url: 'http://path/to/ajax/script-' + $(this).data('id'),
或者,如果服务器上有(php)脚本,则可以将id添加为查询变量并在那里进行处理。像这样的东西
url: 'http://path/to/ajax/script.php?id=' + $(this).data('id'),
请注意,您也可以使用实际的id
属性,而不是使用data-id
替换$(this).data('id')
1>} $(this).attr('id')
属性
你明白了吗?