Mootools, các chiêu cơ bản (phần 1)
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.
Phần này, bạn sẽ biết cách làm sao để lấy được DOM element theo ID, cách dùng getStyle() và setStyle() (để lấy và gán style cho css), toInt() để chuyển từ kiểu chuỗi (string) sang kiểu số (number) và một số ví dụ nhỏ sẽ giúp bạn dễ hiểu hơn về cách viết javascript với Mootools.
1. Thêm Framework vào trong trang web của bạn
Đầu tiên, hãy download bản mootools mới nhất về máy, và thêm đoạn mã sau vào trong thẻ <head></head>
<script type="text/javascript" src="mootools.svn.js"></script>
Vậy là bạn đã có thể sử dụng các tính năng của Mootools trong trang web của mình
2. Lấy DOM element theo ID
Để lấy được DOM element theo ID, bạn có thể sử dụng dòng lệnh dưới
var element = $('myElement');
Dòng lệnh sẽ chọn phần tử (element) có ID là myElement trong trang của bạn
Nếu bạn đã quen với javascript thì dòng lệnh trên tương đương với
var element = document.getElementById('myElement');
Bây giờ, sử dụng $$ bạn sẽ lấy được một mảng các element trong DOM element có ID nào đó
$$('#myElement li.myListElement');
Ví dụ trên sẽ trả về một mảng tất cả các thẻ <li> mà có class="myListElement" nằm trong DOM element
có ID là myElement
3. setStyle() và getStyle()
Sau đây bạn sẽ biết 2 phương pháp cơ bản để có thể lấy và gán thuộc tính cho một element nào đó (như chiều rộng, cao, màu nền...). Để gán thuộc tính, bạn có thể làm như sau:
$("myElement").setStyle("height", "200px")
Nếu bạn muốn gán nhiều thuộc tính:
$("myElement").setStyles({
background: "#00FF00",
border:"solid 1px #cccccc",
width: "500px"
height: "200px"
});
Để lấy thuộc tính, bạn xem đoạn mã sau:
$("myElement").getStyle("height")
Đoạn mã trên trả về giá trị chiều cao của element có ID là myElement, ví dụ 200px, nếu bạn chỉ muốn lấy số (200 chứ không phải chuỗi 200px) thì bạn sử dụng đoạn mã:
$("myElement").getStyle("height").toInt()
Và như vậy bạn sẽ có được giá trị trả về là số 200
4.Vài ví dụ cơ bản
Để viết javascript sử dụng Mootools bạn phải sử dụng đoạn mã sau
<script type="text/javascript">
window.addEvent('domready', function() {
//Các đoạn mã của bạn sẽ ở đây
});
</script>
Ví dụ, một đoạn script sẽ hiển thị chữ "Hello Neo" khi bạn click vào link có id là myElement, đoạn mã như sau:
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
alert('Hello Neo!');
});
});
</script>
Và mã HTML của bạn sẽ là:
<a href="#" id="myElement"> Click vào đây </a>
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:
<div id="myLayer">
<a href="#" id="myElement">Thay màu nền</a>
</div>
Như bạn thấy, bạn không hề gọi bất kì 1 hàm javascript nào trong thẻ <a>, bây giờ hãy xem đoạn javascript
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
$('myLayer').setStyle('background', '#DEDEDE');
});
});
</script>
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:
<script type="text/javascript">
window.addEvent('domready', function() {
$('myElement').addEvent('click', function() {
var currentBgColor = $('myLayer').getStyle('background');
if(currentBgColor==''){
$('myLayer').setStyle('background', '#DEDEDE');
} else {
$('myLayer').setStyle('background', '#FFFFFF');
}
});
});
</script>
Đ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.
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.