-2

我正在使用 jQuery 插件来显示通知。

所以我可以使用这样的东西

show_notification("Successfully Saved your data","success");

我们可以将html内容用作message.

现在我想执行一些操作

前任。

show_notification("Do you want to save your data","success");

所以这是给用户的一个问题，用户需要通过单击yes或no[两者都将作为 html 消息传递]来回复

我需要做的是当用户单击是/否时，我需要执行一些操作。

我可以使用id orclass来附加一个点击事件，但是我有很多类型的动作，并且需要使用非常不同的idor class。

我可以使用回调函数或类似的东西吗？

请帮助我或给我您宝贵的建议。

谢谢你。

注意：我知道当前插件不可能并且不谈论它的功能，我只是想修改插件。

4

1 回答 1

0

如果无法向您的插件发送回调，则必须手动将“是/否”按钮添加到您的消息中，并通过实时代表或在显示通知后分配侦听器来定位它们。

$(function() {

    $('body').on('click', '.notification-yes', function() {
       // yes-callback
    });

    $('body').on('click', '.notification-no', function() {
       // no-callback
    });

});

show_notification('Do you want to proceed? <button class="notification-yes">Yes</button> <button class="notification-no">No</button>', 'success');

如果你使用的是这个插件，你会希望你的听众调用closeNotification(). 我意识到语法并不完全相同，但这可能是一个版本问题。如果我们知道您正在使用的插件的详细信息，则可以更轻松地帮助您了解具体情况。

您还需要一种方法来了解单击按钮时显示的通知。您当然可以为不同的通知设置唯一的按钮类名称。如果在任何给定时间总是只显示一个通知，另一种方法是为感兴趣的回调设置一个小的状态对象。例如：

var myNotifications = {
    onYes: function() { },
    onNo: function() { }
};

$(function() {
    $('body').on('click', '.notification-yes', function() {
       myNotifications.onYes();
       closeNotification();
    });

    $('body').on('click', '.notification-no', function() {
       myNotifications.onNo();
       closeNotification();
    });
});

function showCertainNotification() {
    myNotifications.onYes = function() {
        // specific callback for this notification.
    };

    show_notification('Confirm? <button class="notification-yes">Yes</button> <button class="notification-no">No</button>', 'success');
}

如果在任何时候都可能显示多个通知，那么像这样的简单变量将无法做到。在这种情况下，您必须将您的消息包装在一个容器中，您可以从您的侦听器中提取其 ID，并基于此调用特定的回调，或将其作为参数传递。我不会在这里详细介绍，因为 的简单性质show_notification意味着 的同样简单的方式close_notification。由于似乎找不到任何 ID，因此我假设不支持多个活动通知。

一个更吸引人的解决方案可能是修改插件本身，而不是解决它，以便您可以将回调函数直接传递给插件。像这样的东西：

show_notification({
    message: 'Confirm',
    type: 'success',
    buttons: [
        { caption: 'Yes', click: function() { } },
        { caption: 'No',  click: function() { } }
    ]
});

但是，当然，这几乎不可能帮助您，除非您首先有机会查看您当前使用的插件的外观。

于 2012-07-18T10:50:06.867 回答