Panel powiadomień podobny do stackoverflow's

Question

Pamiętasz mały div, który pojawia się na górze strony, aby powiadomić nas o rzeczach (jak nowe odznaki)?

Chciałbym również zaimplementować coś takiego i szukam najlepszych praktyk lub wzorców.

Moja strona to także aplikacja ASP.NET MVC. Najlepiej byłoby, gdyby odpowiedzi zawierały informacje takie jak "put to na stronie wzorcowej" i "do ten w kontrolerach".

Tylko po to, aby uchronić Cię przed koniecznością patrzenia na siebie, jest to kod widoczny z komunikatu powitalnego, który pojawia się, gdy nie jesteś zalogowany w stackoverflow.

Chciałbym dodać, że rozumiem to doskonale, a także rozumiem zaangażowanie jquery. Po prostu interesuje mnie, kto umieszcza kod w znacznikach i kiedy ("kto", jak w jakich podmiotach w aplikacji ASP.NET MVC).

Dzięki!

Answer 1

Po węszyć wokół kodu trochę, tu jest przypuszczenie:

Poniższy pojemnik zgłoszenie jest zawsze w znacznikach Widok:

<div id="notify-container"> </div> 

To pojemnik zgłoszenie jest domyślnie ukryty, a jest zapełniany przez javascript w pewnych okolicznościach. Może zawierać dowolną liczbę wiadomości.

Jeśli użytkownik nie jest zalogowany

Trwałość: Cookies są używane, aby śledzić, czy wiadomość jest wyświetlana lub nie.

stronie serwera wygenerowany kod w widoku: myślę stackoverflow pokazuje tylko jedną wiadomość, jeśli nie jesteś zalogowany Poniższy kod jest wstrzykiwana do widzenia.

<script type="text/javascript"> 
    $(function() { notify.showFirstTime(); }); 
</script> 

The showFirstTime() Metoda javascript określa, czy wyświetlić "Czy to Twój pierwszy raz tutaj?" wiadomość na podstawie tego, czy plik cookie został ustawiony, czy nie. Jeśli nie ma pliku cookie, pojawi się komunikat. Jeśli użytkownik podejmie działanie, plik cookie zostanie ustawiony, a komunikat nie będzie wyświetlany w przyszłości. Funkcja nofity.showFirstTime() obsługuje sprawdzanie plików cookie.

Jeśli użytkownik jest zalogowany

Trwałość: Baza danych jest używany, aby śledzić, czy wiadomość została pokazana czy nie.

stronie serwera wygenerowany kod w widoku: Gdy strona jest wymagany kod po stronie serwera sprawdza bazę danych, aby zobaczyć jakie komunikaty muszą być wyświetlane. Kod po stronie serwera wstrzykuje wiadomości w formacie json do widoku i umieszcza wywołanie javascript na showMessages().

Na przykład, jeśli jestem zalogowany do widoku, widzę następujące w znacznikach na SO:

<script type="text/javascript"> 
1 
2 var msgArray = [{"id":49611,"messageTypeId":8,"text":"Welcome to Super User! Visit your \u003ca href=\"https://stackoverflow.com/users/00000?tab=accounts\"\u003eaccounts tab\u003c/a\u003e to associate with our other websites!","userId":00000,"showProfile":false}]; 
3 $(function() { notify.showMessages(msgArray); }); 
4 
</script> 

Więc kod po stronie serwera albo wstrzykuje kod nazywać „showFirstTime” metodę, jeśli użytkownik nie jest zalogowany lub wprowadza komunikaty i wywołuje "showMessages" dla zalogowanego użytkownika.

Więcej informacji na temat kodu po stronie klienta

Drugim elementem kluczowym jest „zawiadomić” JavaScript moduł Picflight uznano de-minified (można zrobić to samo przy użyciu YSlow dla Firebug). Moduł powiadomień obsługuje zapełnianie obszaru powiadomień na podstawie wygenerowanego po stronie serwera skryptu javascript.

Nie zalogowany, po stronie klienta

Jeśli użytkownik nie jest zalogowany, to moduł obsługuje zdarzenia, gdy użytkownik X OUT zawiadomienia lub idzie do FAQ tworząc cookie. Określa również, czy wyświetlić komunikat po raz pierwszy, sprawdzając plik cookie.

zalogowany, po stronie klienta

Jeśli użytkownik jest zalogowany, moduł zawiadomić dodaje wszystkie komunikaty generowane przez serwer do div powiadomień. Najprawdopodobniej używa ajax do aktualizacji bazy danych, gdy użytkownik odrzuci wiadomość.

Answer 2

Choć te nie są bynajmniej urzędnika, wspólne praktyki, które śledzę spowodowałoby coś takiego:

