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
 
 
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS
Most View
- SharePoint 2010 : Create a New List Item
- SharePoint 2010 : Use Built-in Web Parts (part 3) - Use the Media Web Part in SharePoint Server
- Performing Administrative Tasks Using Central Administration (part 20) - View Health Report
- Working with Multiple Local Group Policy Objects
- SharePoint 2010 : Enable or Disable Inline Editing in a View
- Windows Server 2008 : Configuring IIS Security (part 7)
- Microsoft ASP.NET 3.5 : Writing HTTP Handlers (part 5) - Advanced HTTP Handler Programming
- Sharepoint 2007 : Associate a Workflow with a List or Library
- Windows Server 2012 : Backup and Recovery (part 3) - Backing up and recovering your data - Using the backup utility, Backing up your data
- Windows 7 : Creating a Windows Network - Installing a Wireless Network (part 1) - Wireless Network Setup Choices