jQuery and a little bit of javascript

 

I’m still working on the LiveResume website, just something I’m playing with in my free time, no I’m not looking for a job Smile just have an idea that I’ve not seen anywhere else (no I’m not telling you what it is until the site is live Winking smile )

This little post is to demonstrate how effective the jQuery library is.

Firstly lets have a look at the html to see what we are trying to achieve.

image

Now, I’m not using jQuery.ui tabs (yet…); so I want to handle the styling of the active tab.

I’ve got a style called highlight that does this.

The code below shows how effective jQuery is at removing the style from all anchor elements and adding the style to the clicked anchor.

image

Let’s break it down.

The first two commented lines are to enable intellisense in visual studio.

After this we create a variable menuHandler, I’m using the revealing module pattern for this.

image the return function exposed the init function publically. I’ll be adding more functions to this menuHandler as I go along.

 

image what I’m saying here is select all anchor elements that are children of the element with id=”topmenu” and add an event handler to the click event.

image this line removes the highlight class from all the anchors in the same topmenu element.

image this line adds the style to the clicked element.

image this is somewhat equivalent to an onload event handler for the page (except it doesn’t wait for images… see jQuery docs); what I’m doing in the load handler is creating an instance of the menuHandler function and calling the init method on it.

 

I can recommend the book: jQuery in action if you wish to get started or improve your jQuery.

Comments are closed