Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > [Tips] hiển thị thông báo trên Browser tab
[Tips] hiển thị thông báo trên Browser tab
Nguyễn Trung Hiếu
Share Code Web Company 2015

[Tips] hiển thị thông báo trên Browser tab

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.

Đầ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.
notification demo

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.
favicon notification

notification demo

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

notification favicon js

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.

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}