RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


An Introduction to jQuery, Part 1 : Page 6

jQuery is a small JavaScript library that makes development of HTML-based client JavaScript drastically easier.


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:

      .css("background", "paleyellow")
The .fadeIn() and .fadeOut() 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() and .slideDown() 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:

   <div id="divjQueryDialog"    
     <div class="gridheader">
       Enter a jQuery Expression</div>
     <div class="containercontent">  
       <span id="lblExpressonMsg">
       </span><br />       
       <textarea id="txtExpression" 
         style="width: 300px; height: 60px;">
       <input type="button" value="Show"
         id="btnExpression" />    

There's also some CSS styling for the dialog that makes it transparent, initially hidden, and absolutely positioned on the page:

     width: 380px;
     position: absolute; 
     left: 100px; 
     top: 70px;
     display: none;
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 shows another example—it's quite asynchronous, yet it's written in a single block of code that keeps context. The inner click handler has access to the dialog without having to reselect it. This is due to the way JavaScript handles nested closures or function blocks, which can see private variables defined higher up in the function definition stack—even if the code is asynchronous. In this example this is trivial, but if the fade out code (or "class") contained more state, it would be quite convenient to have that state passed to the handler merely by virtue of being declared inside of the parent closure. This type of coding can often be easier to read as it keeps related logic together in one place.

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:

   <script src="scripts/ui.core.js" 
   <script src="scripts/ui.draggable.js" 
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:

   dialog.draggable({ handle: 
      $("div.gridheader") });  
Doing that makes only the header initiate a drag operation, which is more natural window behavior.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date