0

出于对将 Bootstrap 警报/通知库包装到 GWT 的挫败感，我决定使用 GwtQuery 制作一个：

public static void showErrorNotification(String message){
    List<Widget> allNotifications = $(".notification").widgets();
    for (Widget w : allNotifications){
        $(w).fadeIn(1000);
        $(w).append("<div id=\"errorAlert\" class=\"rounded10 errorAlert\">" +
                "<img alt=\"\" src=\"public/images/exclamation.png\"> " +
                "You must accept the terms and conditions to finish your registration." +
                "</div>");
        $(w).fadeOut(5000);
        //$(w).empty();
    }
}

这段代码的问题是，这个方法可能被用户多次调用，因此append'ed HTML会随着时间的推移而积累。在注释行中清空会导致通知甚至不显示。

有什么解决方案可以在它淡出后清空通知面板？

更新：

当我放：

$(w).empty() 在fadeIn()第二次调用此方法之前没有任何显示。

4

1 回答 1

0

errorAlert当所有动画完成时，您必须排队一个函数以删除。

每次调用showErrorNotification方法时都应该停止队列，以避免在完成之前多次调用它时出现问题。

并且您必须errorAlert在添加之前删除它，以避免在最后一个通知在删除之前停止的情况下重复。

    $(w).stop(true, true);
    $(w).find(".errorAlert").remove();
    $(w).append("<div id=\"errorAlert\" class=\"rounded10 errorAlert\">" +
        "<img alt=\"\" src=\"public/images/exclamation.png\"> " +
        "You must accept the terms and conditions to finish your registration." +
        "</div>");
    $(w).fadeIn(1000);
    $(w).fadeOut(5000);
    $(w).queue(new Function(){
      public void f() {
        $(this).find(".errorAlert").remove();  
      }
    });
于 2013-08-19T07:50:34.853 回答