• Utwórz element, który będzie pełnił rolę zbiornika powiadomień w znacznikach, ale go ukryć domyślnie (można to zrobić na wiele sposobów - JavaScript, zewnętrzny CSS lub style śródliniowe).
• Zachowaj skrypty odpowiedzialne za zachowanie powiadomienia poza znacznikiem. W powyższym przykładzie widać, że istnieje onclick, a także inna funkcja uruchamiana podczas ładowania strony zawarta w znacznikach. Chociaż to działa, widzę to jako mieszanie prezentacji i zachowania.
• Zachowaj prezentację powiadomienia zawartą w zewnętrznym arkuszu stylów.

Ponownie, to tylko moje typowe praktyki określone w kontekście twojego pytania. Rzeczą związaną z tworzeniem stron internetowych, jak już pokazuje natura twojego pytania, jest to, że jest tak wiele sposobów na zrobienie tego samego z tymi samymi rezultatami.

Answer 3

StackOverflow używa jQuery - kod JS, który napisałeś z SO jest wywołaniem jQuery. Zrobi dokładnie to, co chcesz, prawie bez kodu. Wysoce polecany.

Answer 4

This answer ma kompletne rozwiązanie.

kopiowaniem wklejanie:

To markup, początkowo ukryte, dzięki czemu możemy znikną go:

<div id='message' style="display: none;"> 
    <span>Hey, This is my Message.</span> 
    <a href="#" class="close-notify">X</a> 
</div> 

Tu stosowane są style:

#message { 
    font-family:Arial,Helvetica,sans-serif; 
    position:fixed; 
    top:0px; 
    left:0px; 
    width:100%; 
    z-index:105; 
    text-align:center; 
    font-weight:bold; 
    font-size:100%; 
    color:white; 
    padding:10px 0px 10px 0px; 
    background-color:#8E1609; 
} 

#message span { 
    text-align: center; 
    width: 95%; 
    float:left; 
} 

.close-notify { 
    white-space: nowrap; 
    float:right; 
    margin-right:10px; 
    color:#fff; 
    text-decoration:none; 
    border:2px #fff solid; 
    padding-left:3px; 
    padding-right:3px 
} 

.close-notify a { 
    color: #fff; 
} 

I to jest javascript (przy użyciu jQuery):

$(document).ready(function() { 
    $("#message").fadeIn("slow"); 
    $("#message a.close-notify").click(function() { 
     $("#message").fadeOut("slow"); 
     return false; 
    }); 
}); 

I voila. W zależności od ustawień strony możesz również edytować górną krawędź marginesu na ekranie.

Here is a demo of it in action.

Answer 5

Widzę następującą funkcję jQuery? Wierzę, że wstrzykuje html do div z id-powiadomieniem-kontenerem.

Nie rozumiem, w jaki sposób ten JS jest używany i wywoływany w oparciu o pewne zdarzenia, być może ktoś może wyjaśnić.

var notify = function() { 
var d = false; 
var e = 0; 
var c = -1; 
var f = "m"; 
var a = function(h) { 
    if (!d) { 
     $("#notify-container").append('<table id="notify-table"></table>'); 
     d = true 
    } 
    var g = "<tr" + (h.messageTypeId ? ' id="notify-' + h.messageTypeId + '"' : ""); 
    g += ' class="notify" style="display:none"><td class="notify">' + h.text; 
    if (h.showProfile) { 
     var i = escape("https://stackoverflow.com/users/" + h.userId); 
     g += ' See your <a href="/messages/mark-as-read?messagetypeid=' + h.messageTypeId + "&returnurl=" + i + '">profile</a>.' 
    } 
    g += '</td><td class="notify-close"><a title="dismiss this notification" onclick="notify.close('; 
    g += (h.messageTypeId ? h.messageTypeId : "") + ')">&times;</a></td></tr>'; 
    $("#notify-table").append(g) 
}; 
var b = function() { 
    $.cookie("m", "-1", { 
     expires: 90, 
     path: "/" 
    }) 
}; 
return { 
    showFirstTime: function() { 
     if ($.cookie("new")) { 
      $.cookie("new", "0", { 
       expires: -1, 
       path: "/" 
      }); 
      b() 
     } 
     if ($.cookie("m")) { 
      return 
     } 
     $("body").css("margin-top", "2.5em"); 
     a({ 
      messageTypeId: c, 
      text: 'First time here? Check out the <a onclick="notify.closeFirstTime()">FAQ</a>!' 
     }); 
     $(".notify").fadeIn("slow") 
    }, 
    showMessages: function(g) { 
     for (var h = 0; h < g.length; h++) { 
      a(g[h]) 
     } 
     $(".notify").fadeIn("slow"); 
     e = g.length 
    }, 
    show: function(g) { 
     $("body").css("margin-top", "2.5em"); 
     a({ 
      text: g 
     }); 
     $(".notify").fadeIn("slow") 
    }, 
    close: function(g) { 
     var i; 
     var h = 0; 
     if (g && g != c) { 
      $.post("/messages/mark-as-read", { 
       messagetypeid: g 
      }); 
      i = $("#notify-" + g); 
      if (e > 1) { 
       h = parseInt($("body").css("margin-top").match(/\d+/)); 
       h = h - (h/e) 
      } 
     } else { 
      if (g && g == c) { 
       b() 
      } 
      i = $(".notify") 
     } 
     i.children("td").css("border-bottom", "none").end().fadeOut("fast", function() { 
      $("body").css("margin-top", h + "px"); 
      i.remove() 
     }) 
    }, 
    closeFirstTime: function() { 
     b(); 
     document.location = "/faq" 
    } 
} 
}(); 

