你是如何制作一个“粘性”的线索,点击时打开,关闭点头外部的点击?

时间:2011-04-12 20:48:19

标签: jquery cluetip

我有一个设置为粘性的cluetip,当点击链接时会打开。我还在cluetip上设置了一个关闭按钮,所有这些都很有效。如果除了当前的关闭按钮之外有人在cluetip之外点击,我想关闭cluetip。我正在寻找悬停解决方案,只需在cluetip之外点击即可。

4 个答案:

答案 0 :(得分:3)

我是这样做的:

    onShow: function() {
        // close cluetip when users click outside of it
        $(document).click(function(e) {
            var isInClueTip = $(e.target).closest('#cluetip');
            if (isInClueTip.length === 0) {
                $('.cluetip-default').hide();
            }
        })
    },

答案 1 :(得分:2)

根据常见问题解答,有一种API方法可让您触发关闭:

clue的新功能提示1.0.3:如何以编程方式关闭(隐藏)线索提示? 如果要根据其他一些交互触发clueTip关闭,可以使用以下代码:$(document).trigger('hideCluetip');

所以我认为你可以这样做:


$('#myCluetip').cluetip({
  onShow: function() {
    $(document).one('mousedown',function() {
      $(document).trigger('hideCluetip');
    })
  });
});

这是通过将mousedown事件的一次性事件处理程序绑定到文档正文,然后触发Cluetip人员说将隐藏打开的Cluetips的事件。使用一次性事件处理程序意味着每次有人点击某些东西时你都不会发送hideCluetip触发器。

答案 2 :(得分:2)

Stony的解决方案对我不起作用。

我使用了@Gary Green的解决方案,它运行正常 - 但这仍然不是我想要的“关闭鼠标输出/停留”解决方案。

最后,我发现Cluetip本身提供了一种方法。

只需设置值“mouseOutClose:false”,如下所示:

$("#myForm :input").cluetip(
    {
        sticky: true, 
        closePosition: 'title', 
        arrows: true,
        mouseOutClose: true
    }
);

答案 3 :(得分:0)

看到你的代码会很有帮助,但无论如何你可以按照这些方式做点什么;

$(document).click(function(e) {
    if (!$(e.target).hasClass('cluetip'))
    {
      // Close the cluetip here.  
    }
});