jQuery Effects and Some UI Features
One nice jQuery touch is that it includes a few simple yet very effective effects methods. For example, to add a little pizzazz to those new elements added to the document in the last example, instead of calling .show()
you could fade the elements in with simple code like this:
functions do exactly as their name implies; they provide an easy way to supply a visual clue that something on the page is changing. Other methods include .slideUp()
which slide content from the top or bottom to the current absolute position, with speed indicators. For lower-level animation there's the .animate()
function, which allows you to animate numeric CSS properties to a new value over a specified duration. In addition, animation plug-ins are available that provide all sorts of fade and transition effects. It's pretty impressive what you can do with very little effort, but even the basic built-in functions do a lot to liven up a web page. Just remember to keep it simple and not just add noise to the page.
A Popup Window Example
jQuery can also help create utilitarian UI features. This next example adds a pop-up window so you can dynamically type selectors that select and highlight matched elements in the entire page. The end result is shown in Figure 4
|Figure 4. Pop-Up Window: The figure shows a dynamic pop-up window with some added effects.|
A user pops up the "dialog" by clicking the Show Query Dialog window, which "slides in" the dialog from the top of the page and displays it with a slightly transparent background on top of the page content. You can then type a jQuery selector in the text area to apply it against the document. When you click the button, the selected elements are highlighted in dark red in the document and then the highlight is removed after a few seconds.
The dialog is stored on the page as a simple styled <div>
element that looks like this in markup:
Enter a jQuery Expression</div>
style="width: 300px; height: 60px;">
<input type="button" value="Show"
There's also some CSS styling for the dialog that makes it transparent, initially hidden, and absolutely positioned on the page:
The code that makes the panel visible, applies opacity, and handles the matching and selection is relatively simple (see Listing 2
The code initially makes the div visible and applies opacity. It then hooks up a click
handler to the button and an anonymous function to handle the click processing. That code captures the input text and then uses jQuery to "evaluate" the selector, applying a special highlight class to the matched set. The code also sets up a timeout that removes the highlight class after 5 seconds.
I mentioned nesting anonymous functions earlier and the code in Listing 2
A couple of other things to highlight here: Notice the code to make the dialog transparent:
jQuery is smart about how it handles certain CSS tags that browsers handle differently, such as opacity
. Internet Explorer doesn't support the opacity
style (because it's not officially part of the CSS 2.1 standard), but jQuery automatically does the right thing; it applies a filter style for Internet Explorer. jQuery applies similar rules for other CSS properties and certain functions. For example, .text()
retrieves text consistently and .scrollLeft/Top
retrieves scroll position safely. So jQuery acts as a normalizer between different browser implementations.
One last enhancement: If you wanted to make the window draggable so users could move it around over the page, that's easy if you use the draggable
plug-in from jQuery UI
. To use this plug-in, download jQuery UI and dump the library into your scripts folder (relevant portions provided in the sample). Then add the scripts to the page:
Then you can write:
var dialog = $("#divjQueryDialog");
That's it. You've just made your "window" a lot more window-like by adding the draggable plug-in, and writing a couple of lines of code. There are a number of options you can apply to draggable. For example, to set the drag handle to the window's header you can use:
Doing that makes only the header initiate a drag operation, which is more natural window behavior.