JQuery UI Tooltip Bind Special Event - PullRequest
Новая
       25

JQuery UI Tooltip Bind Special Event

0 голосов
/ 06 ноября 2018

Я создаю несколько типов jQuery UI Tooltips. Один тип:

  • Открыть при нажатии на элемент (например, значок?)
  • Должно позволять пользователю нажимать внутри подсказки, чтобы текст можно было выбирать / копировать или взаимодействовать с ним.
  • Должен закрываться, когда пользователь щелкает в любом месте, кроме как внутри подсказки.

Я почти там, за исключением закрытия чаевых. В моем проекте есть специальное событие clickoutisde, которое можно привязать к любому элементу (см. Fiddle).

В приведенном ниже коде он привязан к элементу, вызывающему всплывающую подсказку - в данном случае к значку. Так что подсказка закроется, если вы нажмете где-нибудь, кроме значка.

У меня вопрос: можно ли как-то переместить это событие из значка в саму подсказку (класс .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

Утечка памяти - это известная проблема - она ​​возникает во всплывающей подсказке по умолчанию, и мой пример содержит лучшее рабочее предложение для ее устранения.

Событие clickoutside принадлежит Бену Алману - оно задокументировано здесь и заметно в моей скрипке.

СПЕЦИАЛЬНЫЕ ВОПРОСЫ

Является ли концептуально неправильным использование виджета «Подсказка» для поведения, которое я описал выше?

Когда я начал это путешествие, я так не думал - есть много людей и плагинов, делающих подобные вещи, я просто не мог найти пример, который я мог бы расшифровать, или который получил меня полностью там. Но если это не лучший подход, что бы вы предложили вместо этого?

Я использую событие clickoutside для закрытия диалогов и тому подобного - я этого не понимаю, но оно простое в использовании и работает. Но является ли это лучшим способом приблизиться к закрывающимся подсказкам, когда пользователь щелкает где-нибудь, кроме самой подсказки?

Если clickoutside подходит, и я правильно понимаю, тогда его необходимо привязать к оболочке .ui-tooltip - логика такова: «Если вы щелкнете где-нибудь за пределами всплывающей подсказки, она закроется».

Это должно выглядеть примерно так: $('.ui-tooltip').bind(...), но для текущей всплывающей подсказки, а не для всех всплывающих подсказок, потому что у нас есть другой тип, который использует поведение мыши по умолчанию.

Я могу видеть в коде, который обрабатывает утечку памяти, которую вы можете получить в .ui-tooltip div текущей подсказки, но не знаете, как применить это здесь?

1 Ответ

0 голосов
/ 07 ноября 2018

Вы можете проверить элемент, по которому щелкают, чтобы увидеть, является ли это всплывающей подсказкой. 

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

Это, однако, не сработает, если в наконечнике инструмента есть другие элементы, в этот момент вам также необходимо проверить, является ли он дочерним элементом элемента подсказки.

Честно говоря, это довольно безумный способ сделать это, и неправильно использовать то, для чего нужна подсказка. Тот факт, что ваш код всплывающей подсказки содержит исправление для утечки памяти, является NUTS.

Возможно, для этого вам лучше было бы управлять собственным элементом.

...