visit www.iGnani.com
Click here for the Video Tutorial of this article.
Click Here to view the Video related to this article!!! This article is a part of the series “ jQuery for Beginners ”. Click here for previous article... In this Video, let us see: Where & how to download the “jQuery library” - and also download it. Create a simple demo page -and write your first function in jQuery. Handle an event in jQuery. Add your first jQuery animation effect to the page. Use some jQuery functions. Downloading jQuery The first and foremost thing that that we will have toThis article is a part of the series “jQuery for Beginners”. Click here for previous article...
In this Video, let us see:
Where & how to download the “jQuery library” - and also download it.
Create a simple demo page -and write your first function in jQuery.
Handle an event in jQuery.
Add your first jQuery animation effect to the page.
Use some jQuery functions.
Downloading jQuery
The first and foremost thing that that we will have to do to get started is to download the jQuery library. To download, please visit the official jQuery website at www.jquery.com. This site always provides you with the most up-to-date code. Download the latest uncompressed version of the library directly from the homepage of the site. When you want to deploy the webpage you have developed on your production server, simply replace the compressed version of the library which is quite .
No installation is required and all you need to do is copy it on to the root folder or any folder on your site. Since JavaScript is an interpreted language, we need not bother about compiling or building the code. Simply add a reference to the file from the HTML document and you are all set.
Now that you are done with downloading the library, let us start to develop our first jQuery enabled web page.
Microsoft Visual Studio
Load up your editor, which ever you feel comfortable with. Lots of them are available such as Visual Studio 2010, Visual Web Express 2010, Adobe Dreamweaver, Coda, Aptana or anything you like. Some also use the developer tools that come with the browsers, and most used among them are the F12 Developer tool in Internet Explorer 9 and Firebug add-on for Mozilla Firefox 3.5+.
We will be using Visual Studio 2010 for all our demos. If you don't have one and don't want to invest money in getting Visual Studio, then don't worry, you still have an option with Visual Web Developer 2010 Express for free.
You can get it at http://www.microsoft.com/visualstudio/en-us/products/2010-editions/express directly or try searching through any search engine which will take you to the site. Though you will find a lot of different versions, please select Visual Web Developer 2010 Express. Download and install your copy.
However, for those of you who do not want to use Visual Studio or Visual Web developer, you can just execute these demo applications as you do with any of your web pages. Be free to use the editor of your choice.
Let us start with our web page now.
Demo Web Page 1
Open the visual studio 2010 and create a new project. Its not required to create a new project, but it makes our lives for managing the files that we create easier.
Click on “File Menu” item, from the dropdown & select “New” and then “Web site”.
In the "New Web site" window that opens up, Select “Visual C#” From the Installed templates pane. I want to mention that all our demos will be in C#. From the available templates, select “ASP.net Empty Web Site project”, and give it a name. I will call it as “jQueryDemo1”, and give it a folder where you want to save it. Leave it to default if that is where you save all your projects. Click on OK. This creates an Empty ASP.net Web Site project.
Now you can see a pane on the right hand side of the screen with a heading "Solution Explorer". If you don't see it, you can open it by clicking on the “View” Menu Item and then by clicking on the “Solutions Explorer” item. Remember this "Solution explorer", we will be using it for a lot of things.
Now if you see the solution explorer, you can find a tree with few items. The first node at the top is the Solution file, which is created automatically by default with the same name as that of the project. A solution is a file which can link more than one projects together. Next you can see the ASP.net Empty Web site project, and it contains a single file called web.config. You can leave it for now or delete it.
Include the jQuery Library into your Project
First you include it into your project, which makes it easier to include it into your webpage. But remember its not necessary to include it into the project. To include the library into the project, first thing that we need to do is, in the solutions explorer, right click on the project, select "Add existing item". When the dialog box appears, go to the folder where you saved the earlier downloaded jQuery library file. Select the file and click Add. This will add the library into your project and now your are ready to create your first jQuery powered HTML file.
Create an HTML page
Let us start by adding a new HTML page. To do this, go to Solutions Explorer, right click on the project, from the sub menu select “Add New Item”. From the list of templates in the middle pane scroll down to HTML page template. Select it. In the Name box below, give it a name. I will call it – “Demo1.htm”. click on Add. This is what you will see in the newly created HTML page.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
Add a reference to jQuery Library in your page
The first thing that you need to do now in order to work with this jQuery library is to reference the jQuery library in our html file. To do this, simply select the library in the solutions explorer, drag & drop it below the <title> tag and above the closing Head tag. Visual studio will add the reference in your html page. This is how your code should look like now.
<title></title>
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
For those of you who are using other editors, please add the script tag as mentioned above. Also make sure you add the proper path to the jQuery library.
In our case, since the library is stored in the root of the project, just the name will do and does not require any path to be specified. The other attribute is the type attribute. The type of this script reference is javascript, which is denoted by the word “text/javascript”. Now that we are done with all the plumbing work, let us add some contents into our html page.
Add HTML & CSS code to your page
Let’s add some HTML and CSS code and create our demo page.
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.6.1.min.js" type="text/javascript"></script>
<style type="text/css">
#MessageBox
{
border-style:solid;
border-width: 3px;
border-color: Green;
background-color: Gray;
width: 400px;
font-size:large;
text-align: center;
}
</style>
</head>
<body>
<a href="#">Click Me!!!</a>
<div id="MessageBox">
Hello there. Welcome to jQuery World!!!<br />
Click the link above and you will see this message fade away!!!
</div>
</body>
</html>
Add the text that is displayed in Blue colored font. In the Head section a Style is added that formats the div that contains the actual text message. Below in the Body section, an Anchor tag is created with “Click Me” as the text. That is about the page. Go and execute it and see how it appears.
To browse, all you need to do in visual studio is go to Solution Explorer, right click on the html page in the tree and select “View in Browser” option from the shortcut menu.
Here you go, you see the html page with the text message you wanted to show and above it a link saying "Click Me!!!". The text message and the box around it is formatted.
Go ahead and click it!!!
Nothing happens because we have not written anything for it to do. let us now go ahead and add some jQuery code.
Write your first jQuery Code
Always use an external file to write the jQuery code, but to keep it simple i am writing the code in the same page itself. The jQuery code is provided below for you:
</style>
<script type="text/javascript">
$(function () {
});
</script>
</head>
As always while writing any JavaScript code, it should be embedded inside a Script tag and the same applies here..
Also the first thing that you need to know while writing jQuery code is that we should always start with the $ symbol or the jQuery symbol. Then open a parenthesis, and type function, follow it with a open and close parenthesis. Then open & close curley brackets and its not all that, remember after the jQuery symbol, we opened a parenthesis, now we will have to close it and finally end the statement with a semicolon as with the JavaScript language. With this you created your first empty jQuery function. Remember this, you will be writing this a lot many times in future.
Now all our code will be within these curley brackets. Any code that we write within these brackets will be executed only when they are referenced, that is only after the page is loaded and executed.
Now let us get back and write the code for what we started out to achieve. That is, when we click on the link we need to fade out the message.
So, let us start again to write the jQuery code, now within the curley brackets, with the $ sign and open parenthesis. Now the first this is to handle the click event for the anchor tag. Remember, we need to fadeout the message when we click on the anchor tag. For this simply follow the code below.
<script type="text/javascript">
$(function () {
$('a').click(function () {
});
});
</script>
In order to access any tag it’s the same as do in CSS. $(‘a’) and you have the anchor tag. That’s the power of jQuery. Once you have access to the tag, continue it with the remaining code and you have the click event ready. Now all that is left is to add the animation.
<script type="text/javascript">
$(function () {
$('a').click(function () {
$('#MessageBox').fadeOut();
});
});
</script>
The same way as you accessed the anchor tag, you have to access the div tag. Now we will not access the div tag by using the div directly, instead we will use the id which is “MessageBox”. Once you have access to the id, call the fadeout() function. That is all.
Now browse the code in the browser. Click on the link and you can see the message fading out.
Did you find the message fading out fast. The let us control the speed. Go back to the code and pass an argument to the fadeout function. Remember, it takes the time interval in terms of milliseconds. Let us try fading the message over a period of 3 seconds. Modify your code as below:
$('#Message Box').fadeout(3000);
Now go back to the browser and refresh the page. Then try clicking on the link again. you can see the message fading slowly. It now takes a complete 3 seconds to fadeout. It was very simple isn’t it. Now try clicking on the link again, since the message is already hidden, nothing happens. How about to toggle the appearance with ever click. That is when I click on the link first, message should fadeout, then if I click on the link again it should show the message back in the same speed. As a programmer, you might be thinking about using conditions and what not. Now let us go and add some more functionality and see how it can be done using jQuery. Change your code as below:
$('#Message Box').fade Toggle(3000);
That is all is required. Go ahead refresh the page in the browser. Click the link. Now every time you click, you can see the message toggle between hidden and visible states.
Now this should be sufficient for this chapter. The article is explained in a more detail in the video, check it out for you to have a class room feel of learning jQuery.
Click here for the Video Tutorial of this article.
visit www.iGnani.com
No comments:
Post a Comment