1. An "Obtrusive" way to implement it
Before to explain how to do it with MooTools, I think it's better take a look at the following HTML code:
<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><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>
This is a simple list with some list elements with id "li_1", "li_2", "li_3". Each list element contains within a link which calls, with an event onClik, a Javascript function getId(). This function takes in input the number related to the list element ID, within which the link is contained, displaying a simple alert window with the ID of the element you've chosed. The result is something like this:
Javascript code is something like the following:
<script type="text/javascript">
function getId(el){
</script>
function getId(el){
var listElement = el;
alert("The ID of the list element you've chosen is: li_"+listElement);
}alert("The ID of the list element you've chosen is: li_"+listElement);
</script>
...it's simple and clear if you have basic javascript notions. But why this code is obtrusive?. Because, withing HTML code, it contains a call to the JavaScript function getId():
<a href="#" onClick="javascript:getId('1')">Get this ID</a>
It's not wrong. But it's better to separate HTML code from JavaScript code. How you can do it? Read more...
2. The unobtrusive way to implement it using MooTools
Ok, now we are ready to see how we can implement the same script using unobtrusive code with MooTools. First, take a look at the HTML code:
<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><li id="li_2"><a href="#">Get this ID</a></li>
<li id="li_3"><a href="#">Get this ID</a></li>
What's changed from the step 1? I removed onClick event within each link:
<li id="li_1"><a href="#" onClick="javascript:getId('1')" >Get this ID</a></li>
Than, how changes JavaScript code to get the ID of the element? First, remember to add a link to MooTools framework in the <head> tag of the page:
Copy and paste the following code within the <head> tag:
<script type="text/javascript" src="mootools.svn.js"></script>
... and now copy, below the previous code, the following:
<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>$('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)
);
});
});
How you can see, I used getElements() method to get all <li> tags within <ul> list with ID "myList ". Every times you click on <a> element contained into a <li> tag, the function display an alert window with the ID of the element you've chosed, passing the ID using .pass(el.id) method. It's all and it's very simple!
Take a look at the source code:
Download source codeAdd a comment for other info or request!
Related Content
MooTools Basic Tips for Web Designer (Lesson 1)
No comments:
Post a Comment