Sơ qua về mootools [theo hiểu biết cá nhân]: Đây là một javascript framework dành cho ai phát triển javascript [từ người mới học đến các chuyên gia]. Mootools cho phép người lập trình viết các đoạn mã javascript đơn giản hơn, mạnh mẽ hơn, mềm dẻo hơn và tương thích với hầu hết các trình duyệt web.
Hiện nay, mootools đã trở nên rất phổ biến, nhiều người ở VN cũng đã dùng tới nó, bạn không cần phải hiểu rõ nhiều vẫn có thể tạo ra các đoạn code "như ai". Nhưng nếu bạn muốn hiểu rõ hơn thì có thể xem mootools documents hoặc theo dõi loạt bài viết về mootools của tôi.
Click vào đây
Ví dụ 1 : Thay đổi màu nền
Bây giờ chúng ta sẽ thử thay đổi màu lền của Layer có ID là myLayer
Mã HTML:
Thay màu nền
Như bạn thấy, bạn không hề gọi bất kì 1 hàm javascript nào trong thẻ , bây giờ hãy xem đoạn javascript
window.addEvent['domready', function[] {
$['myElement'].addEvent['click', function[] {
$['myLayer'].setStyle['background', '#DEDEDE'];
}];
}];
Ví dụ 2 : Thay đổi và gỡ bỏ màu nền
Bây giờ, chúng ta sẽ sửa đổi ví dụ 1 một chút. Ở ví dụ 1, khi bạn click vào Thay màu nền thì nền sẽ đổi thành màu #DEDEDE, và bạn không thể quay về màu nền cũ được. Chúng ta sẽ sửa sao cho khi click vào Thay màu nền, nếu nền đang là màu trắng [lúc đầu] thì sẽ đổi thành màu #DEDEDE và ngược lại [nếu nền đang là #DEDEDE thì sẽ chuyển thành màu trắng]. Mã HTML vẫn giữ nguyên như ví dụ 1 và mã javascript bạn thay đổi như sau:
window.addEvent['domready', function[] {
$['myElement'].addEvent['click', function[] {
var currentBgColor = $['myLayer'].getStyle['background'];
if[currentBgColor=='']{
$['myLayer'].setStyle['background', '#DEDEDE'];
} else {
$['myLayer'].setStyle['background', '#FFFFFF'];
}
}];
}];
Đoạn code trên rất đơn giản, nó giúp bạn hiểu được bước đầu làm việc với mootools như thế nào.