Bài viết hướng dẫn cách hiển thị notification trên browser tab thường hay được các trang mạng xã hội sử dụng
Sử dụng Document Title
Chúng ta sẽ bắt đầu bằng việc gắn số thông báo trên tiêu đề trang giống như Facebook hay Twitter vẫn dùng.
Trong thực tế có rất nhiều cách để chúng ta có thể làm được việc này, trong bài này, chúng ta sẽ sử dụng javascript để làm việc này.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> var count = 0; var title = document.title; function changeTitle() { count++; var newTitle = '(' + count + ') ' + title; document.title = newTitle; } function newUpdate() { update = setInterval(changeTitle, 1000); } var docBody = document.getElementById('site-body'); docBody.onload = newUpdate; // Stop button function stop() { clearInterval(update); } var btnStop = document.getElementById('stop'); btnStop.onclick = stop; </script> |
Đầu tiên sử dụng biến count để đếm số notification.
Hàm changeTitle() sẽ làm nhiệm vụ thay đổi phần tiêu đề trang web, với mỗi khi có thông báo (notification) sẽ được tăng thêm 1.
Hàm newUpdate() sẽ làm nhiệm vụ cập nhật lại tiêu đề này với thời gian 1000 mili giây 1 lần.
Sử dụng favicon
Có thể sử dụng favicon để làm cho phần notification của chúng ta thêm đẹp hơn bằng đoạn mã sau.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script> var icon = 'img/favicon.gif?v3'; var iconNew = 'img/favicon-dot.gif?v5'; // var iconAnimate = 'img/favicon-dot-animated.gif?v4'; // does not work in Chrome function changeFavicon() { document.getElementById('favicon').href = iconNew; // document.getElementById('favicon').href = iconAnimate; // does not work in Chrome } function newUpdate() { update = setInterval(changeFavicon, 3000); setTimeout(function( ) { clearInterval( update ); }, 3100); } var docBody = document.getElementById('site-body'); docBody.onload = newUpdate; // function reset() { document.getElementById('favicon').href = icon; } var btnReset = document.getElementById('reset'); btnReset.onclick = reset; </script> |
Sử dụng favico.js
Cuối cùng, sử dụng thư viện javascript gọi file favico.js được phát triển bởi Miroslav Magda
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<script> var favicon = new Favico({ position :'up', animation :'popFade', bgColor :'#dd2c00', textColor :'#fff0e2' }); var num = 0; function generateNum() { num++; return num; } function showFaviconBadge() { var num = generateNum(); favicon.badge(num); } function newUpdate() { update = setInterval(showFaviconBadge, 2000); } var docBody = document.getElementById('site-body'); docBody.onload = newUpdate; // Stop button function stop() { clearInterval(update); } var btnStop = document.getElementById('stop'); btnStop.onclick = stop; </script> |
Tổng kết
Như vậy chúng ta đã có thể tạo số thông báo trên browser Tab cực kỳ tiện lợi thông qua một vài đoạn code đơn giản. Hy vọng tip này sẽ giúp ích cho bạn trong các thiết kế sau này.
