Question

我正在创建几种类型的jQuery UI工具提示。一种：

单击元素（例如？图标）时打开
应该允许用户在笔尖内单击，以便可以选择/复制文本或与之交互。
当用户在笔尖内部以外的任何位置单击时，应关闭。

我几乎在那儿，除了关闭小费。我的项目有一个特殊的clickoutisde事件，可以绑定到任何元素（请参见小提琴）。

在下面的代码中，它绑定到触发工具提示的元素-在本例中为图标。因此，如果您单击除图标之外的其他任何位置，提示将关闭。

我的问题是，我是否可以将事件从图标移动到工具提示本身（.ui-icon类），以便如果您在提示内部以外的任何位置单击提示，提示将关闭。

还是我需要其他方式？谢谢！

//
// EXAMPLE: Click to Open + Click Outside to Close
// Works on any element with the `.has-tip-pop` class + `title` attribute
// @requires ui-clickoutside.js
//

$( function() {

    $('.has-tip-pop')

        // Stop tip's default close.
        .bind("mouseleave", function (event) {
            event.stopImmediatePropagation();
        })

        // Initialize tip.
        .tooltip({
            // Start as `disabled` so we can `enable` with `click`.
            disabled: true,     
            // A `ui-bg-` style provided by this theme.
            tooltipClass: "ui-bg-black-black",
            // Tip above h-centered
            position: { my: "center bottom", at: "center top-10", },
        }) 

        // Open the tooltip.
        .on('click', function () {
            $(this).tooltip('enable').tooltip('open');
        }) 

        // Click outside ORIGINAL element to close.
        // How to bind this to `.ui-tooltip`?
        .bind( "clickoutside", function(){
            $(this).tooltip('disable'); 
        }) 

        // Handle bug #10689 Memory Leak
        .each(function(idx, element) {
            var ele = $(element);
            ele.tooltip({
                "close": function(evt, ui) {
                    ele.data("ui-tooltip").liveRegion.children(":not(:last)").remove();         
                } 
            });  
        });     

} ); // function

jsFiddle

说明

我是JS的新手-我仍在学习抽象和语义。请尽可能明确地提供反馈：）

这种类型的工具提示是为了提供即时帮助-用户单击？图标或类似元素，并看到以下任一情况：

他们可以选择/复制的文本-当前位于元素的title属性中。
“文本+更多信息”链接-当前在tooltip.js内容中。

memory leak is a known issue-它出现在默认的工具提示上，我的示例中包括处理该问题的最佳建议。

clickoutside事件由Ben Alman-it's documented here主持，在我的提琴中可见。

特定问题

在我上面描述的行为中使用工具提示小部件在概念上是错误的吗？

当我开始这个旅程时，我并不这么认为-有很多人和插件在做类似的事情，我只是找不到一个我可以破译的例子，或者使我一路走到那里。但是，如果这不是最佳方法，您会建议什么呢？

我使用clickoutside事件来关闭对话框和类似内容-我不理解，但是它易于使用且有效。但是，当用户单击笔尖本身内部以外的任何位置时，这是接近关闭工具提示的最佳方法吗？

如果clickoutside是适当的，并且我理解正确，则需要将其绑定到.ui-tooltip包装器-逻辑是，“如果单击工具提示之外的任何位置，它将关闭”

看起来应该像$('.ui-tooltip').bind(...)，但对于当前的工具提示，而不是所有的工具提示，因为我们还有另一种使用默认鼠标进入/退出行为的类型。

我可以在处理内存泄漏的代码中看到您可以在当前工具提示的.ui-tooltip div上获得的代码，但是不知道如何在此处应用它？

Answer 1

您可以检查被单击的元素以查看它是否是工具提示。

.bind("clickoutside", function() {
  if(!$(event.target).hasClass('ui-tooltip-content')){
    $(this).tooltip('disable');
  }
})

但是，如果您的工具提示中最终包含其他元素，则此方法将不起作用，这时您还需要检查它是否是工具提示元素的子元素。

老实说，这是一种非常疯狂的方式来实现此目的，并且滥用了工具提示的用途。您的工具提示代码包含针对内存泄漏的修复程序这一事实就是NUTS。

为此，您最好管理自己的元素。

jQuery UI工具提示绑定特殊事件

1 个答案: