Programming4us
         
 
 
Programming

jQuery 1.3 : Developing plugins - Adding new shortcut methods

11/19/2010 2:36:10 PM
Many of the methods included in jQuery are shortcuts for other underlying methods. For example, most of the event methods are shortcuts for calls to .bind() or .trigger(), and many AJAX methods internally call $.ajax(). These shortcuts make it convenient to use features that are otherwise complicated by many options.

The jQuery library must maintain a delicate balance between convenience and complexity. Each method that is added to the library can help developers to write certain pieces of code more quickly, but also adds to the overall size of the code base and can reduce performance. For this reason, many shortcuts for built-in functionality are relegated to plugins, so that we can pick and choose the ones that are useful for each project and omit the irrelevant ones.

When we find ourselves repeating an idiom in our code many times, it may call for the creation of a shortcut method. For example, suppose we frequently animate items using a combination of the built-in "slide" and "fade" techniques. Putting these effects together means animating the height and opacity of an element simultaneously. The .animate() method makes this easy:

.animate({height: 'hide', opacity: 'hide'});


We can create a trio of shortcut methods to perform this animation when showing and hiding elements:

jQuery.fn.slideFadeOut = function() {
shortcut methods, addingelements, showingreturn this.animate({
height: 'hide',
opacity: 'hide'
});
};
jQuery.fn.slideFadeIn = function() {
return this.animate({
height: 'show',
opacity: 'show'
});
};
jQuery.fn.slideFadeToggle = function() {
return this.animate({
height: 'toggle',
opacity: 'toggle'
});
};

Now we can call .slideFadeOut() and trigger the animation whenever it is needed. Because, within a plugin method definition, this refers to the current jQuery object, the animation will be performed on all matched elements at once.

For completeness, our new methods should support the same parameters that the built- in shortcuts do. In particular, methods such as .fadeIn() can be customized with speeds and callback functions. Since .animate() also takes these parameters, allowing this is straightforward. We just accept the parameters and forward them on to .animate().

jQuery.fn.slideFadeOut = function(speed, callback) {
return this.animate({
height: 'hide',
opacity: 'hide'
}, speed, callback);
};
jQuery.fn.slideFadeIn = function(speed, callback) {
return this.animate({
height: 'show',
opacity: 'show'
}, speed, callback);
};
jQuery.fn.slideFadeToggle = function(speed, callback) {
return this.animate({
height: 'toggle',
opacity: 'toggle'
}, speed, callback);
};

Now, we have custom shortcut methods that function just like their built-in counterparts. To demonstrate this, we'll need a simple HTML page:

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.</p>
<div class="controls">
<input type="button" value="Slide and fade out"
id="out" />
<input type="button" value="Slide and fade in" id="in" />
<input type="button" value="Toggle" id="toggle" />
</div>
</body>

Our script will simply call our new methods when the buttons are clicked:

$(document).ready(function() {
$('#out').click(function() {
$('p').slideFadeOut('slow');
return false;
});
$('#in').click(function() {
$('p').slideFadeIn('slow');
return false;
});
$('#toggle').click(function() {
$('p').slideFadeToggle('slow');
return false;
});
});


And the animation occurs as expected.

Other -----------------
- jQuery 1.3 : Developing plugins - DOM traversal methods
- Using Cloud Services : Exploring Online Planning and Task Management
- Using Cloud Services : Exploring Online Scheduling Applications
- Using Cloud Services : Exploring Online Calendar Applications
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 3)
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 2)
- SOA with .NET and Windows Azure : Service Contracts with WCF (part 1)
- Cloud Security and Privacy : Data Security and Storage
- iPad SDK : Working with Documents - Desktop Synchronization
- Required Project Images for iPad Apps
- iPhone SDK : GameKit Voice Chat
- iPhone SDK : Creating Basic GameKit Services (part 2) : Sending and Receiving Data
- iPhone SDK : Creating Basic GameKit Services (part 1)
- iPad : Navigating with Maps
- Adding iPad to the Mix
- A Brief History of Legacy .NET Distributed Technologies : .NET Remoting
- A Brief History of Legacy .NET Distributed Technologies : .NET Enterprise Services
- iPad SDK : Outputting to an External Screen
- iPad SDK : Displaying Multiple Videos
- Parallel Programming Drivers
 
 
Most View
- SharePoint 2010 : Associate a Workflow with a List or Library
- Windows Phone 7 : Uninstalling an App
- SharePoint 2010 : Create a Subsite (part 2) - Create a Subsite Without Microsoft Silverlight Installed
- Windows Server 2008 : Promote Servers as Domain Controllers
- Windows 8 : Managing Network Connections
- Performing Administrative Tasks Using Central Administration (part 21)
- SharePoint 2010 : Delete a File or List Item
- Windows Server 2008 : Configuring FTP (part 10) - Configuring FTP SSL Settings
- Microsoft Visual Studio 2010 : Using the Concurrency Visualizer (part 3) - The Cores View
- Security in Cloud Computing (part 4) - Audit and Compliance
Top 10
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 3) - Configuring Recipient Filtering
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 2)
- Implementing Edge Services for an Exchange Server 2007 Environment : Utilizing the Basic Sender and Recipient Connection Filters (part 1)
- Implementing Edge Services for an Exchange Server 2007 Environment : Installing and Configuring the Edge Transport Server Components
- What's New in SharePoint 2013 (part 7) - BCS
- What's New in SharePoint 2013 (part 6) - SEARCH
- What's New in SharePoint 2013 (part 6) - WEB CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 5) - ENTERPRISE CONTENT MANAGEMENT
- What's New in SharePoint 2013 (part 4) - WORKFLOWS
- What's New in SharePoint 2013 (part 3) - REMOTE EVENTS