Extreme ASP.NET Makeover: Script - jQuery SoC

Download

Right click “Save as…”

  • Mid Quality WMV (Lo-band, Mobile)
  • MP3 (Audio only)
  • MP4 (iPhone, Android)

Separating Your Concerns with jQuery

In your typical Web page, JavaScript is often found liberally sprinkled throughout the HTML. Little snippets of inline code in event handlers to catch clicks, mouse-overs, key presses and more. For example, ScrewTurn Wiki’s admin tools menu is toggled by clicking on the Admin link, which executes a call to the __ToggleAdminToolsMenu() function. (To see the Admin link, log in using the username/password of admin/password.)

<a id="AdminToolsLink" title="Administration Tools" 
href="#"
onclick="javascript:return __ToggleAdminToolsMenu();">
Admin</a>

Rather than having the onclick event wired up in the HTML, we could use the following markup instead:

<a id="AdminToolsLink" title="Administration Tools" href="#">Admin</a>

And then apply the behavior in a script tag in the <head/> or preferably in a separate JavaScript file:

$(document).ready(function() { 
$('#AdminToolsLink').click(function() {
return __ToggleAdminToolsMenu();
});
});

jQuery encourages the separation of behavioral code from HTML markup.

It doesn’t stop at moving function calls around. We can use jQuery to further refactor and simplify ScrewTurn Wiki’s JavaScript. Code related to showing/hiding page elements such as Admin Tools and Page Attachments is around 100 lines long, including comments and white space, but not including hooking up onclick, onhover and other events. That might not seem like a lot of code, but we can achieve the same effect for the Admin Tools with the following jQuery:

$(document).ready(function() { 
$('#AdminToolsLink').click(function() {
$('#AdminToolsDiv').css({ 'z-index': '1',
'position': 'absolute',
'top': link.position().top + link.outerHeight() + 'px',
'left': (link.position().left -
(div.outerWidth() - link.outerWidth())) + "px"
});
$('#AdminToolsDiv').toggle();
}).click();
});

When AdminToolsLink is clicked, we use the built-in jQuery css() function to reposition the AdminToolsDiv correctly beneath the AdminToolsLink and then use the built-in toggle() function to toggle AdminToolsDiv between visible and hidden. Notice the parameterless click() function on the end. In jQuery, click(function() {}) hooks up an event handler while click() calls it. So we are setting up an event handler and immediately invoking it to toggle the menu to initially hidden. We can use the same technique for the Page Attachments, but we can take this a step further, as shown below.

$(document).ready(function() { 
$('.dropdownMenu').click(function() {
var link = $(this);
var div = link.next('div');
div.css({ 'z-index': '1',
'position': 'absolute',
'top': link.position().top + link.outerHeight() + 'px',
'left': (link.position().left -
(div.outerWidth() - link.outerWidth())) + "px"
});
div.toggle();
}).click();
});

We apply a CSS class of “dropdownMenu” to any page element that we want to use as a drop-down menu. The code above hooks the click event. When clicked, jQuery finds the next <div/> after the clicked element and toggles that <div/> between visible and hidden. We have moved from a procedural style of specifying how page elements are individually shown and hidden to a declarative style whereby applying a CSS class of “dropdownMenu” to an element makes its children toggle automatically. If we decide that we don’t like the toggle() effect, jQuery provides a variety of other visual effects, including fades, slides and custom animations.

You can do a lot more with jQuery, including alternating row styles on tables, mouse-over effects, background loading and display of AJAX data, and more. An advanced UI library has been built on top of jQuery, which is aptly named jQueryUI. It builds on jQuery’s core events and animations to provide rich client-side widgets, such as date pickers, custom dialogs, progress bars, sliders and tabs, as well as rich interactions such as making page elements
draggable, resizable and sortable!



Other videos from this article

· Testing JavaScript

· Refactoring ScrewTurn Wiki JavaScript

· jQuery IntelliSense

· jQuery SoC

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Tags:

Follow the Discussion

Comments Closed

Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums,
or Contact Us and let us know.