实时更改jQuery Tipsy插件gravity

Change jQuery Tipsy plugin gravity on live

本文关键字：插件 gravity Tipsy jQuery 实时      更新时间：2023-09-26

我正在使用jQuery Tipsy插件，我想知道是否可以动态更改重力。

我一直在尝试，但没有成功：http://jsfiddle.net/YSYuu/

这是代码：

$('[data-demo]').tipsy({
    title: 'data-demo',
    gravity: 'n'
});
//changing it on real time
$('.demo').click(function () {
    $('[data-demo]').tipsy({
        title: 'data-demo',
        gravity: 's'
    });
    alert("Gravity changed");
});

问题是，为了提高速度，tipsy将事件绑定到特定元素上，而插件中没有解除绑定事件。你可以做的是克隆你的元素；这可能是唯一的办法。（插件限制）。

解决方案如下：

$('.text').tipsy({
    title: 'data',
    gravity: 's'
})

$(".demo").on("click", function(){
    $(".text").remove().clone().appendTo("body").tipsy({
       title: 'data',
       gravity: 'n'
    })
});

JSFiddle：http://jsfiddle.net/javascript/YSYuu/3/

当然，你会把它附加到与原来完全相同的位置。要获取其位置，可以使用$(this).parent().children().index(this)，然后附加$("#whatever li:eq(2)").after("...");

克隆元素，然后移除原始元素。然后添加重力变化的克隆，如下所示：

$('.demo').click(function () {
    var el = $('[data-demo]');
    var clone = $(el.clone());
    el.before(clone);
    el.remove();
    clone.tipsy({
        title: 'data-demo',
        gravity: 's'
    });
    alert("Gravity changed");
});

jsFiddle

您可以在创建工具提示后通过访问tipsy的配置数据来更改重力：

$('[data-demo]').data('tipsy').options.gravity = 's';

我测试了gravity和title，结果良好：http://jsfiddle.net/mikeular/h5y14qe3/6/

相关文章：