Week 8: jQuery Plugin Basics

jQuery is a javascript library that simplifies the code designers and developers need to write for  various types of interactivity, form validation and animation. It works in combination with your HTML and CSS, and generally is plug and play.

Download the main plugin: jquery-1.7.2.min.js

The main library must be included inside the head of your html document using the script tag. You’ll notice a few ways of doing this when looking at other peoples code, for example:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script> this links to version 1.4.4 of the jquery plugin hosted on google’s server.

<script  type=”text/javascript” src=”_js/jquery-1.7.2.min.js”></script>this would link to the latest version of the jquery plugin inside a folder called _js which would be within the sites root directory. This tag also includes the type attribute which simply tells the browser that the script being used is javascript.

With the main plugin attached to your html document you can then write your own simple functions or attach functions developed by others.

For example if you also attach the UI plugin:
<script type=”text/javascript” src=”_js/jquery-ui.min.js”></script>

You can then write a simple function to animate rollovers by switching between two classes

<script type=”text/javascript”>
   $(document).ready(function(){ // this waits for the document to finish loading before allowing any other function to run

      $(“a”).mouseenter(buttonHover) // this tells the browser that when the mouse enters any <a> tag to run the function buttonHover.
         function buttonHover(){
         $(this).switchClass(‘button’,’button_hover’,500);
         } // this function switches the class button with buton_hover, over 500 milliseconds
    
      $(“a”).mouseleave(button) // this tells the browser that when the mouse leaves any a tag to run the function button.
         function button(){
        $(this).switchClass(‘button_hover’,’button’,500);
        }    // this function switches the class button_hover with button, over 500 milliseconds
   });
</script>

For this to work you’ll also need styles for your two button classes

<style>

   .button {color:#ccc; background-color: #FFF;}

   .button_hover {color:#666; background-color:#FDC758;}

</style>

And any of the links you want to have this effect applied would need to look like this

<a href=”SOMEFILE.html” class=”button”>Your Text</a>

Useful Plugins