Блог

Главная - Вопросы по программированию - grumble.js , Плагин jQuery (всплывающие окна): как сделать так, чтобы он не загрязнял тело моего документа неустранимым мусором?

grumble.js , Плагин jQuery (всплывающие окна): как сделать так, чтобы он не загрязнял тело моего документа неустранимым мусором?

#javascript #jquery #html #dom #popup

#javascript #jquery #HTML #dom #всплывающее окно

Вопрос:

Я хочу показать всплывающее окно многим по щелчку. Я хочу, чтобы столько было в пузыре. Итак, я создал демонстрацию: здесь . Но этот плагин генератора пузырьков, который я использую, имеет тенденцию сохранять тонны мусора в DOM каждый раз, когда он показывает всплывающее окно. Итак, я попытался уничтожить мусор с помощью

         $('.grumble-text').remove();
        $('.grumble').remove();
        $('.grumble-button').remove();

Но это как-то тормозит его вообще = (Итак, как изменить код плагина всплывающего окна grumble-bubble, чтобы он либо содержал DOM в чистоте, либо, по крайней мере, делал плагин независимым от создаваемого им мусора?

Комментарии:

1. У вас будет несколько открытых пузырьков?

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

Ответ №1:

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

Попробуйте обновить код до последней версии. Приведенный ниже код теперь должен работать так, как вы ожидаете.

 var html = ''
     '<a href="#me" target="_blank">Download me</a>'
     '<br/>'
     '<a href="#edit">Edit me</a>'
     '<br/>'
     '<a href="#delete">Delete me</a>';

var $grumble = $('#grumble3');

$grumble.mouseup(function(eventObj) {
    $grumble.grumble({
        text: html ,
        angle: (Math.random() * 360   150),
        distance: 30,
        hideOnClick: true,
        onShow: function() {
            $grumble.addClass("hilight");
        },
        onBeginHide: function() {
            $grumble.removeClass("hilight");
        }
    });
}).mousedown(function() {
    $grumble.addClass("hilight");
});

Спасибо за ваш интерес. Если есть какие-либо дополнительные проблемы, пожалуйста, сообщите о них как об ошибках на странице github. https://github.com/jamescryer/grumble.js

Ответ №2:

Используйте параметры grumble и button для onHide обратного вызова следующим образом:

 $('#grumble').grumble({
    text: 'Whoaaa, this is a lot of text that i couldn't predict',
    angle: 85,
    distance: 50,
    showAfter: 4000,
    hideAfter: 2000,
    onHide: function(grumble, button) {
        grumble.bubble.remove();
        grumble.text.remove();
        button amp;amp; button.remove();
    }
});

Это позволяет вам удалять только «мусор» (я предпочитаю «остатки»), связанный с этой конкретной всплывающей подсказкой / всплывающим окном / пузырьком. Обратите внимание, что button существует только в том случае, если hasHideButton есть true , отсюда button amp;amp; и проверка существования.

Ответ №3:

Почему вы хотите его удалить? Вызывает ли «мусор» проблемы с производительностью браузера?

В общем, единственный способ сделать это — покопаться в источнике плагина и добавить функцию для удаления плагина, если он еще не присутствует. Если вы просто удалите связанные элементы DOM, вы оставите ссылки на них и обработчики событий, которые обращаются к ним.

Метки: