Tôi đã tìm một thanh thông báo giống như thanh thông báo trên trang web này hiển thị ở đầu thông báo cho người dùng thay đổi, v.v. Nó phải có khả năng bị đóng. Tất cả những gì tôi có thể tìm kiếm jquery là this onethanh thông báo jquery có thể bị loại bỏ?
Có ai có đề xuất hoặc đề xuất nào khác không?
Siêu dễ dàng để xây dựng của riêng bạn. Chỉ cần làm cho nó <div> đầu tiên dưới thẻ <body>, và thiết lập các css để một cái gì đó như thế này:
#notify {
position:relative;
width:100%;
background-color:orange;
height:50px;
color:white;
display:none;
}
Sau đó, trên thông báo của mình, chỉ cần trượt xuống:
$('#notify').html('new message').slideDown();
Và thêm một sự kiện nhấp chuột để đóng nó lại và dọn dẹp các thông báo:
$('#notify').click(function(){
$(this).slideUp().empty();
});
Demo: http://jsfiddle.net/AlienWebguy/Azh4b/
Nếu bạn muốn thực sự làm cho nó giống như StackOverflow, bạn chỉ cần đặt cookie khi bạn phát hành thông báo và sau đó mọi lần tải trang hiển thị tất cả các thông báo có cookie hiện hành.
Nếu bạn muốn nhiều thông báo, hãy thay đổi #notify thành .notify và ngăn xếp chúng. Một cái gì đó như thế này:
$('.notify').live('click',function() {
$(this).slideUp('fast',function(){$(this).remove();});
});
$(function(){
notify('You have earned the JQuery badge!');
notify('You have earned the Super Awesome badge!');
});
function notify(msg) {
$('<div/>').prependTo('body').addClass('notify').html(msg).slideDown();
}
Không bao giờ được coi là xây dựng của riêng tôi ... có ý nghĩa. Cảm ơn và cảm ơn bạn vì ví dụ tuyệt vời :) – Paul
Bạn được chào đón, vui mừng được trợ giúp :) – AlienWebguy
Tôi đã thực sự làm một cái gì đó rất giống với điều này cho một vài dự án của tôi.
Có một JSFiddle demo, hoạt động nhưng đó là một thang máy thẳng từ lib cá nhân của tôi - mã có thể sử dụng làm sạch và tối ưu hóa, nhưng nó tạo ấn tượng tốt về cách hoạt động của nó.
Tiền thưởng thêm vào mã của tôi là nó không hiển thị các mục trùng lặp - nó "ping" mục hiện tại. Nhấp vào bất kỳ nơi nào trên thông báo sẽ đóng nó.
Hạn chế duy nhất tôi có thể thấy là nó bao gồm một số nội dung chính, nhưng điều đó có thể khắc phục nếu bạn đặt vùng chứa thông báo ở đầu nội dung của bạn với position: static.
Vui lòng cho tôi biết nếu có bất kỳ chi tiết cụ thể nào bạn muốn tôi giải thích; có khá nhiều mã để chạy qua một câu trả lời.
Tôi có thể sẽ viết một plugin jQuery thực hiện điều này tại một số thời điểm, vì chỉ có một ví dụ. Tôi sẽ đăng nó ở đây khi tôi làm.
NB. setInterval() chỉ được sử dụng cho mục đích trình diễn. Ngoài ra, có các cảnh báo màu khác nhau (thành công, thông tin, cảnh báo, lỗi - xanh lục, xanh dương, cam và đỏ tương ứng).
Bạn có thể muốn thử "noty" https://github.com/needim/noty
Đó là * thực sự * dễ dàng để thực hiện. Ngay cả trang web này có một! – Blender
@Blender: "Thậm chí điều này" nghe có vẻ đơn giản vì * ngay cả * Stackoverflow đã khiến nó chạy. –
Hầu hết các nội dung trên trang web này khá đơn giản và đơn giản (và được mã hóa rõ ràng). – Blender