Cảnh báo thông báo tương tự như cách chức năng stackoverflow

Question

Stackoverflow tạo hiệu ứng trượt để cảnh báo người dùng thay đổi như thế nào?

Answer 1

Stack Overflow sử dụng jQuery framework, trong đó có một phương pháp để hiển thị một yếu tố tiềm ẩn bằng cách sử dụng hình ảnh động đơn giản, một cái gì đó như:

$('#notification-bar').show('slow'); 

http://api.jquery.com/show/ (xem phần trình diễn).

Nó được gắn vào phía trên cùng của trang bằng position:fixed trong CSS:

#notification-bar { 
    position:fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
} 

Answer 2

Dường như nó có thể được thực hiện với AJAX và jQuery. Một div ở độ rộng 100% ở trên cùng sẽ trượt xuống và lấp đầy với nội dung khi nhận được một số thông tin nhất định. Bạn có quan tâm nhiều hơn đến hiệu ứng ... cho chức năng kết thúc sau không?

Answer 3

Tôi nghĩ rằng họ sử dụng một sự kiện theo thời gian: jQuery Timed Event

nào gửi một lời gọi AJAX đến SO cắt đứt: http://api.jquery.com/jQuery.ajax/

Và sau đó hiển thị nó trong div sử dụng hiệu ứng Andy E đã đề cập

Answer 4

Có triển khai thực hiện rất giống với jQuery của hiệu ứng StackOverflow trong nhóm ASP.NET MVC 2.0 Starter Site của nhóm TekPub trên codeplex.

bạn có thể muốn kiểm tra.

Cập nhật: tôi vừa kiểm tra nó và cách nhóm TekPub thực hiện nó thực sự gọn gàng! Họ có một helper flash được gắn liền với phiên. và tất cả những gì bạn phải làm để gọi các phương thức trợ giúp flash trong bộ điều khiển để hiển thị các thông báo flash.

đây là một ví dụ từ phương pháp Login Hành động:

var registered =_authService.RegisterUser(login, password, confirm, "", "", ""); 
if (registered) { 
    this.FlashInfo("Thank you for signing up!");       

    return AuthAndRedirect(login, login); 
} else { 
    this.FlashWarning("There was a problem with your registration"); 
} 

và đây là một hình ảnh như thế nào nó trông giống như:

tôi khuyên bạn hãy nhìn vào mã của họ .