jQuery UI: Web Page Dialogs
September 03, 2009 12:29 PM by Greg Beddow Add your comments
Sometimes you run across something so simple, so easy & beautiful, that you kick yourself and say why haven't I been using this all along? I'm talking about dialogs on your web pages. The kind that provide your reader with "extra" information about something -- not that JavaScript alert() ugliness -- the kind that offer substance, and a bit of style, to your site.
But before getting down to specifics, let's look at the traditional way to expose further information about a phrase, image, or other element of your page: a link to another page:
Click the link, another web page appears. Nothing special. Tried-and-true method for organizing & navigating information on the web, right? The way to get the job done, especially if what you link to is a complex page with its own set of links to other pages, etc. But what if you just have a little more info to expose? Again, you link to a page...or do you? The thing is, the new page is likely a dead end, so you have to click the Back button to continue where you left off. From a visual and cognitive standpoint, you've just imposed two big contextual shifts on your audience: navigate forward to an entirely new page, then navigate back. Sure, you can get away with it occasionally, but after a few of these many people will tire of it and move on.
But what if the "link" keeps you on the same page, and displays a small dialog containing the additional info?
Click the link, the dialog appears (obscuring part of the page, but you can move it), you interact with it briefly, then dismiss it. Still a contextual shift, yes, but a much smaller one.
Until a few years ago this sort of thing was possible on web pages using HTML iframes and such, but cumbersome to implement and prone to glitches in different browsers. These days, however, there are several JavaScript libraries available to ease that pain considerably. Let's take a look at one of them, jQuery UI, based upon the excellent jQuery library.
If you've never used jQuery, you really owe it to yourself to give it a go. Its style may throw you a bit at first, but once learned, rewards you over and over. jQuery UI takes it a step further with highly interactive widgets (including dialogs), animation and more. To whet your appetite and demonstrate how little it takes to get started, here's the entire HTML and scripting for that screen shot above:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog();
});
</script>
</head>
<body>
<div id="dialog" title="Dialog Title Goes Here">Dialog contents go here.</div>
</body>
</html>
That's it! A hand-full of code. Considerably less code is required, actually, if you download the jQuery UI package (more on that later) instead of referencing the individual files on their site. And of course everything in jQuery UI is stylable with CSS. In fact, as we'll see, you can even style many elements before you download jQuery UI!.
So let's look at where you might put some of this goodness to use:
Here's a portion of a web page, with the user about to click on the link "great remodeling project". Instead of linking to another page, how about displaying a jQuery UI dialog with more info?
Now, for a quick demonstration like we did above, it's OK to load the jQuery UI files from their site. But for a production site you really want to host these files on your own site. And because jQuery UI is highly modular, it gives you the opportunity to use only the files you actually need, and even combine those files into a single JavaScript file prior to the download. To top it off, they even let you customize the CSS before downloading. Nice! Here's a portion of what their customization screen looks like at the jQuery UI download page when you choose to design a custom theme:
If you're not interested in using a custom theme you can skip this step of course, but here I decided to make color settings that harmonize with the rest of my site, then clicked Download Theme to bring me back to the main download page. (Note that the resulting CSS file will contain a link back to this page where you can return to make further refinements to your custom theme and download again. Talk about catering to your user!)
Back on the main download page, choose the jQuery UI modules you need based upon the features you'll be using and click the Download button. The site then builds and downloads a zip file containing a single customized, minified JavaScript file containing the modules you chose. If you chose a custom theme there's also your custom CSS file. In addition there are some other files in the zip package which, for our purposes here, we'll ignore. Gather up the files you need and upload them to your site.
Let's take a look at what we have so far. Here's the HTML like before, but for our customized jQuery UI download and with a dialog that opens to display an image:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({width:534,height:450});
});
</script>
</head>
<body>
<div id="dialog" title="Kitchen Remodel">
<img src="P1020427.jpg"/>
</div>
</body>
</html>
And here's what the page looks like now:
Now let's see if, instead of a single image, we can spruce things up by displaying a slideshow in the dialog. First I'll show how it's done for the CMS / host for my site, Webvanta, then show a simpler, more generic version based on Flickr that you can use anywhere. Here's the Webvanta version:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({width:560,height:450});
});
</script>
</head>
<body>
<div id="dialog" title="Kitchen Remodel">
<div class='span-2 prepend-1' style="display: none;">
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
<w:assets:each tag='kitchen-remodel'>
<w:if_rendition name='thumb'>
<li><a class="thumb" href="<w:path rendition='medium' />">
<img src='<w:path rendition="square_thumb" />' />
</a></li>
</w:if_rendition>
</w:assets:each>
</ul>
</div>
</div>
<div id="outer_wrapper">
<div id='wrapper'>
<div class='container'>
<div id='content_area' class='clearfix'>
<div class='span-16 last'>
<div id='empty_gallery' style='display:none'>
<h2>No images are currently in the gallery</h2>
<p>Upload them via Content > Images and Files.</p>
<p>When uploading, select the "gallery" tag and check "create thumbnails"</p>
</div>
<div id='container'>
<div id="gallery" class="content">
<div id="slideshow" class="slideshow"></div>
<div id="controls" class="controls"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery('div.content').css('display', 'block');
</script>
</div>
</body>
</html>
To see this code in action, click here then click the "great remodeling project" link on the page to open the slideshow dialog. I won't go into detail about how this code works (perhaps a future article), but if you're using Webvanta it's a very easy cut & paste of the code, and "tagging" of the images you want to appear in your slideshow.
Finally, here's the more generic Flickr-style slideshow you can use on any site:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="jquery-ui-1.7.2.custom.css" rel="Stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({width:560,height:450});
});
</script>
</head>
<body>
<div id="dialog" title="Kitchen Remodel">
<object width="500" height="400">
<param name="flashvars" value="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2Fshow%2F&page_show_back_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2F&set_id=72157621840930765&jump_to="></param>
<param name="movie" value="http://www.flickr.com/apps/slideshow/show.swf?v=71649"></param>
<param name="allowFullScreen" value="true"></param>
<embed type="application/x-shockwave-flash" src="http://www.flickr.com/apps/slideshow/show.swf?v=71649" allowFullScreen="true" flashvars="offsite=true&lang=en-us&page_show_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2Fshow%2F&page_show_back_url=%2Fphotos%2F40645452%40N06%2Fsets%2F72157621840930765%2F&set_id=72157621840930765&jump_to=" width="500" height="400"></embed>
</object>
</div>
</body>
</html>
There you have it. Easy-to-use jQuery UI dialogs for your site. Mind you, don't make that an excuse to go crazy with them. Use your best judgement, and enjoy!
Are you using jQuery UI dialogs? How about dialogs from other JavaScript libraries? Jump in and post your comments!
Greg Beddow