Question

我正在尝试使用自定义showCustomCard: true找到如何将hovercard与HTML数据一起使用的示例，但它仅提供了JSON的示例。我正在修改我的应用程序，我已经发送了基于HTML的回调数据。

其他人试图以这种方式使用hovercard吗？没有JSON，只是让它调用来获取用户数据？

这是我的代码（我在页面上有多个用户需要使用hovercard）：http://jsfiddle.net/TtQH3/

基本上是否有任何想法，如果我错过了加载HTML数据而不是所需的JSON的东西？

Answer 1

在经过一些试验和错误以及对演示代码的更多审核后，我自己想出了这个。

这是一个我刚刚使用的工作javascript解决方案，技巧是'onHoverIn'或任何其他调用，只需创建一个函数（我的情况是对我的后端脚本的简单ajax调用以加载用户数据）。

$(function() {

    var hoverUserDetails = '<div class="hover-details"></div>';

    $(".hover-me").hovercard({
        detailsHTML: hoverUserDetails,
        width: 480,
        onHoverIn: function () {

            $.ajax({
                url: $(this).children('a').attr('data-hovercard'),
                type: 'GET',
                beforeSend: function () {
                    $(".hover-details").prepend('<p class="loading-text">Loading details...</p>');
                },
                success: function (data) {
                    $(".hover-details").empty();
                    $(data).appendTo(".hover-details");
                },
                complete: function () {
                    $('.loading-text').remove();
                }
            });
        }
    }); 

});

希望有人帮助！如果你需要HTML示例，请查看我的jsfiddle。

使用hovercard显示showCustomCard数据（非JSON）

1 个答案: