JQuery Tabs

First time when i was asked to design user interface for web application using J Query, i had no idea how to use J Query for tabs. So my first step was search in Google for Hello world in J Query. i should say to you this fist, understanding basics of any programming language is can be done greatly by writing hello world application. But believe me, JQuery is different, you may not get better understanding of its behavior by just writing hello world program of it. So here i am explaining you how i got in to the concepts of JQuery and Implemented advanced JQuery tabs.

Following are the sites where i started learning J Query.

This is a great tutorial, you might find it difficlut to follow this tutorial if you are new to user interface programming. I will be explaining this tutorial in get the work done for your project!.

http://www.jankoatwarpspeed.com/post/2010/01/26/dynamic-tabs-jquery.aspx

Following 15 video tutorials are also best to get the concepts in to your mind

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

Following 3 videos also helped me to a greater extent.

http://www.youtube.com/watch?v=Ggs1Nb7G7uE

Now, Lets start learning JQuery.

First of all , For this tutorial, JQuery is all about event handling in the user interface, this means that, when you click on something in the user interface, JQuery will catch that event and perform relevant tasks. What are these relevant tasks, relevant tasks means that adding new item to user interface, remove existing item from the user interface. these are the tasks i am referring to.

Also , i would like to address a one of the beauty of JQuery. it is that, if you are using MVC architecture for your web application then, you may find it very useful to click events to retrieve pages from a server.

IF you are a bigginer, i understand the problem you are facing when trying to implement JQuery tabs. most of the tutorials explain how to implement JQuery part, but they dont specifically say how to integrate JQuery, your web site code and .css and other .js libraries to get a working product. I am here to solve that problem!

http://pastebin.com/5rBzdvv3

This is the JQuery code of my application that i will be explaining to you.

If you are familiar with Event Driven Programming, Then it will help you to understand J Query Better. Event Driven Programming is, Program is driven by an event that you perform on the screen with the use of Mouse and keyboard and other input devices. Using Mouse , you can perform click event. J Query can capture those events that you perform on your browser and, than perform tasks on the use interface according to the events.

Following is a simple example of above description.

Let's start with following tutorial.

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-5/

you can download source code of this tutorial too from the above url.

Let's try to understand this source code.