Answer 6

Napisałem ten fragment Javascript, który robi to samo, włączając w to układanie w stosy, pozostawanie z tobą podczas przewijania, jak to robi Stack Overflow i przesuwanie całej strony po dodaniu nowego paska. Bary również wygasają. Pręty również powstają.

// Show a message bar at the top of the screen to tell the user that something is going on. 
// hideAfterMS - Optional argument. When supplied it hides the bar after a set number of milliseconds. 
    function AdvancedMessageBar(hideAfterMS) { 
     // Add an element to the top of the page to hold all of these bars. 
     if ($('#barNotificationContainer').length == 0) 
     {    

     var barContainer = $('<div id="barNotificationContainer" style="width: 100%; margin: 0px; padding: 0px;"></div>'); 
     barContainer.prependTo('body'); 

     var barContainerFixed = $('<div id="barNotificationContainerFixed" style="width: 100%; position: fixed; top: 0; left: 0;"></div>'); 
     barContainerFixed.prependTo('body'); 
    } 

    this.barTopOfPage = $('<div style="margin: 0px; background: orange; width: 100%; text-align: center; display: none; font-size: 15px; font-weight: bold; border-bottom-style: solid; border-bottom-color: darkorange;"><table style="width: 100%; padding: 5px;" cellpadding="0" cellspacing="0"><tr><td style="width: 20%; font-size: 10px; font-weight: normal;" class="leftMessage" ></td><td style="width: 60%; text-align: center;" class="messageCell"></td><td class="rightMessage" style="width: 20%; font-size: 10px; font-weight: normal;"></td></tr></table></div>'); 
    this.barTopOfScreen = this.barTopOfPage.clone(); 

    this.barTopOfPage.css("background", "transparent"); 
    this.barTopOfPage.css("border-bottom-color", "transparent"); 
    this.barTopOfPage.css("color", "transparent"); 

    this.barTopOfPage.prependTo('#barNotificationContainer'); 
    this.barTopOfScreen.appendTo('#barNotificationContainerFixed'); 


    this.setBarColor = function (backgroundColor, borderColor) {  

     this.barTopOfScreen.css("background", backgroundColor); 
     this.barTopOfScreen.css("border-bottom-color", borderColor); 
    }; 

    // Sets the message in the center of the screen. 
    // leftMesage - optional 
    // rightMessage - optional 
    this.setMessage = function (message, leftMessage, rightMessage) { 
     this.barTopOfPage.find('.messageCell').html(message); 
     this.barTopOfPage.find('.leftMessage').html(leftMessage); 
     this.barTopOfPage.find('.rightMessage').html(rightMessage); 

     this.barTopOfScreen.find('.messageCell').html(message); 
     this.barTopOfScreen.find('.leftMessage').html(leftMessage); 
     this.barTopOfScreen.find('.rightMessage').html(rightMessage); 
    }; 


    this.show = function() { 
     this.barTopOfPage.slideDown(1000); 
     this.barTopOfScreen.slideDown(1000); 
    }; 

    this.hide = function() { 
     this.barTopOfPage.slideUp(1000); 
     this.barTopOfScreen.slideUp(1000); 
    }; 

    var self = this; 


    if (hideAfterMS != undefined) { 
     setTimeout(function() { self.hide(); }, hideAfterMS); 
    }  
} 

Aby z niego skorzystać, należy użyć jQuery i upewnić się, że na stronie nie ma marginesów ani marginesów.

Parametr stosowany przez AdvancedMessageBar jest opcjonalny. Jeśli zostanie podany, spowoduje to zniknięcie paska po pewnym czasie w milisekundach.

var mBar = new AdvancedMessageBar(10000); 
mBar.setMessage('This is my message', 'Left Message', 'Right Message'); 
mBar.show(); 

Jeśli chcesz je ułożyć, po prostu utwórz więcej obiektów AdvancedMessageBar i będą one automatycznie układane w stos.