Mootools, các chiêu cơ bản (phần 2)

Đăng bởi Neo trong mục Hướng dẫn vào 25 tháng 10, 2008 | Comments

Tiếp tục với mootools từ tháng trước nữa Big Grin . Tuy là từ bài viết trước chẳng ai động viên hay khen ngợi gì, viết tiếp cho vui vậy... Phần 2 sẽ là vui 1 chút với ul li

1. Cách viết mã cũ

Mã HTML

<ul id="myList">
    <li id="li_1">
    	<a href="#" onClick="javascript:getId('1')">Get this ID</a>
    </li>
    <li id="li_2">
    	<a href="#" onClick="javascript:getId(2)">Get this ID</a>
    </li>
    <li id="li_3">
    	<a href="#" onClick="javascript:getId(3)">Get this ID</a>
    </li>
</ul>

Hồi mới học js mình cũng hay làm trò này, với 1 đoạn js nhỏ thì việc lấy id của từng thẻ li là điều đơn giản. Mã js như sau:

<script type="text/javascript">
	function getId(el){
		var listElement = el;
		alert("Bạn đã chọn element: li_"+listElement);
	}
</script>

Đó là cách đơn giản, nhưng có vẻ như không phải là chuẩn web bây giờ, vì nó dính mã JS vào trong HTML. Vậy cách bây giờ là thế nào?

2. Cách viết mã mới, xài mootools

Nếu bạn đã include mootools vào trong trang web của mình, vậy thì tại sao phải viết mã như cách trên nữa. Hãy xem mã HTML:

<ul id="myList">
	<li id="li_1"><a href="#">Get this ID</a></li>
	<li id="li_2"><a href="#">Get this ID</a></li>
	<li id="li_3"><a href="#">Get this ID</a></li>
</ul>

Hãy để ý có 1 chút thay đổi nhỏ, đó là đoạn onclick... đã không còn nữa. Và mã js như sau:

<script type="text/javascript">
	window.addEvent('load', function(){
		$('myList').getElements('li').each(function(el){
			el.getElement('a').addEvent('click', function(listID){
				alert("The ID of the list element you've chosen is: "+listID);
				}.pass(el.id)
			);
		});
	});
</script>

Bạn có thể thấy rõ ở trên tôi dùng getElements() để lấy tất cả thẻ <li> ở trong thẻ <ul> có id là myList. Mỗi lần bạn click vào thẻ <a> ở trong thẻ <li>, bạn sẽ thấy js alert lên id của thẻ <li> như cách trên, hãy nhớ cách dùng addEvent nhé.

Bạn có thích bài viết này?

Neo's picture

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 Big Grin. 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.

Trang chủ - Twitter