Extreme ASP.NET Makeover: Script - jQuery SoC

Download

How do I download the videos?

• To download, right click the file type you would like and pick “Save target as…” or “Save link as…”

Why should I download videos from Channel9?

• It's an easy way to save the videos you like locally.
• You can save the videos in order to watch them offline.
• If all you want is to hear the audio, you can download the MP3!

Which version should I choose?

• If you want to view the video on your PC, Xbox or Media Center, download the High Quality WMV file (this is the highest quality version we have available).
• If you'd like a lower bitrate version, to reduce the download time or cost, then choose the Medium Quality WMV file.
• If you have a Zune, WP7, iPhone, iPad, or iPod device, choose the low or medium MP4 file.
• If you just want to hear the audio of the video, choose the MP3 file.

Right click “Save as…”

• Mid Quality WMV (Lo-band, Mobile)
• MP3 (Audio only)
• MP4 (iPod, Zune HD)

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