jQuery is one powerful tool for web developers. It offers a host of ways to make rich web applications even better, and easier to develop. There is no argument from us here at SOTC against jQuery and in fact we have a rich history of jQuery tutorials. But jQuery has a lot to offer other than just code helpers. Today I am going to show you something else jQuery has to offer, the jQuery UI.
Before we get started, I just wanted to note that I am using jQuery 1.4 and jQuery UI 1.8
So let's start with a problem. Say we want a really simple way to create an image previewer. Something that will popup an image in an internal window. It is a fairly simple issue, and one that can be solved quite easily using the jQuery UI components. In this case, we are going to be using a jQuery Dialog component. One note, however, is that we don't include an loading indication in this example, but that should be easy to add on your own. Go ahead and click on the links below to see an example of our solution.
(Click to see the images!)
jQuery UI always begins with HTML. Before you can popup anything, we have to have the HTML to act as our window. Now, looking over the jQuery docs, it can sometimes be a little vague, so here is what our dialog HTML will look like:
<img id="image" src=""/>
</div>
The div is our dialog window, and anything inside of it will be inside the dialog, i.e. its contents. For now we want to hide the div, so we can show it later. For this simple tutorial, I went ahead and just added the css at the element level. Notice the image does not have a src set. This we will set on the fly. Speaking of, now we have to get to our Javascript.
For the Javascript, I decided to put most of our code inside a function, so we can call up an image popup anywhere we want. Remember, reusability is good code. So here is the function I have come up with:
//Get the HTML Elements
imageDialog = $("#dialog");
imageTag = $('#image');
//Split the URI so we can get the file name
uriParts = uri.split("/");
//Set the image src
imageTag.attr('src', uri);
//When the image has loaded, display the dialog
imageTag.load(function(){
$('#dialog').dialog({
modal: true,
resizable: false,
draggable: false,
width: 'auto',
title: uriParts[uriParts.length - 1]
});
});
}
Most of what we have here is pretty self explanatory. We pass in a URI for our image, then set our image src to that URI. Along the way we split the URI up, so we can set the dialog title to the image file name. The only tricky part is when to display the dialog.
In order for the dialog to correctly display, as in correctly positioned and sized, we have to wait for the image to load, then display the dialog. The dialog function itself can take in a few parameters, in the typical jQuery object/array form. For our purposes we pass in only a few things.
The first "option" we pass in is a modal option. When set to true, a background pops up with our dialog, preventing the user from doing anything while the dialog is up. The next set of options make the dialog stay in place and stay the same size. For this particular job, we don't need the user to resize or move the window.
The next option we have to set is the width. Normally the width is defaulted to 300px, so we have to set it to auto, so it resizes with our content. Lastly we set the title of our dialog window to the file name of the image displayed. You can really change the title to be anything you want, but I thought using the file name would be at least informative.
So now that we have our function, but now how do we use it. Well for this tutorial, we are going to create a few links that open some images. The anchor tags look like so:
href="http://www.switchonthecode.com/sites/all/themes/sotc/images/header_logo.gif">
Image 1</a>
<a id="image2"
href="http://shannaro.files.wordpress.com/2009/04/explosion.jpg">
Image 2</a>
<a id="image3"
href="http://thefuturebuzz.com/pics/icanhascheezeburger/technician%20cat.jpg">
Image 3</a>
What we have here is a set of pretty strait forward links. We are going to utilize jQuery to turn these links into dialog popups. Here is how we are going to do it:
$('body a').click(function(event){
event.preventDefault();
PreviewImage($(this).attr('href'));
});
});
That's it. What we are doing in this code is taking every anchor tag inside the body and creating a click event for it. First we have to stop the anchor from actually going to the image in our browser, i.e. prevent the default behavior. Once we have everything locked down, we display our dialog, passing in the link's href. This makes it so we can use the anchor tags normally, but change the functionality behind them.
So that is a basic, practical use for jQuery UI. This is just one of the many, many ways you can use the components offered by this extensive UI library. I would suggest taking a look at the documentation and see what awesome things there are for yourself. This is it for this tutorial, more UI to come soon. Just remember, when you need coding help, all you have to do is Switch On The Code.
04/30/2010 - 17:49
In the function why do you define
and then use
You could have just called
05/06/2010 - 19:11
Excellent Point Rixius. As a personal rule of thumb, I do this because scope can often times be tricky in Javascript, as some of our tutorials touch on. But after a short test I find that the scope of our variable is just fine in this case. Thanks for pointing that out.
05/10/2010 - 13:02
Welcome, of course; I really love javascript, and your tutorials are amazing, so i'm happy to be able to help where I can.
Need more podcasts though >.>
05/05/2010 - 13:54
i enjoyed decoding this one untili figured it all out, lol.
@rixius, i think this may have been an oversight since he did use the 'imageDialog' variable at all in the rest of the example, but i feel pretty certain that either option you suggested would have yielded the same result
i am confused about when to use function(e) and when to use function(event) i assume that 'e' and 'event' may just be place holders and that it might work the same if i passed in an argument of 'my_event' like this function(my_event){}
perhaps you guys can can enlighten me?
05/05/2010 - 17:11
Yes, you are correct, what you pass in the function() is simply the variable that gets assigned the event object.
you could even do
});
but that's a little excessive >.>
11/18/2010 - 09:33
Very useful thanks. I would like to use this for different product images so that they can be enlarge. However I noticed that after a link has been click and the window closed, if I try to click the same link again then the window refuses to open. Is there any way to correct this?
02/23/2011 - 17:21
I was having the same problem. To correct it, I added a check to see if the dialog had already been initialized or not. If it has you can simply call dialog('open'). Not sure if this is the cleanest way but worked for me...
//Get the HTML Elements
imageDialog = $("#dialog");
imageTag = $('#image');
//Split the URI so we can get the file name
uriParts = uri.split("/");
//Set the image src
imageTag.attr('src', uri);
if (!$('#badialog').is(':data(dialog)')) {
//When the image has loaded, display the dialog
imageTag.load(function() {
$('#dialog').dialog({
modal: true,
resizable: false,
draggable: false,
width: 'auto',
title: uriParts[uriParts.length - 1]
});
});
} else {
$('#dialog').dialog('open');
}
}
02/12/2011 - 17:07
I found a great page that give numerous downloadable examples of how to change the text inside an anchor using jQuery. They are really helpful for web 2.0 and web 3.0 sites.
http://www.ajaxera.com/jquery-change-text-in-anchor/