LA.NET [EN]

Aug 05

There are certain scenarios where you handle events in “pairs”. For instance, I guess we’ve all written JavaScript code for handling mouse over and mouse out events (which, btw, is also commonly known as hovering). Take a look at the following snippet:

<div>
Mouse over turns green! Mouse out turns black...
</div>
<script type="text/javascript">
    $(function() {
        $("div").bind("mouseover", function() {
           $(this).css("color", "green");
        });
        $("div").bind("mouseout", function() {
           $(this).css("color", "black");
        });
});
</script>


If you run the previous sample, you’ll see that putting the mouse cursor over will result in changing the div’s text color to green and removing it will turn it back to black. JQuery simplifies the code we need to write in these scenarios by introducing the hover method. Here’s how the code would look if we used that method:



<script type="text/javascript">
    $(function() {
        $("div").hover(
        function() { $(this).css("color", "green"); },
        function() { $(this).css("color", "black");});
});
</script>


The hover method expects two parameters: the first function will be invoked when the mouse enters the target and the second will be called when the cursor leaves that target.



Besides this helper,there’s also the toggle method. This method receives two or more functions and will call each function one at a time for each click done over any of the container’s wrapped set elements. The next snippet keeps changing the text color of all divs for each click:



$(function() {
    $("div").toggle(
    function() { $(this).css("color","green"); },
    function() { $(this).css("color", "red"); },
    function() { $(this).css("color", "blue"); },
    function() { $(this).css("color", "black");});
});    



Notice that there are no restrictions to the number of functions you can pass to the toggle method (and you’ll typically pass at least two when using this method.



And that’s all for now. Keep tuned for more on JQuery.

2 comments so far

  1. Rightevidence
    2:35 pm - 12-8-2009

    Light Influence,link wear guest farm motor attitude among deal environmental study vast elsewhere instruction sex lot cost technical example process question domestic lack civil whose therefore alternative wild brief alone absolutely slowly ministry foundation vast lean drop high air imagine youth spring change following derive coal unfortunately indicate plus face stage demand milk speech consumer nor near decision danger weight wear proposal beautiful frequently treaty favour leg stop control on trouble never note constant function directly editor date apparently bill drive red yes select defence newspaper ministry pass

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>