Notimoo: Hiển thị thông báo với mootools
Một plugin nhỏ (4kb) lấy ý tưởng từ phần mềm 'Growl' chạy trên hệ điều hành MAC OS. Notimoo giúp bạn (nhà phát triển web) đưa ra thông báo tới người sử dụng web.
Notimoo có khả năng tùy biến cao, sử dụng khá dễ dàng. Các thành phần mà bạn có thể tùy biến gồm có:
- Thông báo xuất hiện tự động hay không
- Thời gian hiển thị thông báo
- Vị trí của thông báo
- Hiện tiêu đề hay không
- Độ trong suốt của cửa sổ thông báo
Cách sử dụng
Đầu tiên, bạn cần có thư viện Mootools (bản 1.2.1 hoặc cao hơn) và plugin Notimoo, sau đó thêm vào thẻ <head> của website
<link rel="stylesheet" type="text/css" href="css/notimoo-v1.1.css" /> <script type="text/javascript" src="js/mootools.1.2.1.js"></script> <script type="text/javascript" src="js/notimoo-v1.1.js"></script>
Theo như demo của tác giả, khi click vào thẻ <a> thì sẽ hiện lên thông báo, mã HTML chỉ cần như sau:
<a id="codeOneLink" href="#">Run this code</a>
Thêm hàm javascript như sau:
var demoCode = $H({
demoCodeOne: function() {
// Trước tiên bạn cần tạo một instance mới của Notimoo
if (!this.ManagerOne)
this.managerOne = new Notimoo();
// Hiển thị thông báo đơn giản
this.managerOne.show({
title: 'Testing notification',
message: 'This is a sample notitication showing how easy is to use Notimoo.'
});
// Hiển thị thông báo chỉ mất đi khi bạn click vào thông báo đó
(function() {
this.managerOne.show({
title: 'Testing notification',
message: 'This notification will not disapper on its own. You must click on it to close.',
sticky: true
});
}).delay(2000, this);
// Thông báo với nhiều chữ trong message
(function() {
this.managerOne.show({
title: 'Testing notification',
message: 'This is a notification with a long text. If the message you provide does not fit into the notification size, Notimoo magically auto resize its height so all the content is visible.'
});
}).delay(4000, this);
}
});
Bạn có thể thêm đoạn mã javascript trên vào trong thẻ <head> của website hoặc tách riêng vào 1 file .js và thêm nó vào trong thẻ <head>. Cuối cùng là mã javascript để hiện thông báo khi click vào a#codeOneLink
window.addEvent('domready', function(event) {
$('codeOneLink').addEvent('click', function(event) {
event.stop();
demoCode.demoCodeOne();
});
});
Bạn có thích bài viết này?
Neo
Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web 
. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.