Hướng dẫn dùng myelement JavaScript
|
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ẻ 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 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ẻ 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 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: Và mã HTML của bạn sẽ là: 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 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 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: Đ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. |
