Кажется, это очевидная возможность, но я совершенно не могу понять, как это сделать.У меня есть несколько ссылок, например
<a onclick="func('AS');" href="#">Asia</a>
<a onclick="func('AU');" href="#">Australia</a>
<a onclick="func('NA');" href="#">North America</a>
Функция func
выполняет подготовку данных, а затем отправляет запрос ajax.Результаты запроса ajax преобразуются в спарклайны.Это выглядит примерно так:
"func": function(continent) {
$.ajax({
url : "path/to/data.json",
type : "GET",
data : {"continent": continent},
dataType: "jsonp",
error : function() { alert("Error loading html document"); },
success : function(result) {
var html = "<table>" +
"<tr><td colspan='2'><div id='a'></div></td></tr>" +
"<tr><td colspan='2'><div id='b'></div></td></tr>" +
"</table>";
$("#a").sparkline(result.a);
$("#b").sparkline(result.b);
}
});
}
Все это работает очень хорошо, за исключением того, что я хочу показать html-таблицу во всплывающем окне fancybox и не могу понять, как подключить это.Я предполагаю, что мне нужно было бы повернуть операцию как-то так - привязать триггер fancybox к ссылкам с кодами континента, передать код континента в панель запуска fancybox и заполнить fancybox результатами вызова ajax.Все это говорит, как я на самом деле это сделать?
Обновление: На самом деле, следующее работало
"func": function(continent) {
$.ajax({
url : "path/to/data.json",
type : "GET",
data : {"continent": continent},
dataType: "jsonp",
error : function() { alert("Error loading html document"); },
success : function(result) {
var html = "<table>" +
"<tr><td colspan='2'><div id='a'></div></td></tr>" +
"<tr><td colspan='2'><div id='b'></div></td></tr>" +
"</table>";
$.fancybox({
content: html,
autoDimensions: true
});
$("#a").sparkline(result.a);
$("#b").sparkline(result.b);
}
});
}